`
m635674608
  • 浏览: 5027514 次
  • 性别: 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

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

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

相关推荐

    javascript函数动态加载javascript文件

    动态加载JavaScript文件的基本原理是利用`&lt;script&gt;`标签的异步加载特性或者使用`XMLHttpRequest`或`fetch` API来创建HTTP请求获取JS文件。下面我们将深入探讨这两种方法： 1. **使用`&lt;script&gt;`标签**： 在HTML中，...

    vue动态加载外部依赖js代码实现

    ### Vue动态加载外部JS代码实现 #### 概述 在前端开发中，有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时，可能会遇到需要按需加载某些功能的情况，例如第三方库、API接口等。...

    动态加载外部JS文件

    动态加载外部JS文件是网页开发中的一个重要技术，它允许网页在需要时按需加载JavaScript资源，从而提高页面的加载速度，优化用户体验，并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...

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

    在Web开发中，动态加载JavaScript脚本是一种常见的优化策略，它允许在页面加载后根据需要按需加载脚本，从而提高页面性能和用户体验。本文将详细介绍四种动态加载JS脚本的方法，并探讨它们的工作原理和应用场景。 1...

    JQuery动态加载JS插件，很难找的哦

    本篇文章将深入探讨如何使用jQuery实现动态加载JavaScript插件，这是一个在网页开发中非常实用的技术，尤其是在优化页面性能和减少初始加载时间方面。 首先，理解动态加载的基本原理。在传统的网页开发中，所有的...

    asp.net动态加载JavaScript树

    ASP.NET动态加载JavaScript树是一种常见的前端交互技术，用于在网页中构建可扩展的、动态的树形结构。这种技术结合了后端ASP.NET的强大处理能力和前端JavaScript的灵活展示，为用户提供了良好的交互体验，尤其适用于...

    动态加载js文件

    可以通过extjs3进行动态加载js,也可以直接通过原生js进行调用 拥有extjs4的动态加载功能， 可以同时加载多个js文件， 同时加载过的文件不会重复加载

    EXTJS4 MVC+ASP.NET MVC3动态加载JS文件实例

    本例采用ASP.NET MVC3 +EXTJS4 MVC 框架，完美实现了EXTJS4动态加载JS文件，对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助，快速掌握MVC框架，本...

    Ext4 动态加载js例子

    `Ext.Loader` 是 Ext4 中的一个核心特性，用于动态加载所需的 JavaScript 类库和模块，这在开发大型应用时尤其有用，因为它可以显著减少页面初次加载时的资源需求。 动态加载的核心在于按需加载，即只有在实际需要...

    动态加载JS文件和CSS文件，多浏览器支持。

    动态加载JS文件和CSS文件，多浏览器支持。多个JS文件同时加载，加载完成后执行回调方法。 使用方法: var loader=new RemoteLoader(); loader.loadFiles(["yy.js","jj.jus"],作用域);

    动态添加css或js链接

    4. **动态添加JS链接** 5. **注意事项** ### 1. 理解动态加载的概念 动态加载指的是在页面加载过程中根据特定条件来决定是否加载某些资源（如CSS或JS文件）。这种方式可以显著提升用户体验，尤其是在网络条件不佳...

    动态添加js,动态添加表格和删除表格,批量添加记录，批量添加

    动态添加js,动态添加表格和删除表格,批量添加记录，批量添加

    JS 动态加载js文件和css文件 同步/异步的两种简单方式

    JavaScript动态加载资源文件是指在页面加载完成后，根据需要从服务器动态加载额外的脚本（js文件）或样式表（css文件）。这种方法可以减少初始页面加载时的资源消耗，提高页面的加载速度。动态加载可以通过两种方式...

    使用jquery动态加载js文件的方法

    动态加载JavaScript文件是一种在网页运行时，根据需要将JavaScript文件加载到页面中的技术。这种方法通常用于页面初始化时不需要执行的脚本，或者根据用户操作来决定加载哪些脚本，以此减少页面的初始加载时间，提高...

    动态加载JavaScript文件的两种方法_.docx

    动态加载JavaScript文件是提高网页性能和优化用户体验的重要技术。它允许网页在需要时按需加载脚本，避免一次性加载大量资源导致页面加载速度减慢。本文将详细介绍两种常见的动态加载JavaScript文件的方法，并讨论...

    动态加载JS文件的三种方法

    ### 动态加载JS文件的三种方法 在Web开发中，动态加载JavaScript文件是一种常见的需求。这不仅可以提高页面性能，还能让开发者灵活地控制脚本的加载时机。本文将详细介绍三种常用的动态加载JS文件的方法，并通过...

    使用javaScript动态加载Js文件和Css文件

    （1）使用JavaScript动态加载Js文件 /*JavaScript动态加载Js文件*/ var scriptNode = document.createElement('script'); scriptNode.src = 'proxy.js?t='+new Date().getTime();/*附带时间参数，防止缓存*/ ...

    javascript、css动态加载工具

    javascript、css动态加载工具

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