web动态添加js外部文件方式

曾经终败给现在 2022-05-13 03:34 215阅读 0赞

### <1>scrilpt标签方式 ###

文档对象模型（DOM）允许你使用JavaScript 动态创建HTML的几乎全部文档内容。其根本在于，<script>元素与页面其他元素没有什么不同：引用变量可以通过DOM进行检索，可以从文档中移动、删除，也可以被创建.

var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "file1.js";
    document.getElementsByTagName_r("head")[0].appendChild(script);

新的<script>元素加载file1.js源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。你甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的HTTP 连接）。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了Firefox和Opera，他们将等待此前的所有动态脚本节点执行完毕）。当脚本是“自运行”类型时这一机制运行正常，但是如果脚本只包含供页面其他脚本调用调用的接口，则会带来问题。这种情况下，你需要跟踪脚本下载完成并准备妥善的情况。可以使用动态<script>节点发出事件得到相关信息。

Firefox, Opera, Chorme, IE11+ 和Safari3+会在<script>节点接收完成之后发出一个load 事件。你可以监听这一事件，以得到脚本准备好的通知：

var script = document.createElement("script")
    script.type = "text/javascript";
    //Firefox, Opera, Chrome, Safari 3+
    script.onload = function(){
        alert("Script loaded!");
    };
    script.src = "file1.js";
    document.getElementsByTagName_r("head")[0].appendChild(script);

Internet Explorer(IE10及以下版本)支持另一种实现方式，它发出一个readystatechange事件。<script>元素有一个readyState属性，它的值随着下载外部文件的过程而改变。readyState 有五种取值：

>  *  uninitialized: 默认状态
>  *  loading: 下载开始
>  *  loaded: 下载完成
>  *  interactive: 下载完成但尚不可用
>  *  complete: 所有数据已经准备好

微软文档上说，在<script>元素的生命周期中，readyState 的这些取值不一定全部出现，但并没有指出哪些取值总会被用到。实践中，我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个readyState值所表示的最终状态并不一致，有时<script>元素会得到“loader”却从不出现“complete”，但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在readystatechange 事件中检查这两种状态，并且当其中一种状态出现时，删除readystatechange事件句柄（保证事件不会被处理两次）：

var script = document.createElement("script")
    script.type = "text/javascript";
    //Internet Explorer
    script.onreadystatechange = function(){
        if (script.readyState == "loaded" || script.readyState == "complete"){
            script.onreadystatechange = null;
            alert("Script loaded.");
        }
    };
    script.src = "file1.js";
    document.getElementsByTagName_r("head")[0].appendChild(script);

大多数情况下，你希望调用一个函数就可以实现JavaScript 文件的动态加载。下面的函数封装了标准实现和IE 实现所需的功能：

### <2>异步加载js文件 ###

> > 在实际开发中，为了实现某种效果或者提升用户体验，往往需要控制何时加载js。本文总结了三个场景的js加载需求：在页面加载完成之后加载js，不同条件下动态加载不同的js，项目打包时的异步加载js模块。
> 
> ## **一、在页面加载完成之后加载js** ##
> 
> 由于js的加载需要一定的时间，为了提高用户体验，可以先让页面元素呈现出来，然后在加载js文件。
> 
> <code><script type="text/javascript"> 
> $(document).ready(function(){ 
> var userName="xiaoming"; 
> alert(userName); 
> }); 
> </script> </code>
> 
> *  
> 
> 或者简写：
> 
> <code>$(function(){ 
> var userName="xiaoming"; 
> alert(userName); 
> }); </code>
> 
> *  
> 
> ## **二、不同条件下动态加载不同的js** ##
> 
> 在不同条件下动态加载不同的js，当你的代码将在不同的环境中运行的时候，你需要他加载不同的js，一方面减少js的加载量，另一方面防止加载的两个js相互污染，所以要先判断环境，然后根据不同环境选择加载不同的js。这里举了个不恰当的例子，zepto和jquery，只是做个例子而已。
> 
> <code>var loadScript;
> if(isHomeEncironment){
> loadJS("https://***/dist/js/public/zepto.min.js");
> loadScript.onload = function() {//加载结束之后执行回调
> loadScript.onload = null;
> callAFun();//回调函数A
> }
> }else{
> loadJS("https://***/dist/js/public/jquery.js"); 
> loadScript.onload = function() {//加载结束之后执行回调
> loadScript.onload = null;
> callBFun(); //回调函数B
> } 
> }
> function loadJS(url) {//加载js
> loadScript = document.createElement("script");
> loadScript.type = "text/javascript";
> loadScript.src = url;
> document.body.appendChild(loadScript);
> }
> function callBFun(){//zepto方法} 
> function callBFun(){//jquery方法} 
> </code>
> 
> *  
> 
> ## **三、项目打包时的异步加载js模块** ##
> 
> 在commonjs中有一个Modules/Async/A规范，里面定义了require.ensure语法。webpack实现了它，作用是可以在打包的时候进行代码分片，并异步加载分片后的代码。用法如下：
> 
> <code>require.ensure([], function(require){
> var list = require('./list');
> list.show();
> }, 'list');</code>
> 
> *  
> 
> 此时list.js会被打包成一个单独的chunk文件 list.fb874860b35831bc96a8.js。
> 
> > require.ensure方法有三个参数，关于第一个参数，上例中传了空数组，如果传模块名称，则可以实现预加载懒执行，即当执行到这里时，js文件会加载到浏览器但是不会执行，真正执行的是list = require(‘./list’)list = require(‘./list’)。关于第三个参数，用于定义成成的js文件的名称，该参数不是必须的，如果没有第三个参数，那么生成的js文件为默认的名字

## ##

### <3>网页里面动态添加js ###

### 常见的js动态加载技术之一是把一些逻辑独立的js脚本文件单独加载。这样做的好处是，比如可减少不必要的js脚本文件的加载，以提高网页浏览器的速度。 ###

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>动态加载js</title>
 <script type="text/javascript">
 //动态加载js文件--my.js
 function loadJs(){
 //得到html的头部dom
 var theHead = document.getElementsByTagName('head').item(0);
 //创建脚本的dom对象实例
 var myScript = document.createElement('script');
 myScript.src = './my.js'; //指定脚本路径
 myScript.type = 'text/javascript'; //指定脚本类型
 myScript.defer = true; //程序下载完后再解析和执行
 theHead.appendChild(myScript); //把dom挂载到头部
 }
 </script>
 </head>
 <body style="text-align:center">
 
 <input type="button" value="动态加载JS" onclick="loadJs()"/>
 
 </body>
 </html>

### js代码： ###

var test = function(){
        alert("动态加载js文件");
    }
    test();

### 效果： ###

![这里写图片描述][SouthEast]

### 点击按钮之后，执行js代码片段。 ###

### 解析：本例采用动态创建的方式来动态加载js，这是较为合理的一种方式。首先，创建一个js的DOM对象，然后，为它配置好脚本的地址和类型，最后把它挂载到网页的头部，也就是head部分。只有当用户单击“OK”按钮之后，“my.js”这个脚本文件才会被加载到网页中执行。 ###

## ##

### <4>使用js加载器加载外部的js文件 ###

## [使用js加载器动态加载外部Javascript文件][js_Javascript] ##

今天在网上找到了一个可以动态加载js文件的js加载器，具体代码如下：

JsLoader.js

![复制代码][copycode.gif]

1 var MiniSite=new Object();
     2 /**
     3  * 判断浏览器
     4  */
     5 MiniSite.Browser={   
     6     ie:/msie/.test(window.navigator.userAgent.toLowerCase()),   
     7     moz:/gecko/.test(window.navigator.userAgent.toLowerCase()),   
     8     opera:/opera/.test(window.navigator.userAgent.toLowerCase()),   
     9     safari:/safari/.test(window.navigator.userAgent.toLowerCase())   
    10 };
    11 /**
    12  * JsLoader对象用来加载外部的js文件
    13  */
    14 MiniSite.JsLoader={
    15     /**
    16      * 加载外部的js文件
    17      * @param sUrl 要加载的js的url地址
    18      * @fCallback js加载完成之后的处理函数
    19      */
    20     load:function(sUrl,fCallback){   
    21         var _script=document.createElement('script');   
    22         _script.setAttribute('charset','gbk');   
    23         _script.setAttribute('type','text/javascript');   
    24         _script.setAttribute('src',sUrl);   
    25         document.getElementsByTagName('head')[0].appendChild(_script);   
    26         if(MiniSite.Browser.ie){   
    27             _script.onreadystatechange=function(){   
    28                 if(this.readyState=='loaded'||this.readyStaate=='complete'){ 
    29                     //fCallback();
    30                     if(fCallback!=undefined){
    31                          fCallback(); 
    32                     }
    33                      
    34                 }   
    35             };   
    36         }else if(MiniSite.Browser.moz){   
    37             _script.οnlοad=function(){   
    38                 //fCallback(); 
    39                 if(fCallback!=undefined){
    40                         fCallback(); 
    41                 }
    42             };   
    43         }else{   
    44             //fCallback();
    45             if(fCallback!=undefined){
    46                     fCallback(); 
    47             }
    48         }   
    49     }   
    50 };

![复制代码][copycode.gif]

JsLoader.js测试

![复制代码][copycode.gif]

1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 
 5 <script type="text/javascript" src="js/JsLoader.js"></script>
 6 <title>JsLoaderTest.html</title>
 7 <script type="text/javascript">
 8 if(MiniSite.Browser.ie){
 9 //动态加载Js
 10 MiniSite.JsLoader.load("js/jquery-1.9.1.js",function(){
 11 alert("动态加载的是jquery-1.9.1.js");
 12 $(function(){
 13 alert("jquery-1.9.1.js动态加载完成之后做的处理操作");
 14 });
 15 }); 
 16 }else{
 17 MiniSite.JsLoader.load("js/jquery-2.0.3.js",function(){
 18 alert("动态加载的是jquery-2.0.3.js");
 19 $(function(){
 20 alert("jquery-2.0.3.js动态加载完成之后做的处理操作");
 21 });
 22 });
 23 }
 24 </script>
 25 </head>
 26 
 27 <body>
 28 
 29 </body>
 30 </html>

![复制代码][copycode.gif]

测试结果如下：

IE浏览器下测试结果：

![70][]![70 1][]

google浏览器下的测试结果：

![70 2][]

![70 3][]

[SouthEast]: /images/20220513/3c62550a191649478ea5c4953a73374e.png
[js_Javascript]: https://www.cnblogs.com/xdp-gacl/p/3927417.html
[copycode.gif]: /images/20220513/af605f9f147844f1a139c0c048499feb.png
[70]: https://img-blog.csdn.net/20180910113928777?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTY0NjcxNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220513/5c778d66261e40aa9d0400f4e44a5854.png
[70 2]: /images/20220513/e97dd58e8b6c49d39365c63438c35d39.png
[70 3]: /images/20220513/c5a1b16be78b47e2b52a9aca9d65f1fd.png