建立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. 实验一 认识DOS

    #include<stdio.h> #include<string.h> void main() {       char cmd[20][20]={"dir&quo ...

  2. 实现table的单线边框的办法

    实现table的单线边框的办法 现在给出效果图: 1.实现方法一:    <table border="0" cellspacing="1" style= ...

  3. openssl evp RSA 加密解密

    openssl evp RSA 加密解密 可以直接使用RSA.h 提供的接口 如下测试使用EVP提供的RSA接口 1. EVP提供的RSA 加密解密 主要接口: int EVP_PKEY_encryp ...

  4. 解决NGUI自动被设置LYAER

    解决NGUI自动被设置LYAER uiwidget.cs1011行public void checklayer()这里修改 可以让LAYER不跟随父物体变动 但是这里有个问题 摄像机的CULL 不会被 ...

  5. 前台jquery+ajax+json传值，后台处理完后返回json字符串，如何取里面的属性值？（不用springmvc注解）

    一.取属性值 前台页面: function select(id){ alert("hfdfhdfh"+id); $.ajax({ url:"selectByid.jsp& ...

  6. css3实现颜色渐变以及兼容性处理

    有时我们会看到网站上的一些图片是渐变色的,这些图片有的是ui设计出来的,有的则是直接通过css3制作出来的.下面就讲一下css3实现渐变色的方法,以及在各个浏览器上的兼容性. CSS3 Gradien ...

  7. windows7 64，32位下scrapy爬虫框架的环境搭建

    适用于python 2.7 64位安装 一.操作系统:WIN7 64位 二.python版本:2.7 64位(scrapy目前不支持3.x) 不确定位数的,看图 三.安装相关软件:(可以从我的百度网盘 ...

  8. mysql 重置root密码

    最近又项目用到mysql 由于电脑上mysql是很久以前安装的root密码忘记了, 百度一下重置密码 Windows: 1.以系统管理员登陆: 2.停止MySQL服务: 3.进入CMD,进入MySQL ...

  9. Win服务器常用批处理脚本

    oracle数据库备份 先导出数据库,然后执行压缩,将源文件删除,保留压缩文件 exp crm/crm@orcl file=G:\数据库备份\CRM\CRM%DATE%.dmp owner=crm&q ...

  10. 《精通C#》第十七章

    进程简单的说就是一个正在运行的程序,包含了运行该程序所需要的一切资源以及内存分配.线程是进程的基本执行单元,在进程的入口点(类似main())创建的第一个线程称之为主线程.只有一个主线程的进程是线程安 ...