`
m635674608
  • 浏览: 4935991 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

动态加载js

    博客分类：
  • js
 
阅读更多

1,如何动态加载js文件,并且加载完成之后调用其中的函数呢?

Js代码   收藏代码
  1. function loadJs(url, callback) {  
  2.     var done = false;  
  3.     var script = document.createElement('script');  
  4.     script.type = 'text/javascript';//do not 'application/javascript',because Low version of the browser is not compatible  
  5.     script.language = 'javascript';  
  6.     script.charset = "utf-8";  
  7.     script.src = url;  
  8.     //script.setAttribute('src', url);  
  9.     script.onload = script.onreadystatechange = function () {  
  10.         if (!done && (!script.readyState || script.readyState == 'loaded' || script.readyState == 'complete')) {  
  11.             done = true;  
  12.             script.onload = script.onreadystatechange = null;  
  13.             if (callback) {  
  14.                 console.log('load '+url+' success.');  
  15.                 callback.call(script);  
  16.             }  
  17.         }  
  18.     };  
  19.     document.getElementsByTagName("head")[0].appendChild(script);  
  20. };  

loadJs 功能: 

动态加载js文件,即异步加载js文件,

并且在回调函数中可以调用该js文件中的函数或变量

实例:

Html代码   收藏代码
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style>  
  7.         ul, li {  
  8.             /*list-style: outside none none;*/  
  9.             list-style-type: none;  
  10.             margin-left: 0;  
  11.         }  
  12.   
  13.         li label {  
  14.             width: 20%;  
  15.             float: left; /* It is necessary */  
  16.         }  
  17.   
  18.   
  19.   
  20.         li.button {  
  21.             text-align: center;  
  22.             margin-left: -40px;  
  23.         }  
  24.   
  25.         input.errorBorder {  
  26.             border: solid 1px #ff0000;  
  27.         }  
  28.     </style>  
  29.     <script type="text/javascript" src="page.js"  ></script>  
  30.     <script type="text/javascript" src="jquery-1.11.1.js"  ></script>  
  31.     <script type="text/javascript" src="common_util.js"  ></script>  
  32.   
  33. </head>  
  34. <body>  
  35. <form action="">  
  36.     <ul style="width: 400px">  
  37.         <li>  
  38.             <label for="username">用户名</label><input id="username"  type="text"/> <span>用户名不能为空</span>  
  39.         </li>  
  40.         <li>  
  41.             <label for="password">密码</label><input id="password" type="text"/>  
  42.         </li>  
  43.   
  44.     </ul>  
  45. </form>  
  46. <script type="text/javascript">  
  47.     loadJs('jplaceholder.js', function () {  
  48.         $('#username').placeholder({  
  49.             word: '用户名', color: '#ddd', normalFontColor: '#f00', maxLen: 3, minLen: 2, errorBorderClass: 'errorBorder',  
  50.             keyup_callback: function () {  
  51.                 console.log('keyup_callback');  
  52.             },keydown_callback: function () {  
  53.                 console.log('keydown...');  
  54.             }  
  55.         });  
  56.         $('#password').placeholder({word: '请输入密码', normalFontColor: '#f00', color: '#ddd'}, function () {  
  57.             console.log('callback');  
  58.         });  
  59.     });  
  60.   
  61.   
  62. </script>  
  63. </body>  
  64. </html>  

 

 

相同功能的方法有:

Js代码   收藏代码
  1. function loadJS2(url, callback) {  
  2.     var script = document.createElement('script');  
  3.     script.type = 'text/javascript';  
  4.     script.charset = "utf-8";  
  5.     if (script.readyState) {  // 兼容IE的旧版本  
  6.         script.onreadystatechange = function () {  
  7.             if (script.readyState == 'loaded' || script.readyState == 'complete') {  
  8.                 script.onreadystatechange = null;  
  9.                 callback();  
  10.             }  
  11.         }  
  12.     }  
  13.     else {  
  14.         script.onload = function () {  
  15.             callback();  
  16.         }  
  17.     }  
  18.     script.src = url;  
  19.     document.getElementsByTagName('head')[0].appendChild(script);  
  20. }  
  21.   
  22. function xhrLoadJS(url, callback) {  
  23.     var xhr = createXHR();  
  24.     xhr.open('get', url, true);  
  25.     xhr.onreadystatechange = function () {  
  26.         if (xhr.readyState == 4) {  
  27.             if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304/*页面未修改*/) {  
  28.                 var script = document.createElement('script');  
  29.                 script.type = 'text/script';  
  30.                 script.charset = "utf-8";  
  31.                 script.text = xhr.responseText;  
  32.                 eval(xhr.responseText);  // 执行代码  
  33.                 document.body.appendChild(script);  
  34.                 if (callback && typeof callback === 'function') {  
  35.                     callback();  
  36.                 }  
  37.             }  
  38.         }  
  39.     };  
  40.     xhr.send(null);  
  41. }  
  42. /*获取异步请求的对象*/  
  43. var createXHR = function () {  
  44.   
  45.     try {  
  46.         xhr = new XMLHttpRequest();  
  47.         return xhr;  
  48.     } catch (e) {  
  49.         try {  
  50.             xhr = new ActiveXObject("Microsoft.XMLHTTP");  
  51.             return xhr;  
  52.         } catch (ee) {  
  53.             xhr = false;  
  54.         }  
  55.     }  
  56.     if (!xhr && typeof XMLHttpRequest != 'undefined') {  
  57.         new ActiveXObject("Msxml2.XMLHTTP");  
  58.         return xhr;  
  59.     }  
  60. };  

 

 http://hw1287789687.iteye.com/blog/2243216

分享到：
| 快速寻找满足条件的两个数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics