首页 > 如何实现Javascript的include功能?

如何实现Javascript的include功能?

需求场景:
页面上已经包含进来一个Javascript文件:

<script src="1.js"></script>
现在希望页面加载1.js之后,XXX.com/2.js的内容被引用到页面上,如何来写1.js的内容?


function include(src,src2){
    var script = document.createElement("script");
    script.setAttribute("src",src);
    document.head.appendChild(script);
    script.onload = function(){
        alert("test_loaed");
        var script2 = document.createElement("script");
        script2.setAttribute("src",src2);
        document.head.appendChild(script2);
        script2.onload = function(){
            alert("test2_loaded");
        }
    }
}
include("test.js","test2.js");

这是思路,楼主自己解决兼容性的问题。用递归的话可以实现不限文件数量的动态加载,但是会有严重性能问题。


如果依赖关系复杂点的话,简单的加载方式可能会导致重复加载。长久之计是使用模块化js库,比如require.js


希望简单的话,直接在 1.js 文件内引用另外一个 js 文件即可。

document.write("<script language = \"javascript\" src = \" 2.js \"> <\/script>"); 

此外,你还可以参考下这个:
How to include a JavaScript file in another JavaScript file?

简单测试:

index.html

<script src="1.js"></script>

1.js

document.write(" <script language = \"javascript\" src = \" 2.js \" > <\/script>"); 

2.js

alert('I will show absolutely!');

// 1 加载jQuery

function include(jsurl) {
    if (jsurl == null || typeof(jsurl) != 'string') return;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.charset = 'utf-8';
    script.src = jsurl;
    /*script.setAttribute("src",jsurl);*/
    document.head.appendChild(script);
}
include("http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js");
【热门文章】
【热门文章】