建立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. 解决android:background背景图片被拉伸问题

    ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前 ...

  2. SignalR

    https://msdn.microsoft.com/zh-cn/magazine/dn802609.aspx http://www.asp.net/signalr/overview/getting- ...

  3. jquery tmpl 详解

    官方解释对该插件的说明:将匹配的第一个元素作为模板,render指定的数据,签名如下: .tmpl([data,][options]) 其中参数data的用途很明显:用于render的数据,可以是任意 ...

  4. angularjs指令系统系列课程（5）：控制器controller

    这一节我们来说一下controller这个参数 一.指令控制器的配置方法: 对于指令我有两种配置路由的方式:1.在html中直接引用,2,在指令的controller参数里定义 第一种:在html中直 ...

  5. hdu4273Rescue(三维凸包重心)

    链接 模板题已不叫题.. 三维凸包+凸包重心+点到平面距离(体积/点积)  体积-->混合积(先点乘再叉乘) #include <iostream> #include<cstd ...

  6. java时间段分成小段存储

    package testThread; import java.text.ParseException; import java.text.SimpleDateFormat; import java. ...

  7. QQ号验证

    №☆★〇█962319751,1611385654,209414856,2729767026,1213235712,1187970122,1393756744,2463317013,346171055 ...

  8. OpenCV学习笔记（二）——OpenCV环境变量配置

    1．  假定电脑上已经安装了VS2010程序,若没有,首先安装vs2010. 下载OpenCV,下载的文件名为"OpenCV-2.3.1-win-superpack". 2．  解 ...

  9. MySQL 解压包 安装

    1.解压 2.配置mysql bin的环境变量 3.配置my-defalue.ini 配置文件 或自己建立一个my.ini文件 [mysqld] basedir=F:\mysql\mysql-5.6. ...

  10. express+gulp构建项目（三）gulp任务

    这次来看一看gulp是怎么工作的. tasks/paths.js paths.js文件里存放的是gulp任务中需要导入的文件的路径和导出的路径. /** * gulp.src 地址 * gulp.de ...