动态加载JS脚本
建立dynamic.js文件，表示动态加载的js文件，里面的内容为：
function dynamicJS() {
alert("加载完毕");
}
如下方法中的html页面和dynamic.js文件在一个目录下。
一. document.write()
<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属性
<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元素
<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 同步加载
<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脚本的更多相关文章
- 动态加载JS脚本的4种方法
实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...
- 使用jQuery动态加载js脚本
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...
- 使用jQuery动态加载js脚本文件的方法
动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...
- 动态加载JS脚本到HTML
如果用原生态的js 有2中方法 1.直接document.write <script language="javascript"> document.wr ...
- 网站动态加载JS脚本
Demo_1 function loadJS(url, fn) { var ss = document.getElementsByName('script'), loaded = false; for ...
- 动态加载js和css
开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...
- 动态加载 js
要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javascript"> document.write(& ...
- 动态加载js,css(项目中需要的)
最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...
- JS动态加载JS
1.直接document.write <script language="javascript"> document.write("<scrip ...
随机推荐
- Java开发中经典的小实例-（二分法）
public int binarySearch(int[] data,int aim){//以int数组为例,aim为需要查找的数 int start = 0; int end = data.leng ...
- 【C语言训练】尼科彻斯定理
题目描述验证尼科彻斯定理,即:任何一个正整数的立方都可以写成一串连续奇数的和. 输入任一正整数 输出该数的立方分解为一串连续奇数的和 样例输入13样例输出13*13*13=2197=157+159+1 ...
- java.lang.InstantiationException-反射机制
package com.test.classtest; public class test { public static void main(String[] args) throws Except ...
- Javascript中的栈
栈 是一种遵从 后进先出(LIFO)原则的有序集合.就像一摞盘子. push 添加一个元素到栈顶 pop 移除并返回栈顶的元素 peek 返回栈顶元素 isEmpty 如果栈里没有任何元素,返回tru ...
- web开发字符乱码问题
java动态网页后台乱码问题总结 乱码可能出现的几块地方: 首先是浏览器和html之间采用的编码不一致 解决办法: 修改浏览器的编码格式 修改html页面的编码格式: <meta http-eq ...
- zookeeper 故障重连机制
一.连接多个服务器,用逗号隔开 如果在连接时候zk服务器宕机 To create a client session the application code must provide a connec ...
- HTML基本标签
h1-h6:标题标签.(从大到小) p:段落标签. img:图片标签:属性src:图片的相对路径:alt:图片加载失败的提示语言. a:超链接标签:属性:href:地址链接:target:网页打开的默 ...
- springMVC+mybatis+spring整合案例
1.web.xml a:配置spring监听,使web容器在启动时加载spring的applicationContext.xml <listener> <listener-class ...
- String or binary data would be truncated 解决办法
原因: 一般出现这个问题是因为数据库中的某个字段的长度小,而插入数据大 解决: 找到相应字段,修改表结构,使表字段大小相同或大于要插入的数据
- Java_I/O输入输出_使用输入输出流读取文件，将一段文字加密后存入文件，然后读取，将加密前与后的文件输出
import java.io.*; public class Example { public static void main(String[] args) { char a[] = "今 ...