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