EventUtil.addHandler(window,'load',function(){ var script = document.createElement("script"); EventUtil.addHandler(script,'readystatechange',function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (target.readyState == "loaded" || target.readyState == "complete"){ EventUtil.removeHandler(target, "readystatechange", arguments. callee); alert(script.src); } }); script.src = 'a.js'; document.body.appendChild(script); });
下面我们可以使用javascript客户端检测技术来判断是否是IE和其他标准浏览器做一个简单的封装；如下代码：
var ua = navigator.userAgent.toLowerCase(); EventUtil.addHandler(window,'load',function(){ var script = document.createElement("script"); if(/msie ([^;]+)/.test(ua) || "ActiveXObject" in window) { // IE 浏览器 EventUtil.addHandler(script,'readystatechange',function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if (target.readyState == "loaded" || target.readyState == "complete"){ EventUtil.removeHandler(target, "readystatechange", arguments. callee); console.log("javascript已经加载完成"); } }); }else { // 除IE之外的标准浏览器 EventUtil.addHandler(script,'load',function(event){ console.log("javascript已经加载完成"); }); } script.src = 'a.js'; document.body.appendChild(script); });
上面的是针对所有的主要的浏览器进行封装来判断动态加载的JS是否已经加载完成！
理解动态加载行内JS方式
另一种加载javascript代码的方式是行内方式，如下代码：
复制代码 代码如下:
<script src=https://www.jb51.net/”text/javascript”>
function sayHi(){alert(1);}
</script>
从理论来讲，下面的代码应该是有效的；
复制代码 代码如下:
var script = document.createElement('script');
script.type = 'text/javascript';
script.appendChild(document.createTextNode("function sayHi(){alert(1);} sayHi()"));
document.body.appendChild(script);
如上代码在firefox，IE9+，chrome和opera中，都是正常的，可以运行的，但是在IE8及以下会报错，如下：
IE8及以下将script视为一个特殊的元素，不允许dom访问其子节点；但是我们可以使用script元素的text属性来指定javascript代码，如下代码：
var script = document.createElement('script'); script.type = 'text/javascript'; script.text = "function sayHi(){alert(1);} sayHi()"; document.body.appendChild(script);
现在在所有的主流的浏览器都是正常的，在IE8及以下也是正常的；但是在safari3.0之前的版本不能正确的支持text属性，但可以允许使用文本节点来指定代码；如下代码：
var script = document.createElement('script'); script.type = 'text/javascript'; var code = "function sayHi(){alert(1);} sayHi()"; try{ script.appendChild(document.createTextNode(code)); }catch(e){ script.text = code; } document.body.appendChild(script);
下面我们可以使用一个函数来封装下；如下代码：
function loadScriptString(code) { var script = document.createElement('script'); script.type = 'text/javascript'; try{ script.appendChild(document.createTextNode(code)); }catch(e){ script.text = code; } document.body.appendChild(script); } loadScriptString("function sayHi(){alert(1);} sayHi()");
理解动态加载css样式
与动态脚本类似，所谓动态样式是指在页面刚载入时不存在的样式，动态样式是在页面加载完成后动态添加到页面中的；
动态加载样式如下代码：
var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "style.css"; var head = document.getElementsByTagName("head")[0]; head.appendChild(link);
如上代码即可动态生成css样式；
我们也可以像JS一样先封装一个函数，为了调用更加方便；如下代码：
function loadStyles(url) { var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = url; var head = document.getElementsByTagName("head")[0]; head.appendChild(link); } loadStyles("style.css");
我们也可以使用事件的方式来判断css动态加载是否已经加载完成~
EventUtil.addHandler(window,'load',function(){ var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; EventUtil.addHandler(link, "load", function(event){ console.log("css loaded"); }); link.href = "style.css"; document.getElementsByTagName("head")[0].appendChild(link); });
注意：如上代码：不仅在标准浏览器下chrome，firefox，opera下支持，而且IE7-10都支持这种加载；但是safari不支持这种加载；
或者和javascript一样，我们也可以针对IE下做一种这样的处理；代码如下，也可以支持所有的IE下：