摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数
js实用方法记录-动态加载css/js
1.动态加载js文件到head标签并执行回调
方法调用:dynamicLoadJs("http://www.yimo.link/static/j...",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); }
2.动态加载css文件到head标签并执行回调
方法调用: dynamicLoadCss("http://www.yimo.link/static/c...",function(){alert("加载成功")})
/** * 动态加载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); }
3.动态加载脚本文件
参考:http://www.cnblogs.com/yuanke...
/** * 动态加载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();
4.动态加载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); }
5.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/a...
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 }
7.使用:query("?v=1")
对象转query参数
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 }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99259.html
摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs(http://www.yimo.link/static/...
摘要:测试动态加载到标签并执行回调方法调用加载成功动态加载脚本地址回调函数加载样式站中下载打开方法测试页面跳转到微信中不能打开其他安卓手机尝试调用未指定需要打开的可参考自定义协议参数转换参考参数转对象使用对象转参数 js实用方法记录-动态加载css/js 1.动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs(http://www.yimo.link/static/...
摘要:转载来源包管理器管理着库,并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具。•npm – npm 是 javasc...
摘要:转载来源包管理器管理着库,并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想,使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源:https://github.com/jobbole/aw... 包管理器管理着 javascript 库,并提供读取和打包它们的工具。•npm – npm 是 javasc...
阅读 2545·2021-11-22 12:01
阅读 1072·2021-11-15 11:37
阅读 3657·2021-09-22 14:59
阅读 1716·2021-09-04 16:45
阅读 1365·2021-09-03 10:30
阅读 988·2021-08-11 11:18
阅读 2430·2019-08-30 10:53
阅读 1995·2019-08-29 15:13