`
aijuans
  • 浏览: 1565586 次
社区版块
存档分类
最新评论

js动态加载脚本

 
阅读更多

最近公司的前端地图产品需要做一下模块划分，希望用户用到哪一块的功能再加载哪一块的模块，这样可以提高用户体验。

所以到处查资料研究js动态脚本的加载，不过真让人伤心啊！，网上几乎都是同一篇文章，4种方法，讨厌其中拷贝别人成果的人，也不加个原文的链接。哎！关键是最后一种方法还有点错误。经过两天的研究查阅资料，在这里和大家分享一下。

首先我们需要一个被加载的js文件，我在一个固定文件夹下创建了一个package.js，打开后在里面写一个方法functionOne，很简单，代码如下：

function functionOne(){
    alert("成功加载");
}

后面的html文件都创建在同一个目录下。

方法一：直接document.write

在同一个文件夹下面创建一个function1.html，代码如下：

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function init()
        {
            //加载js脚本
            document.write("<script src='package.js'><\/script>");
            //加载一个按钮
            document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
            //如果马上使用会找不到，因为还没有加载进来，此处会报错
            functionOne();
        }
        function operation()
        {
            //可以运行，显示“成功加载”
            functionOne();
        }
    </script>
</head>
<body>
    <input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>

通过document.write的方式可以往页面写入脚本，如代码所示，点击按钮“初始化加载”后可以加载package.js文件，但是立即运行里面的方法functionOne会找不到此方法，报告错误，而点击第二个按钮（通过document.write动态创建的“测试运行效果”）发现可以执行，此时脚本已经加载完毕了。由于这种方式是异步加载（一边继续执行后面的代码，一边额外开一个线程执行需要加载的脚本），并且document.write会重写界面，明显不实用。

方法二：动态改变已有script的src属性

在同一个文件夹下面创建一个function2.html，代码如下：

<html>
<head>
    <title></title>
    <script type="text/javascript" id="yy" src=""></script>
    <script type="text/javascript">
        function init()
        {
            yy.src = "package.js";
            //如果马上使用会找不到，因为还没有加载进来，此处会报错
            functionOne();
        }
        function operation()
        {
            //可以运行，显示“成功加载”
            functionOne();
        }
    </script>
</head>
<body>
    <input type="button" value="测试按钮" onclick="init()"/>
    <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

此种方法的好处在于不会改变界面元素，不至于重写界面元素，但是同样是异步加载，会有同样的问题。

方法三：动态创建script元素（异步）

在同一个文件夹下面创建一个function3.html，代码如下：

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function init()
        {
            var myScript= document.createElement("script");
            myScript.type = "text/javascript";
            myScript.src="package.js";
            document.body.appendChild(myScript);
            //如果马上使用会找不到，因为还没有加载进来
            functionOne();
        }
        function operation()
        {
            //可以运行，显示“成功加载”
            functionOne();
        }
    </script>
</head>
<body>
    <input type="button" value="测试按钮" onclick="init()"/>
    <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

此办法的优势相对于第二种而言就是不需要最开始就在界面写一个script标签，缺点还是异步加载，存在同样的问题。

这三种方法都是异步执行的，所以在加载这些脚本的同时，主页面的脚本继续运行，如果用以上的方法，那下面的代码将得不到预期的效果。

不过可以在functionOne前面加一个alert就可以堵塞一下主页面脚本的运行，然后你发现functionOne就可以运行了，或者你的后期代码需要在另一个按钮下执行，一步一步的来，要不就定义一个计时器，在固定时间后再执行后面的代码，不过在项目里面肯定不可能使用这些方法。

其实第三种方法改一点就变成同步加载了。

方法四：动态创建script元素（同步）

在同一个文件夹下面创建一个function4.html，代码如下：

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function init()
        {

            var myScript= document.createElement("script");
            myScript.type = "text/javascript";
            myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
            document.body.appendChild(myScript);
            //此处发现可以运行
            functionOne();
        }
    </script>
</head>
<body>
    <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

此方法并没有加载外部的js文件，而是给myScript添加了子项。在Firefox、Safari、Chrome、Opera和IE9中，这些代码可以正常运行。但是在IE8以及以下的版本中会导致错误。IE将<script>视为一个特殊的元素，不允许DOM访问其子节点。不过可以用<script>元素的text属性来制定js代码，想下面的例子这样：

            var myScript= document.createElement("script");
            myScript.type = "text/javascript";
            myScript.text = "function functionOne(){alert(\"成功运行\"); }";
            document.body.appendChild(myScript);
            //此处可以运行
            functionOne();

经过这样修改之后的代码可以在IE、Firefox、Opera和Safari3及之后版本中运行。Safari3.0之前的版本虽然不能正确地支持text属性，但却允许使用文本节点技术来指定代码。如果需要兼容早期版本的Safari，可以使用下面代码：

            var myScript= document.createElement("script");
            myScript.type = "text/javascript";
            var code = "function functionOne(){alert(\"成功运行\"); }";
            try{
                myScript.appendChild(document.createTextNode(code));
            }
            catch (ex){
                myScript.text = code;
            }
            document.body.appendChild(myScript);
            //此处发现可以运行
            functionOne();

这里，首先尝试标准的DOM文本节点方法，因为除了IE8以及以下，所有浏览器都支持这种方式。如果这行代码抛出了错误，那么说明是IE8以及以下，于是就必须使用text属性了。整个过程可以用以下函数来表示：

 function loadScriptString(code)
        {
            var myScript= document.createElement("script");
            myScript.type = "text/javascript";
            try{
                myScript.appendChild(document.createTextNode(code));
            }
            catch (ex){
                myScript.text = code;
            }
            document.body.appendChild(myScript);
        }

然后你可以在其他地方使用此方法来加载需要使用的代码。实际上，这样执行代码与在全局作用于中把相同字符串传递给eval()是一样的。但是我们这里只能使用字符串形式的代码，也有局限性，用户一般希望提供的方法形如loadScriptAddress("package.js")的方式，所以我们还需要继续讨论。

方法五：XMLHttpRequest/ActiveXObject异步加载

在同一个文件夹下面创建一个function5.html，代码如下：

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function init()
        {
            //加载package.js文件，设置script的id为yy
            ajaxPage("yy","package.js");
            //此方法为package.js里面的方法，此处执行方法成功
            functionOne();
        }
        function ajaxPage(sId,url)
        {
            var oXmlHttp = getHttpRequest();
            oXmlHttp.onreadystatechange = function()
            {
                //4代表数据发送完毕
                if ( oXmlHttp.readyState == 4 )
                {
                    //0为访问的本地，200代表访问服务器成功，304代表没做修改访问的是缓存
                    if(oXmlHttp.status == 200 || oXmlHttp.status == 0 || oXmlHttp.status == 304)
                    {
                        includeJS(sId,oXmlHttp.responseText);
                    }
                    else
                    {
                    }
                }
            }
            oXmlHttp.open("GET",url,true);
            oXmlHttp.send(null);
        }
        function getHttpRequest()
        {
            if(window.ActiveXObject)//IE
            {
                return new ActiveXObject("MsXml2.XmlHttp");
            }
            else if(window.XMLHttpRequest)//其他
            {
                return new XMLHttpRequest();
            }
        }
        function includeJS(sId,source)
        {
            if((source != null)&&(!document.getElementById(sId)))
            {
                var myHead = document.getElementsByTagName("HEAD").item(0);
                var myScript = document.createElement( "script" );
                myScript.language = "javascript";
                myScript.type = "text/javascript";
                myScript.id = sId;
                try{
                    myScript.appendChild(document.createTextNode(source));
                }
                catch (ex){
                    myScript.text = source;
                }
                myHead.appendChild( myScript );
            }
        }
    </script>
</head>
<body>
    <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

ActiveXObject只有IE里面才有，其他浏览器大部分支持XMLHttpRequest，通过此办法我们可以实现动态加载脚本了，不过是异步加载，也没法运行functionOne，第二次就可以运行了，但是可惜的是在IE、Firefox、Safari下可以运行，在Opera、Chrome下会出错，Chrome下的错误如下：

不过只要发布之后在Chrome和Opera下就不会出现错误了。

其实这里把open里面设置为false就是同步加载了，同步加载不需要设置onreadystatechange事件。

方法六：XMLHttpRequest/ActiveXObject同步加载

在这里我把一些情况考虑在内，写成了一个方法，封装为loadJS.js，方便以后直接调用，代码如下：

/**
 * 同步加载js脚本
 * @param id   需要设置的<script>标签的id
 * @param url   js文件的相对路径或绝对路径
 * @return {Boolean}   返回是否加载成功，true代表成功，false代表失败
 */
function loadJS(id,url){
    var  xmlHttp = null;
    if(window.ActiveXObject)//IE
    {
        try {
            //IE6以及以后版本中可以使用
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            //IE5.5以及以后版本可以使用
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    else if(window.XMLHttpRequest)//Firefox，Opera 8.0+，Safari，Chrome
    {
        xmlHttp = new XMLHttpRequest();
    }
    //采用同步加载
    xmlHttp.open("GET",url,false);
    //发送同步请求，如果浏览器为Chrome或Opera，必须发布后才能运行，不然会报错
    xmlHttp.send(null);
    //4代表数据发送完毕
    if ( xmlHttp.readyState == 4 )
    {
        //0为访问的本地，200到300代表访问服务器成功，304代表没做修改访问的是缓存
        if((xmlHttp.status >= 200 && xmlHttp.status <300) || xmlHttp.status == 0 || xmlHttp.status == 304)
        {
            var myHead = document.getElementsByTagName("HEAD").item(0);
            var myScript = document.createElement( "script" );
            myScript.language = "javascript";
            myScript.type = "text/javascript";
            myScript.id = id;
            try{
                //IE8以及以下不支持这种方式，需要通过text属性来设置
                myScript.appendChild(document.createTextNode(xmlHttp.responseText));
            }
            catch (ex){
                myScript.text = xmlHttp.responseText;
            }
            myHead.appendChild( myScript );
            return true;
        }
        else
        {
            return false;
        }
    }
    else
    {
        return false;
    }
}

此处考虑到了浏览器的兼容性以及当为Chrome、Opera时必须是发布，注释还是写的比较清楚的，以后需要加载某个js文件时，只需要一句话就行了，如loadJS("myJS","package.js")。方便实用。

如果想要实现不发布还非要兼容所有浏览器，至少我还没找出这样的同步加载的办法，我们只能通过异步加载开出回调函数来实现。

方法七：回调函数方式

在同一个文件夹下面创建一个function7.html，代码如下：

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function init()
        {
            //加载package.js文件，设置script的id为yy
            loadJs("yy","package.js",callbackFunction);

        }
        function callbackFunction()
        {
            functionOne();
        }
        function loadJs(sid,jsurl,callback){
            var nodeHead = document.getElementsByTagName('head')[0];
            var nodeScript = null;
            if(document.getElementById(sid) == null){
                nodeScript = document.createElement('script');
                nodeScript.setAttribute('type', 'text/javascript');
                nodeScript.setAttribute('src', jsurl);
                nodeScript.setAttribute('id',sid);
                if (callback != null) {
                    nodeScript.onload = nodeScript.onreadystatechange = function(){
                        if (nodeScript.ready) {
                            return false;
                        }
                        if (!nodeScript.readyState || nodeScript.readyState == "loaded" || nodeScript.readyState == 'complete') {
                            nodeScript.ready = true;
                            callback();
                        }
                    };
                }
                nodeHead.appendChild(nodeScript);
            } else {
                if(callback != null){
                    callback();
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

这种方式所有浏览器都支持，但是后面的代码必须放在回调函数里面，也就是异步加载了。看需求使用把！我还是比较喜欢第六种方法的。如果是异步加载的话，方法还有好几种，不过我的出发点是希望实现同步加载，这里就不对异步加载做总结了。

 

4
顶
1
踩
分享到：
| js定时器 timer
评论
2 楼 xiaod0510 2013-06-02  
1....
var myHead = document.getElementsByTagName("HEAD").item(0);
var myScript = document.createElement( "script" );
myScript.language = "javascript";
myScript.type = "text/javascript";
myScript.id = sId;
try{
    myScript.appendChild(document.createTextNode(source));
}
catch (ex){
    myScript.text = source;
}
myHead.appendChild( myScript );
这段代码多余
直接 eval.call(window,source)即可.
2.......
function init()
{
    //加载package.js文件，设置script的id为yy
    loadJs("yy","package.js",callbackFunction);

}
function callbackFunction()
{
    functionOne();
}
可以这样

    loadJs("yy","package.js",functionOne);
或
    loadJs("yy","package.js",function(){
        functionOne();
    });
1 楼 wenjinglian 2013-06-01  
是不是可以参考下开源框架
http://www.oschina.net/p/controljs
发表评论

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

相关推荐

    vue如何实现动态加载脚本

    这篇文章主要介绍了vue如何...下面上的代码块叫 dynamicLoadScript 顾名思义，动态加载脚本，这个js只对加载tinymce有效，不过要想加载其它脚本，稍微做一下改动即可 我们可以建立一个dynamicLoadScript.js文件 上代码

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

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

    javascript 动态脚本添加的简单方法

    通过为按钮绑定点击事件，并在事件处理函数中执行动态添加脚本的函数，可以使得在用户交互过程中按需加载JavaScript文件或模块，从而提升应用的用户体验和页面性能。 总结起来，JavaScript动态脚本添加的知识点主要...

    unity动态添加和删除脚本

    给定的部分内容中的代码展示了如何使用JavaScript（实际上是在Unity中使用的旧式JavaScript语法）动态添加脚本组件。这段代码首先定义了一个`GameObject`类型的变量`obj`和一个`GUISkin`类型的变量`myskin`，然后在`...

    js动态引入外部js脚本并获取里面的变量值.pdf

    "js动态引入外部js脚本并获取里面的变量值"这个主题就是关于如何在JavaScript中实现这种功能的讨论。 首先，`jQuery`库提供了一个非常方便的方法来实现动态加载外部脚本：`$.getScript()`。这是一个异步方法，它...

    动态加载外部JS文件

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

    C# 动态解析 javascript 脚本引擎源码

    而JavaScript则是Web开发中的主要脚本语言，它在浏览器环境中运行，为网页添加交互性。本主题涉及的是如何在C#中动态解析和执行JavaScript代码，这通常通过使用脚本引擎来实现。 一个常见的C#脚本引擎是Microsoft的...

    JavaScript 动态加载脚本和样式的方法

    JavaScript动态加载脚本和样式的方法主要涉及到如何在网页加载过程中，在不刷新页面的情况下，根据需要引入和执行JavaScript脚本以及CSS样式。这种方法对于提高网页性能和用户体验都具有重要意义。下面，我们将详细...

    vue动态加载js.zip

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

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

    标题中的知识点是关于JavaScript动态加载脚本的方法。描述中强调了动态加载JavaScript文件的好处，主要是为了提高页面加载效率，避免加载不必要的脚本资源。此外，还指出了单个大文件适合动态加载的情况，以及小文件...

    JS动态加载库

    JavaScript动态加载库是一种技术，它允许开发者在网页运行时按需加载JavaScript文件，而不是一次性在页面加载时加载所有脚本。这种技术对于优化网页性能、减小初始加载时间以及实现模块化开发非常重要。下面将详细...

    Java调用Groovy，实时动态加载数据库groovy脚本

    2. 创建GroovyClassLoader：使用这个类加载器可以动态加载和执行Groovy脚本。它继承自Java的ClassLoader，能解析Groovy源码并生成字节码。 3. 加载并执行Groovy脚本：通过GroovyClassLoader的`parseClass()`方法...

    JS动态加载脚本并执行回调操作

    在JavaScript中，动态加载脚本是一种常见的需求，特别是在处理异步加载或按需加载资源时。这种方法可以提高页面加载速度，因为不是一次性加载所有脚本，而是只在需要时加载。本文将详细介绍如何在JavaScript中实现...

    javascript函数动态加载javascript文件

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

    JavaScript 动态添加脚本，并触发回调函数的实现代码

    在JavaScript中，动态添加脚本是一种常见的编程技巧，它允许我们在网页加载后或者根据需要时按需加载外部JavaScript文件。这种技术通常用于延迟加载、模块化开发或优化页面性能。回调函数是JavaScript中的核心概念，...

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

    在前端开发中，有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时，可能会遇到需要按需加载某些功能的情况，例如第三方库、API接口等。本文将详细介绍如何通过创建一个Vue组件来...

    第23章 动态加载脚本和样式1

    因此，动态加载脚本的概念应运而生，它允许我们在需要时才加载特定的JavaScript文件。例如，如果我们有一个`browserdetect.js`文件用于检测浏览器版本，我们可以在必要的时候通过以下方式加载： ```javascript var ...

    网页js脚本注入，可执行任意代码。

    网页JS脚本注入，突破网页本地脚本验证方法实例 JS脚本注入是一种常见的网页攻击手法，通过注入恶意脚本来控制网页的行为。在这个实例中，我们将展示如何使用JS脚本注入来突破网页本地脚本验证方法，跳过验证码，并...

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