在使用JavaScript开发时,有时除了需要在head标签内直接引入script标签外,还会需要根据代码逻辑的执行状态去动态引入script脚本,并且我们也可能希望在脚本文件加载完成后触发我们需要运行的function。
我们可以通过以下两种方法实现:
一、使用标准DOM方法:
// 定义脚本加载完成回调方法
var callback = function () {
alert("脚本加载完成");
};
// 定义要加载的脚本地址
var url = "script.js";
// 定义判断脚本是否加载完成的标识
var done = false;
// 创建script标签
var script = document.createElement("script");
// 设置script标签属性
script.type = "text/javascript";
script.language = "javascript";
script.src = url;
// 绑定脚本加载完成事件
script.onload = script.onreadystatechange = function () {
// 判断脚本是否加载完成并且事件未触发过
if (!done && (!script.readyState || script.readyState == "loaded" || script.readyState == "complete")) {
// 标识脚本事件已触发过一次
done = true;
// 移除脚本加载完成事件
script.onload = script.onreadystatechange = null;
// 触发自定义的脚本加载完成回调方法
if (typeof (callback) == "function") {
callback.apply(script);
}
}
};
// 将script标签添加到head标签内
document.getElementsByTagName("head")[0].appendChild(script);
二、使用jQuery框架方法:
// 定义脚本加载完成回调方法
var callback = function () {
alert("脚本加载完成");
};
// 定义要加载的脚本地址
var url = "script.js";
// 使用jQuery的ajax方法加载script脚本
jQuery.ajax({
url: url,
type: "GET",
dataType: "script",
success: function () {
// 触发自定义的脚本加载完成回调方法
if (typeof (callback) == "function") {
callback.apply(this, arguments);
}
}
});