开发中根据需求来动态加载 JS 文件,或者在某些情况下需要重新加载某个 JS 文件。
重新加载 JS 文件
应用中的某些 JS 文件如果在某些条件下需要重新加载时,最简单的思路就是先删除原来的 JS 文件,再重新添加。为了方便,使用 JQuery 操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- 自己操作的 JS 文件-->
<script type="text/javascript" src="reloadJS.js"></script>
<title>重新加载 JS 文件</title>
</head>
<body>
<button>重新加载 JS 文件</button>
<hr/>
</body>
</html>
reloadjs.js 文件内容如下:
/**
* Created by Administrator on 2018/11/7 0007.
*/
console.log("reloadJS 开始加载 js 文件..." + new Date());
$(function () {
$("button").click(function () {
/**先删除原JS文件,再重新添加*/
var reloadJS = $("script[src='reloadJS.js']").remove();
reloadJS.appendTo("head");
});
});
console.log("reloadJS 加载完毕 js 文件..." + new Date());
点击按钮效果如下,会重新加载 reload.js 文件:
动态加载 JS 文件
某些 JS 文件一开始并没有加载到文档中来,在某些条件下,动态加载此 JS 文件,然后执行。
jQuery.getScript(url, [callback])
JQuery 提供了一个 jQuery.getScript(url, [callback]) 方法可以非常方便的进行操作。
getScript 通过 HTTP GET 请求载入并执行一个 JavaScript 文件,文件载入成功后,即可操作其内部的内容,而无需反复载入。
url:待载入 JS 文件地址。
callback:成功载入后回调函数。
编码示例
reloadJS.html 中包含了 JQuery 与 reloadJS.js ,在 reloadJS.js 中动态加载 test.js 文件。
reloadJS.html 内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- 操作的 JS 文件-->
<script type="text/javascript" src="reloadJS.js"></script>
<title>动态加载 JS 文件</title>
</head>
<body>
<button id="loadJS">加载第三方 JS 文件</button><br><br>
<button id="loadFun">调用第三方 JS 方法</button>
</body>
</html>
reloadJS.js 内容如下:
/**
* Created by Administrator on 2018/11/7 0007.
*/
$(function () {
/**点击 "加载第三方 JS 文件" 按钮时,动态加载 test.js 文件
* 在 test.js 文件加载成功后的回调方法中再调用 test.js 中的方法*/
$("#loadJS").click(function () {
$.getScript("test.js", function () {
console.log("My name is reloadJS,test.js 加载成功");
showDate("Hello");
});
});
/**
* 点击 "调用第三方 JS 方法" 按钮时,调用 test.js 文件中的方法
* 注意:如果 test.js 已经使用 getScript 加载成功,则这里可以调用其方法
* 如果 test.js 加载失败,或者未加载时,则这里调用显然报错:howDate is not defined
*/
$("#loadFun").click(function () {
showDate("Hi");
});
});
test.js 文件内容如下:
/**
* Created by Administrator on 2018/11/7 0007.
*/
console.log("My name is test.js,开始加载:" + new Date());
function showDate(order) {
console.log("My name is test.js,now time:" + new Date().getTime() + ",order=" + order);
}
console.log("My name is test.js,加载完毕:" + new Date());