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

 

相关文章
|
4月前
|
数据采集 Web App开发 JavaScript
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
利用Selenium和XPath抓取JavaScript动态加载内容的实践案例
|
7月前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
1237 2
|
2月前
|
数据采集 JavaScript 前端开发
如何使用Python爬虫处理JavaScript动态加载的内容?
如何使用Python爬虫处理JavaScript动态加载的内容?
|
3月前
|
Web App开发 数据采集 JavaScript
有JavaScript动态加载的内容如何抓取
有JavaScript动态加载的内容如何抓取
|
7月前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
54 0
|
JSON 前端开发 JavaScript
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
在这里记录一下,也是在公司用到的一个例子,刚刚解决,正好趁热打铁。前端页面是采用BootStrap框架搭建的,主要的样式涉及到项目,在这里就不截图了,直接上代码:
113 1
|
数据采集 JavaScript 前端开发
如何采集javascript动态加载网页
从一个运行 javascript 的网站加载所有数据来加载内容,目前的问题是当运行启动代码时它无法加载 javascript 内容,因为用户应该向下滚动才能加载。如何编写启动代码来滚动整页呈现 javacript 并返回 html呢? 为了加载运行JavaScript来加载内容的网站上的所有数据,可以修改Splash代码以模拟滚动并确保整个页面呈现,从而能够检索所需的HTML内容
|
JavaScript 前端开发
HTML中的JavaScript中script元素 动态加载脚本
本文介绍了HTML中JavaScript的动态加载脚本的概念、优势和实现方式,并结合实例讲解了如何通过动态加载脚本实现更加灵活的控制和优化。
|
前端开发 JavaScript UED
HTML中的JavaScript中script元素动态加载脚本
在HTML中,<script>元素可以通过动态创建和添加来实现动态加载脚本。动态加载脚本可以优化页面性能和提高用户体验,但需要注意脚本的执行顺序和依赖关系。
|
JavaScript API 数据库
EasyUI+js实现动态加载导航栏
EasyUI+js实现动态加载导航栏
298 0
EasyUI+js实现动态加载导航栏