动态加载script文件的两种方法

第一种就是利用ajax方式,把script文件代码从后台加载到前台,而后对加载到的内容经过eval()执行代码。第二种是,动态建立一个script标签,设置其src属性,经过把script标签插入到页面head来加载js,至关于在head中写了一个<script src="..."></script>,只不过这个script标签是用js动态建立的 
好比说是咱们要动态地加载一个callbakc.js,咱们就须要这样一个script标签: 
javascript

复制代码代码以下:
<script type="text/javascript" src="call.js"></script>  


以下代码就是如何经过js来建立这个标签(而且加到head中): 
java

复制代码代码以下:
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方法) 
ajax

复制代码代码以下:
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);
相关文章
相关标签/搜索