建立dynamic.js文件，表示动态加载的js文件，里面的内容为：

function dynamicJS() {

alert("加载完毕");

}

如下方法中的html页面和dynamic.js文件在一个目录下。

一. document.write()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic load JS</title>
    <script>
        function init() {
            document.write('<script src="dynamic.js"><\/script>');
            document.write('<input type="button" onclick="load();" value="加载完毕" \/>');
        }
        dynamicJS(); //此处报错，由于dynamic.js文件还未加载完毕

function load() {
            dynamicJS();
        }
    </script>
</head>
<body>
    <input type="button" onclick="init();" value="初始化加载" />
    <!--<input type="button" onclick="load();" value="加载完毕">--> 
</body>
</html>

问题,1，document.write会重写页面，在点击初始化加载按钮后，页面重绘导致原有的内容丢失，上述代码中注释掉的”加载完毕“按钮会丢失，因此需要在init函数中使用document.write的方式建立一个按钮。

问题2，异步加载，直接调用dynamicJS方法会报错，因为js文件未加载完毕，而在其后的代码已经开始运行。

综上，此种方法不推荐。

二. 动态改变已有script的src属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dynamic load JS</title>
    <script id="abc" src=""></script>
    <script>
    function init() {
        abc.src = "dynamic.js";
        dynamicJS(); //此处调用报错，由于还未加载完毕
    }

function load() {
        dynamicJS();
    }
    </script>
</head>

<body>
    <input type="button" onclick="init();" value="初始化加载" />
    <input type="button" onclick="load();" value="加载完毕">
</body>

</html>

这个代码运行起来有问题，点击”加载完毕“按钮还是报"Uncaught ReferenceError: dynamicJS is not defined"

问题：异步加载问题

三. 动态创建script元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dynamic load JS</title>
    <script>
    function init() {
        var myScript = document.createElement('script');
        myScript.src = 'dynamic.js';
        document.body.appendChild(myScript);
        
        dynamicJS(); //此处调用报错，由于还未加载完毕
    }

function load() {
        dynamicJS();
    }
    </script>
</head>

<body>
    <input type="button" onclick="init();" value="初始化加载" />
    <input type="button" onclick="load();" value="加载完毕">
</body>

</html>

问题：相对于第二种方式，不需要在页面上一开始就添加script元素，但同样存在异步加载问题。

前三种方法共同点：异步执行，加载这些脚本的同时，主页面的脚本继续运行。若此时调用未加载完成的JS中的代码，会报错。

四. XMLHttpRequest/ActiveXObject 同步加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dynamic load JS</title>
    <script>
    function init() {
        ajaxPage('abc', 'dynamic.js');
        dynamicJS();
    }

function ajaxPage(sId, url) {
        var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject();
        xhr.open('GET', url, false);   //同步加载
        xhr.send(null);
        // xhr.onreadystatechange = function() {
            if(xhr.readyState == 4) {
                //0代表访问本地资源，200代表访问服务器成功，304代表没做修改，访问缓存
                if(xhr.status == 200 || xhr.status == 0 || xhr.status == 304 ) {
                    includeJS(sId, xhr.responseText);
                }
            }
        // }
    }

function includeJS(sId, source) {
        if(source != null && (!document.getElementById(sId))) {
            var myHead = document.getElementsByTagName('head')[0];
            var myScript = document.createElement('script');
            myScript.id = sId;
            try {
                myScript.appendChild(document.createTextNode(source));
            } catch(ex) {
                myScript.text = source;
            }

myHead.appendChild(myScript);
        }
    }
    
    </script>
</head>

<body>
    <input type="button" onclick="init();" value="测试按钮" />
</body>

</html>

参考链接：http://www.cnblogs.com/zhuimengdeyuanyuan/archive/2013/03/06/2946277.html

动态加载JS脚本的更多相关文章

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

    实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...

  2. 使用jQuery动态加载js脚本

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...

  3. 使用jQuery动态加载js脚本文件的方法

    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...

  4. 动态加载JS脚本到HTML

    如果用原生态的js 有2中方法  1.直接document.write  <script language="javascript">      document.wr ...

  5. 网站动态加载JS脚本

    Demo_1 function loadJS(url, fn) { var ss = document.getElementsByName('script'), loaded = false; for ...

  6. 动态加载js和css

    开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...

  7. 动态加载 js

    要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write(& ...

  8. 动态加载js,css(项目中需要的)

    最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...

  9. JS动态加载JS

    1.直接document.write <script language="javascript">     document.write("<scrip ...

随机推荐

  1. MS SQL-Server快捷键

    快捷键                    功能 Ctrl+Shift+B          生成解决方案 Ctrl+F7                  生成编译 Ctrl+O          ...

  2. less文件编译成微信小程序wxss文件

    2016年9月21日,微信小程序正式开启内测.在微信生态下,触手可及.用完即走的微信小程序引起广泛关注,刷爆朋友圈子.在这样的火爆氛围中,作为一个前端开发者的我,也悄悄地去尝鲜.在做demo小示例的过 ...

  3. Control.DataBinding数据绑定简单用法：

    DataBindings的用法: 第一个值:要绑定到TextBox的什么地方 第二个值:数据源是什么 第三个值:应该取数据源的什么属性 第四个值:是否开启数据格式化 第五个值:在什么时候启用数据源绑定 ...

  4. centos 安装mongodb

    原文引用:http://blog.chinaunix.net/uid-24250828-id-3770298.html 官方网站: http://www.mongodb.org/ MongoDB 安裝 ...

  5. MySQL DML 整理

    DML(Data Manipulation Language)数据操纵语言statements are used for managing data within schema objects. 由D ...

  6. JS学习之事件流

    本文是原创文章,如需转载,请注明文章出处 JS和AS师出同源,所以事件流的3个阶段也跟AS一样,分别是捕获阶段,目标阶段,冒泡阶段. 下面写了个例子可以清晰的看出事件流的顺序: eventTest.h ...

  7. JavaEE 启示录

    1. 对象在实例化之前(也就是没有new出来),就调用它的方法,那么可能会遇到null错误. 2. Eclipse默认会把Web项目发布到workspace\.metadata\.plugins\or ...

  8. 无法启动xwindow

    1 新建一个lqx用户,执行startx命令出现: Fatal server error: PAM authentication failed, cannot start X server. perh ...

  9. 初探Backbone

    Backbone简介 中文API:http://www.csser.com/tools/backbone/backbone.js.html 英文API:http://backbonejs.org/ B ...

  10. Linux教程:Bash技巧,让chmod只修改某个目录下文件夹或者文件的权限

    用Linux的人都知道chmod -R 可以修改一个文件夹下的所有文件和文件夹的权限,但是这也存在着一个很大的弊端,那就是修改的是所有的文件和文件夹的权限,如果我只想修改文件或文件夹的权限该怎么办呢? ...