js动态加载脚本

　首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了一个package.js，打开后在里面写一个方法functionOne，很简单，代码如下：

[javascript] view plain copy

  1. function functionOne(){
  2. alert("成功加载");
  3. }

　后面的html文件都创建在同一个目录下。

方法一：直接document.write

　在同一个文件夹下面创建一个function1.html，代码如下：

[html] view plain copy

  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript">
  5. function init()
  6. {
  7. //加载js脚本
  8. document.write("<script src=‘package.js‘><\/script>");
  9. //加载一个按钮
  10. document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
  11. //如果马上使用会找不到，因为还没有加载进来，此处会报错
  12. functionOne();
  13. }
  14. function operation()
  15. {
  16. //可以运行，显示“成功加载”
  17. functionOne();
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <input type="button" value="初始化加载" onclick="init()"/>
  23. </body>
  24. </html>

通过document.write的方式可以往页面写入脚本，如代码所示，点击按钮“初始化加载”后可以加载package.js文件，但是立即运行里面的方法functionOne会找不到此方法，报告错误，而点击第二个按钮（通过document.write动态创建的“测试运行效果”）发现可以执行，此时脚本已经加载完毕了。由于这种方式是异步加载（一边继续执行后面的代码，一边额外开一个线程执行需要加载的脚本），并且document.write会重写界面，明显不实用。

方法二：动态改变已有script的src属性

　　在同一个文件夹下面创建一个function2.html，代码如下：

[javascript] view plain copy

  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" id="yy" src=""></script>
  5. <script type="text/javascript">
  6. function init()
  7. {
  8. yy.src = "package.js";
  9. //如果马上使用会找不到，因为还没有加载进来，此处会报错
  10. functionOne();
  11. }
  12. function operation()
  13. {
  14. //可以运行，显示“成功加载”
  15. functionOne();
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <input type="button" value="测试按钮" onclick="init()"/>
  21. <input type="button" value="测试运行效果" onclick="operation()"/>
  22. </body>
  23. </html>

　此种方法的好处在于不会改变界面元素，不至于重写界面元素，但是同样是异步加载，会有同样的问题。

方法三：动态插入外部js文件（异步）

　　在同一个文件夹下面创建一个function3.html，代码如下：

[html] view plain copy

  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript">
  5. function init()
  6. {
  7. var myScript= document.createElement("script");
  8. myScript.type = "text/javascript";
  9. myScript.src="package.js";
  10. document.body.appendChild(myScript);
  11. //如果马上使用会找不到，因为还没有加载进来
  12. functionOne();
  13. }
  14. function operation()
  15. {
  16. //可以运行，显示“成功加载”
  17. functionOne();
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <input type="button" value="测试按钮" onclick="init()"/>
  23. <input type="button" value="测试运行效果" onclick="operation()"/>
  24. </body>
  25. </html>

　此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签，缺点还是异步加载，存在同样的问题。

　这三种方法都是异步执行的，所以在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。

　不过可以在functionOne前面加一个alert就可以堵塞一下主页面脚本的运行，然后你发现functionOne就可以运行了，或者你的后期代码需要在另一个按钮下执行，一步一步的来，要不就定义一个计时器，在固定时间后再执行后面的代码，不过在项目里面肯定不可能使用这些方法。

　其实第三种方法改一点就变成同步加载了。

方法四：动态插入JavaScript代码（同步）

　　在同一个文件夹下面创建一个function4.html，代码如下：

[html] view plain copy

  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript">
  5. function init()
  6. {
  7. var myScript= document.createElement("script");
  8. myScript.type = "text/javascript";
  9. myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
  10. document.body.appendChild(myScript);
  11. //此处发现可以运行
  12. functionOne();
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <input type="button" value="测试按钮" onclick="init()"/>
  18. </body>
  19. </html>

　此方法并没有加载外部的js文件，而是给myScript添加了子项。在Firefox、Safari、Chrome、Opera和IE9中，这些代码可以正常运行。但是在IE8以及以下的版本中会导致错误。IE将<script>视为一个特殊的元素，不允许DOM访问其子节点。不过可以用<script>元素的text属性来制定js代码，想下面的例子这样：　

[javascript] view plain copy

  1. var myScript= document.createElement("script");
  2. myScript.type = "text/javascript";
  3. myScript.text = "function functionOne(){alert(\"成功运行\"); }";
  4. document.body.appendChild(myScript);
  5. //此处可以运行
  6. functionOne();

　经过这样修改之后的代码可以在IE、Firefox、Opera和Safari3及之后版本中运行。Safari3.0之前的版本虽然不能正确地支持text属性，但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的Safari，可以使用下面代码：　

[html] view plain copy

  1. var myScript= document.createElement("script");
  2. myScript.type = "text/javascript";
  3. var code = "function functionOne(){alert(\"成功运行\"); }";
  4. try{
  5. myScript.appendChild(document.createTextNode(code));
  6. }
  7. catch (ex){
  8. myScript.text = code;
  9. }
  10. document.body.appendChild(myScript);
  11. //此处发现可以运行
  12. functionOne();

　这里，首先尝试标准的DOM文本节点方法，因为除了IE8以及以下，所有浏览器都支持这种方式。如果这行代码抛出了错误，那么说明是IE8以及以下，于是就必须使用text属性了。整个过程可以用以下函数来表示：

[javascript] view plain copy

  1. function loadScriptString(code)
  2. {
  3. var myScript= document.createElement("script");
  4. myScript.type = "text/javascript";
  5. try{
  6. myScript.appendChild(document.createTextNode(code));
  7. }
  8. catch (ex){
  9. myScript.text = code;
  10. }
  11. document.body.appendChild(myScript);
  12. }

　然后你可以在其他地方使用此方法来加载需要使用的代码。实际上，这样执行代码与在全局作用于中把相同字符串传递给eval()是一样的。但是我们这里只能使用字符串形式的代码，也有局限性，用户一般希望提供的方法形如loadScriptAddress("package.js")的方式，所以我们还需要继续讨论。

方法五：XMLHttpRequest/ActiveXObject异步加载

　　在同一个文件夹下面创建一个function5.html，代码如下：

[html] view plain copy

  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript">
  5. function init()
  6. {
  7. //加载package.js文件，设置script的id为yy
  8. ajaxPage("yy","package.js");
  9. //此方法为package.js里面的方法，此处执行方法成功
  10. functionOne();
  11. }
  12. function ajaxPage(sId,url)
  13. {
  14. var oXmlHttp = getHttpRequest();
  15. oXmlHttp.onreadystatechange = function()
  16. {
  17. //4代表数据发送完毕
  18. if ( oXmlHttp.readyState == 4 )
  19. {
  20. //0为访问的本地，200代表访问服务器成功，304代表没做修改访问的是缓存
  21. if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)
  22. {
  23. includeJS(sId,oXmlHttp.responseText);
  24. }
  25. else
  26. {
  27. }
  28. }
  29. }
  30. oXmlHttp.open("GET",url,true);
  31. oXmlHttp.send(null);
  32. }
  33. function getHttpRequest()
  34. {
  35. if(window.ActiveXObject)//IE
  36. {
  37. return new ActiveXObject("MsXml2.XmlHttp");
  38. }
  39. else if(window.XMLHttpRequest)//其他
  40. {
  41. return new XMLHttpRequest();
  42. }
  43. }
  44. function includeJS(sId,source)
  45. {
  46. if((source != null)&&(!document.getElementById(sId)))
  47. {
  48. var myHead = document.getElementsByTagName("HEAD").item(0);
  49. var myScript = document.createElement( "script" );
  50. myScript.language = "javascript";
  51. myScript.type = "text/javascript";
  52. myScript.id = sId;
  53. try{
  54. myScript.appendChild(document.createTextNode(source));
  55. }
  56. catch (ex){
  57. myScript.text = source;
  58. }
  59. myHead.appendChild( myScript );
  60. }
  61. }
  62. </script>
  63. </head>
  64. <body>
  65. <input type="button" value="测试按钮" onclick="init()"/>
  66. </body>
  67. </html>

　ActiveXObject只有IE里面才有，其他浏览器大部分支持XMLHttpRequest，通过此办法我们可以实现动态加载脚本了，不过是异步加载，也没法运行functionOne，第二次就可以运行了，但是可惜的是在IE、Firefox、Safari下可以运行，在Opera、Chrome下会出错，不过只要发布之后在Chrome和Opera下就不会出现错误了。

　其实这里把open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件。

方法六：XMLHttpRequest/ActiveXObject同步加载　　

　　在这里我把一些情况考虑在内，写成了一个方法，封装为loadJS.js，方便以后直接调用，代码如下：

[html] view plain copy

  1. /**
  2. * 同步加载js脚本
  3. * @param id   需要设置的<script>标签的id
  4. * @param url   js文件的相对路径或绝对路径
  5. * @return {Boolean}   返回是否加载成功，true代表成功，false代表失败
  6. */
  7. function loadJS(id,url){
  8. var  xmlHttp = null;
  9. if(window.ActiveXObject)//IE
  10. {
  11. try {
  12. //IE6以及以后版本中可以使用
  13. xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  14. }
  15. catch (e) {
  16. //IE5.5以及以后版本可以使用
  17. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  18. }
  19. }
  20. else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome
  21. {
  22. xmlHttp = new XMLHttpRequest();
  23. }
  24. //采用同步加载
  25. xmlHttp.open("GET",url,false);
  26. //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
  27. xmlHttp.send(null);
  28. //4代表数据发送完毕
  29. if ( xmlHttp.readyState == 4 )
  30. {
  31. //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存
  32. if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
  33. {
  34. var myHead = document.getElementsByTagName("HEAD").item(0);
  35. var myScript = document.createElement( "script" );
  36. myScript.language = "javascript";
  37. myScript.type = "text/javascript";
  38. myScript.id = id;
  39. try{
  40. //IE8以及以下不支持这种方式，需要通过text属性来设置
  41. myScript.appendChild(document.createTextNode(xmlHttp.responseText));
  42. }
  43. catch (ex){
  44. myScript.text = xmlHttp.responseText;
  45. }
  46. myHead.appendChild( myScript );
  47. return true;
  48. }
  49. else
  50. {
  51. return false;
  52. }
  53. }
  54. else
  55. {
  56. return false;
  57. }
  58. }

　此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布，注释还是写的比较清楚的，以后需要加载某个js文件时，只需要一句话就行了，如loadJS("myJS","package.js")。方便实用。

　如果想要实现不发布还非要兼容所有浏览器，至少我还没找出这样的同步加载的办法，我们只能通过异步加载开出回调函数来实现。

方法七：回调函数方式

　　在同一个文件夹下面创建一个function7.html，代码如下：

[html] view plain copy

  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript">
  5. function init()
  6. {
  7. //加载package.js文件，设置script的id为yy
  8. loadJs("yy","package.js",callbackFunction);
  9. }
  10. function callbackFunction()
  11. {
  12. functionOne();
  13. }
  14. function loadJs(sid,jsurl,callback){
  15. var nodeHead = document.getElementsByTagName(‘head‘)[0];
  16. var nodeScript = null;
  17. if(document.getElementById(sid) == null){
  18. nodeScript = document.createElement(‘script‘);
  19. nodeScript.setAttribute(‘type‘, ‘text/javascript‘);
  20. nodeScript.setAttribute(‘src‘, jsurl);
  21. nodeScript.setAttribute(‘id‘,sid);
  22. if (callback != null) {
  23. nodeScript.onload = nodeScript.onreadystatechange = function(){
  24. if (nodeScript.ready) {
  25. return false;
  26. }
  27. if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == ‘complete‘) {
  28. nodeScript.ready = true;
  29. callback();
  30. }
  31. };
  32. }
  33. nodeHead.appendChild(nodeScript);
  34. } else {
  35. if(callback != null){
  36. callback();
  37. }
  38. }
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <input type="button" value="测试按钮" onclick="init()"/>
  44. </body>
  45. </html>

这种方式所有浏览器都支持，但是后面的代码必须放在回调函数里面，也就是异步加载了。看需求使用把！我还是比较喜欢第六种方法的。如果是异步加载的话，方法还有好几种，不过我的出发点是希望实现同步加载，这里就不对异步加载做总结了。

原文地址：https://www.cnblogs.com/lhxsoft/p/8376670.html

时间： 2024-08-27 08:29:55

js动态加载脚本的相关文章

JS 动态加载脚本 执行回调[transfer]

JS 动态加载脚本 执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数. 我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发现

JS 动态加载脚本 执行回调

JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数. 我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发

JS 动态加载脚本的4种方法

有时候我们需要动态的加入适合的js,因为有时候不需要将所有的js都加载进来,以来提高效率,但这种方法比较适合单个js文件比较大的情况 如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4种比较常用的方法,大家可以根据情况选择,最后脚本之家 将会给推荐一个. 1.直接document.write  <script language="javascript"> document.write("<script src='test.js'><

js实现动态加载脚本的方法实例汇总

本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在

JavaScript的DOM_动态加载脚本和样式

一.动态加载脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的 JS 脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 1.动态加载js文件 比如:我们想在需要检测浏览器的时候,再引入检测文件. <script type="text/javascript"> window.onload = function(){ alert(typeof BrowserDetect); } var flag = true; //设置 true

第一百一十八节，JavaScript，动态加载脚本和样式

JavaScript,动态加载脚本和样式 一动态脚本 当网站需求变大,脚本的需求也逐步变大.我们就不得不引入太多的JS脚本而降低了整站的性能,所以就出现了动态脚本的概念,在适时的时候加载相应的脚本. 比如:我们想在需要检测浏览器的时候,再引入检测文件. 1动态加载js文件 window.onload = function() { //window.onload事件,等待html执行完成后,执行匿名函数 //判断要加载的文件是否加载成功 alert(typeof BrowserDetect); }

js 动态加载事件的几种方法总结

本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用. 方法一.setAttributevar obj = document.getElementById("obj");obj.setAttribute("onclick", "javasc

js动态加载css和js

js动态加载css和js用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjscssfile("http://libs.baidu.com/jquery/1.9.1/jquery.js","js") * @param fileurl 文件路径, * @param filetype 文件类型,支持传入类型,js.css */ loadjscssfile:function(

Javascript动态加载脚本与样式

一   动态加载js 动态加载js的必要性: 1.    项目越做越大,大量引入的js会导致性能问题: 2.   实际项目可能会遇到:需要在一个js文件中引用另一个js文件中的函数,可是另一个函数有没有办法在页面中通过该<script>标签加载. 网上看了几篇博客大概有三种方式: 1.直接document.write<script language="javascript">    document.write("<script src='jia