学步园

动态加载js文件到head标签并执行回调

方法调用：dynamicLoadJs(‘http://www.yimo.link/static/js/main.min.js’,function(){alert('加载成功’)});

/** * 动态加载JS * @param {string} url 脚本地址 * @param {function} callback 回调函数 */ function dynamicLoadJs(url, callback) { var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; if(typeof(callback)=='function'){ script.onload = script.onreadystatechange = function () { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete"){ callback(); script.onload = script.onreadystatechange = null; } }; } head.appendChild(script); }

动态加载css文件到head

方法调用： dynamicLoadCss(‘http://www.yimo.link/static/css/style.css’)

/** * 动态加载CSS * @param {string} url 样式地址 */ function dynamicLoadCss(url) { var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.type='text/css'; link.rel = 'stylesheet'; link.href = url; head.appendChild(link); }

动态加载脚本文件

参考：http://www.cnblogs.com/yuanke/p/5039699.html

/** * 动态加载css脚本 * @param {string} cssText css样式 */ function loadStyleString(cssText) { var style = document.createElement("style"); style.type = "text/css"; try{ // firefox、safari、chrome和Opera style.appendChild(document.createTextNode(cssText)); }catch(ex) { // IE早期的浏览器 ,需要使用style元素的stylesheet属性的cssText属性 style.styleSheet.cssText = cssText; } document.getElementsByTagName("head")[0].appendChild(style); } // 测试 var css = "body{color:blue;}"; loadStyleString(css); /** * 动态加载js脚本 * @param {string} code js脚本 */ function loadScriptString(code) { var script = document.createElement("script"); script.type = "text/javascript"; try{ // firefox、safari、chrome和Opera script.appendChild(document.createTextNode(code)); }catch(ex) { // IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。 script.text = code; } document.getElementsByTagName("head")[0].appendChild(script); } // 测试 var text = "function test(){alert('test');}"; loadScriptString(text); test();

动态加载iframe到body标签并执行回调

方法调用：dynamicLoadIframe(‘http://www.yimo.link’,function(){alert(‘加载成功’)},’’);

/** * 动态加载Iframe * @param {string} url 脚本地址 * @param {function} callback 回调函数 * @param {string} style 加载样式 */ function dynamicLoadIframe(url,callback,style) { var body = document.getElementsByTagName('body')[0]; var iframe = document.createElement('iframe'); iframe.src = url; iframe.style=style||'display:none;width:0px;height:0px;'; if(typeof(callback)=='function'){ iframe.onload = iframe.onreadystatechange = function () { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") { callback(); iframe.onload = iframe.onreadystatechange = null; } }; } body.appendChild(iframe); }

M站中下载/打开app

方法测试：openApp(‘ios页面’,’**.apk’,‘metools://home’);

function openApp(iosDownUrl,andDownUrl,appUrl) { var ua = navigator.userAgent.toLowerCase(); if (/iphone|ipad|ipod/.test(ua)) {//ios跳转到store window.location.href = iosDownUrl; return; } if(ua.indexOf("micromessenger") > -1){//微信中不能打开其他app window.location.href = andDownUrl; return; } if (/android/.test(ua)) {//安卓手机尝试调用app if(!appUrl){ console.log('未指定需要打开的App,可参考http://www.oschina.net/code/snippet_256033_35330/'); return; } var su = appUrl;//"metools://index";//自定义协议 var n = setTimeout(function () { window.location.href = andDownUrl }, 500); var r = document.createElement("iframe"); r.src = su; r.onload = function () { console.log('iframe load') clearTimeout(n); r.parentNode.removeChild(r); window.location.href = su; }; r.setAttribute("style", "display:none;"); document.body.appendChild(r); return; } window.location.href = andDownUrl; }

6.query参数转换

参考：https://github.com/nicejade/awesome-vue-cli3-example/blob/master/src/helper/utils.js#L36

/** * query参数转换**/export function query(search) { let str = search || window.location.search let objURL = {} str.replace(new RegExp('([^?=&]+)(=([^&]*))?', 'g'), ($0, $1, $2, $3) => { objURL[$1] = $3 }) return objURL}

使用：query(’?v=1’)

function queryString(url, query) { let str = [] for (let key in query) { str.push(key + '=' + query[key]) } let paramStr = str.join('&') return paramStr ? `${url}?${paramStr}` : url}

使用： queryString(‘http://192.168.1.32:3638/checkout’,{abc:123})

以上就上有关js实用方法记录-js动态加载css、js脚本文件的相关介绍，要了解更多php教程_php自学_php视频教程下载 - 绵阳技术博客内容请登录学步园。