开发者社区> 黄威的世界> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

动态加载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. };  

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
js实用方法记录-动态加载css/js
动态加载js文件到head标签并执行回调
60 0
js的动态加载、缓存、更新以及复用(四)
  本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了。     1、页面里使用来加载 boot.js 。   2、然后在boot.js里面动态加载 bootLoad.js。
883 0
js的动态加载、缓存、更新以及复用(一)
使用范围:   OA、MIS、ERP等信息管理类的项目,暂时不考虑网站。   遇到的问题:   完成一个项目,往往需要引用很多js文件,比如jQuery.js、easyUI等。还有自己写的一些列js文件,那么这些文件如何方便的加载,如果文件有变化如何才能让客户端及时更新缓存?如果能够提高点运行效率,那就更好了。
1296 0
js的动态加载、缓存、更新以及复用(三)
总体思路 1、  建立一个js服务,该服务实现通用js文件的加载、依赖、缓存、更新以及复用。 2、  各个项目如果使用通用js,可(bi)以(xu)使用js服务实现加载。 3、  Js服务只提供通用的js,比如jQuery、my97、easyUI等(可根据实际情况设定具体的js文件)。
1085 0
+关注
黄威的世界
我是一个热衷IT技术的人,希望自己不断地设计开发出对别人非常有用的软件。有近7年的java开发经验(包括2年Android开发经验)和一年左右的linux使用经验。擅长Java Web后台开发 ,喜欢研究新的各种实用技术
667
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载