js实用方法记录-动态加载css、js
附送一个加载iframe,h5打开app代码
1. 动态加载js文件到head标签并执行回调
方法调用:dynamicLoadJs('http://www.yimo.link/static/js/main.min.js',function(){alert('加载成功')});
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
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/css/style.css')
1 2 3 4 5 6 7 8 9 10 11 12
|
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/p/5039699.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
function loadStyleString(cssText) { var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode(cssText)); }catch(ex) { style.styleSheet.cssText = cssText; } document.getElementsByTagName("head")[0].appendChild(style); }
var css = "body{color:blue;}"; loadStyleString(css);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
function loadScriptString(code) { var script = document.createElement("script"); script.type = "text/javascript"; try{ script.appendChild(document.createTextNode(code)); }catch(ex) { 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('加载成功')},'');
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
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');
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| function openApp(iosDownUrl,andDownUrl,appUrl) { var ua = navigator.userAgent.toLowerCase(); if (/iphone|ipad|ipod/.test(ua)) { window.location.href = iosDownUrl; return; } if(ua.indexOf("micromessenger") > -1){ window.location.href = andDownUrl; return; } if (/android/.test(ua)) { if(!appUrl){ console.log('未指定需要打开的App,可参考http://www.oschina.net/code/snippet_256033_35330/'); return; } var su = appUrl; 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; }
|