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

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

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

相关推荐

    vue动态加载js.zip

    在Vue.js应用开发中，有时候我们可能需要动态加载JavaScript资源，比如某些库或者插件只在特定场景下使用，为了优化性能，不希望一开始就加载。Vue动态加载JS是一种实现这一需求的技术，它允许我们在运行时根据需要...

    javascript函数动态加载javascript文件

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

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

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

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

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

    asp.net动态加载JavaScript树

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

    JS动态加载库

    JavaScript动态加载库是一种技术，它允许开发者在网页运行时按需加载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框架，本...

    js动态加载器(只限JS)

    动态加载js文件,让js文件实现用不到绝不加载的功能!

    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,动态添加表格和删除表格,批量添加记录，批量添加

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

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

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

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

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

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

    动态加载js和css(外部文件)

    此外，还可以通过JavaScript动态创建`&lt;style&gt;`元素，并使用`insertRule`方法向`document.styleSheets`中添加样式规则。示例代码如下： ```javascript if (flag) { loadCss("css/base.css"); }; function loadCss...

    jsTree 很好用的动态加载数

    动态加载是 jsTree 的核心特性之一，它允许在用户滚动或展开树节点时按需加载数据，而不是一次性加载所有数据。这种机制对于处理大量数据特别有用，因为它减少了初始页面加载时间，提高了用户体验。通过设置适当的...

    js 动态加载网页样式

    总结一下，动态加载网页样式是通过JavaScript（尤其是jQuery）来实现实时更改CSS样式，提高用户体验。通过结合`jquery.cookie.js`，我们可以将用户的个性化选择保存在Cookie中，使得刷新页面后仍然能够保持用户定制...

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