建立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. CFNetwork的错误代码参考

    所有的错误代码是在对“CFNetwork的错误代码参考” 小提取CFURL和CFURLConnection错误: kCFURLErrorUnknown = -998, kCFURLErrorCance ...

  2. IOS7 edgesForExtendedLayout

    在iOS 7中,苹果引入了一个新的属性,叫做[UIViewController setEdgesForExtendedLayout:],它的默认值为UIRectEdgeAll.当你的容器是naviga ...

  3. [转] charles使用教程指南

    charles使用教程指南   0x01 前言: Charles是一款抓包修改工具,相比起burp,charles具有界面简单直观,易于上手,数据请求控制容易,修改简单,抓取数据的开始暂停方便等等优势 ...

  4. Error:No suitable device found: no device found for connection "System eth0"

    环境描述: Vmware 故障说明: 在克隆几台虚拟机,发现启动后不能配置IP地址等信息,使用linux命令: “ifup eth0”也不能激活网卡, 而在使用"service networ ...

  5. SAP ERP和ORACLE ERP的区别是哪些？

    SAP有非常细致深入的标准流程,在流程方面,只要是你想到的问题,SAP都会曾经遇到过并且给出过解决方案.实施SAP比较倾向于改变企业的业务流程来匹配SAP,实现标准化管理. oracle比较灵活,侧重 ...

  6. json.stringfy()和json.parse()

    json.stringfy()将对象.数组转换成字符串:json.parse()将字符串转成json对象. json.stringfy(): 语法:  JSON.stringify(value [, ...

  7. RecyclerView 滑动检测 （上滑 up）（下滑 down）（顶部 top）（底部 bottom）

      RecyclerView 给我们的可以检测滑动事件的接口 只有 一个方法 recyclerview.setOnScrollListener()或者 recyclerview.addOnScroll ...

  8. TAP/TUN摘要

    TUN适用于IP帧.Tap适用于以太网帧.TAP摸拟一个以太网设备(以arp广播MAC识别),它操作第二层数据包如以太网数据帧.TUN模拟了网络层ip设备(以点对点的方式,使用ip标识),操作第三层数 ...

  9. 利用反射调用方法时，处理ref，out参数需要注意的问题（转）

    转自:http://www.68idc.cn/help/buildlang/ask/20150318283817.html 项目中如下的泛型方法,因为要在运行时,动态指定类型参数,所以要利用反射来实现 ...

  10. d3 scale 学习笔记

    讲解scale 的好材料 https://www.dashingd3js.com/d3js-scales