| 标题 | 动态加载JavaScript文件的两种方法 |
| 内容 | 第一种利用ajax方式，第二种是动静创建一个script标签，配置其src属性，经过把script标签拔出到页面head来加载js，感乐趣的网友可以看下 这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法，感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式，把script文件代码从背景加载到前台，而后对加载到的内容经过eval()实施代码。第二种是，动静创建一个script标签，配置其src属性，经过把script标签插入到页面head来加载js，相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们要动静地加载一个callbakc.js，我们就必要多么一个script标签： 代码如下: <script type="text/javascript" src="call.js"></script> 如下代码就是如何通过js来创建这个标签（并且加到head中）： 代码如下: var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.src= 'call.js'; head.appendChild(script); 当加载完call.js， 我们就要调用其中的方法。不过在header.appendChild(script)之后我们不能马上调用其中的js。因为浏览器是异步加载这个js的，我们不知道他什么时候加载完。然而我们可以通过监听事件的办法来判断helper.js是否加载完成。（假设call.js中有一个callback方法） 代码如下: var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.onreadystatechange= function () { if (this.readyState == 'complete') callback(); } script.onload= function(){ callback(); } script.src= 'helper.js'; head.appendChild(script); 我设了2个事件监听函数， 因为在ie中使用onreadystatechange, 而gecko,webkit 浏览器和opera都支持onload。事实上this.readyState == 'complete'并不能工作的很好，理论上状态的变化是如下步骤： 1.uninitialized 2.loading 3.loaded 4.interactive 5.complete 但是有些状态会被跳过。根据经验在ie7中，只能获得loaded和completed中的一个，不能都出现，原因也许是对判断是不是从cache中读取影响了状态的变化，也可能是其他原因。最好把判断条件改成this.readyState == 'loaded' || this.readyState == 'complete' 参考jQuery的实现我们最后实现为： 代码如下: var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script'); script.type= 'text/javascript'; script.onload = script.onreadystatechange = function() { if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { help(); // Handle memory leak in IE script.onload = script.onreadystatechange = null; } }; script.src= 'helper.js'; head.appendChild(script); 还有一种简单的情况就是可以把help()的调用写在helper.js的最后，那么可以保证在helper.js在加载完后能自动调用help(),当然最后还要能这样是不是适合你的应用。 另外需要注意： 1.因为script标签的src可以跨域访问资源,所以这种方法可以模拟ajax，解决ajax跨域访问的问题。 2.如果用ajax返回的html代码中包含script，则直接用innerHTML插入到dom中是不能使html中的script起作用的。粗略的看了下jQuery().html(html)的原代码，jQuery也是先解析传入的参数，剥离其中的script代码，动态创建script标签，所用jQuery的html方法添加进dom的html如果包含script是可以执行的。如： 代码如下: jQuery("#content").html("<script>alert('aa');<\/script>"); 以上就是动态加载JavaScript文件的方法，希望对大家的学习有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。