月度归档： 2016 年 1 月

在使用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);
        }
    }
});