夏日博客

A-A+

javascript动态加载js脚本几种方法

2016年01月27日 前端设计 暂无评论 阅读 6 views 次

本文章总结了几种常用的动态加载js脚本的方法，有需要的朋友可参考一下。

javascript动态加载js脚本

1、直接document.write,代码如下:

  1. <script language="javascript">  
  2.     document.write("<script src='test.js'></script>");  
  3. </script>  

2、动态改变已有script的src属性,代码如下:

  1. <script src='' id="s1"></script>  
  2. <script language="javascript">  
  3.     s1.src="test.js"  
  4. </script>  

3、动态创建script元素,代码如下:

  1. function require(url, options){   
  2.     var head, node, isOpera;   
  3.     isOpera         = typeof opera !== 'undefined' && opera.toString() === '[object Opera]';   
  4.     options.success = options.success || function(){};   
  5.     options.error   = options.error || function(){};   
  6.     options.type    = options.type || 'text/javascript';   
  7.     options.charset = options.charset || 'utf-8';   
  8.     options.async   = options.async || true;   
  9.         
  10.     head            = document.getElementsByTagName("head")[0];   
  11.     node            = document.createElement(//javascript/i.test(options.type) ? 'script' : 'style');   
  12.     node.type       = options.type;   
  13.     node.charset    = options.charset;   
  14.     node.async      = options.async;   
  15.     node.src        = url;   
  16.     if (node.attachEvent &&    
  17.         !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) &&    
  18.         !isOpera){   
  19.         node.attachEvent('onreadystatechange', function(){   
  20.             if(!node.readyState || node.readyState == "loaded" || node.readyState == "complete"){   
  21.                 options.success();   
  22.             }   
  23.         });   
  24.     }else{   
  25.         node.addEventListener('load', options.success, false);   
  26.         node.addEventListener('error', options.error, false);   
  27.     }   
  28.         
  29.     head.appendChild(node);   
  30. }  

IE不支持加载失败检测,代码如下:

  1. require('http://code.jquery.com/jquery-1.7.3.min.js', {   
  2.     success:function(){   
  3.         alert('jquery loaded!');   
  4.     },   
  5.     error:function(){   
  6.         alert('jquery load fail!');   
  7.     }   
  8. });  

方法四,代码如下:

  1. //动态加载脚本文件  
  2. function AddScript(scriptID,scriptSRC)  
  3. {  
  4.     if(document.getElementByIdx(scriptID)!=null)  
  5.     return;  
  6.     var Heads = document.getElementsByTagName_r("HEAD");  
  7.     if(Heads.length==0)  
  8.     return;  
  9.     var oHead = Heads.item(0);  
  10.     var oScript= document.createElement("script");  
  11.     oScript.id = scriptID;  
  12.     oScript.type = "text/javascript";  
  13.     //oScript.text = scriptContent;  
  14.     oScript.src = scriptSRC;  
  15.     oHead.appendChild(oScript);  
  16. }  
  17. //动态加载脚本内容  
  18. function AddScript(scriptID,scriptContent)  
  19. {  
  20.     if(document.getElementByIdx(scriptID)!=null)  
  21.     return;  
  22.     var Heads = document.getElementsByTagName_r("HEAD");  
  23.     if(Heads.length==0)  
  24.     return;  
  25.     var oHead = Heads.item(0);  
  26.     var oScript= document.createElement("script");  
  27.     oScript.id = scriptID;  
  28.     oScript.type = "text/javascript";  
  29.     oScript.text = scriptContent;  
  30.     oHead.appendChild(oScript);  
  31. }  
标签：

给我留言