动态加载Javascript以及如何检查脚本是否存在

我使用以下技术动态加载Javascript：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
document.body.appendChild(script);

这是一种很常见的方法。 这里也讨论了这一点：

我知道在文件加载和执行后如何得到通知

我不知道的是，如果指向Javascript源文件的链接断开，如何通知我

---

谢谢

一种方法是在包含的脚本中定义一个变量，然后检查该变量是否已定义。

非常简单，Internet Explorer将触发一个

onreadystatechange

事件，而其他浏览器将触发脚本对象的

onload

事件

var newScript;
var loadFunc = function ()
{
    alert("External Javascript File has been loaded");
};
newScript = document.createElement('script');
newScript.setAttribute('type','text/javascript');
newScript.setAttribute('src','file.js');

//IE triggers this event when the file is loaded
if (elm.attachEvent)
{
    newScript.attachEvent('onreadystatechange',function() 
    {
        if (newScript.readyState == 'complete' || newScript.readyState == 'loaded')
            loadFunc();
    });
}

//Other browsers trigger this one
if (newScript.addEventListener)
    newScript.addEventListener('load', loadFunc, false);

document.getElementsByTagName('head')[0].appendChild(newScript);

---

侦听脚本元素上的事件被认为是不可靠的（）。想到的一个选项是使用

setTimeout（）

轮询您希望在外部脚本中定义的变量。在<代码> x>代码>秒之后，您可以超时投票，并将脚本视为已损坏。

外部脚本：file.js:

var MyLibrary = { };

主要文件：

var poll;
var timeout = 100; // 10 seconds timeout
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'file.js';
document.body.appendChild(script);

poll = function () {
  setTimeout(function () {
    timeout--;
    if (typeof MyLibrary !== 'undefined') {
      // External file loaded
    }
    else if (timeout > 0) {
      poll();
    }
    else {
      // External library failed to load
    }
  }, 100);
};

poll();

---

您使用什么JavaScript库

在jQuery中，如果通过Ajax加载脚本，则可以选择运行成功回调函数（以及其他类型的回调）

---

还有一个用于加载脚本的专用函数：$.getScript（）

在onload事件中，有状态代码。200很好，您可能记得404意味着找不到文件。有用吗

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";

您需要为此脚本添加回调

1st:创建回拨：

function callbackFn(callbackArgs) = {
       console.log("script is loaded with the arguments below");
       console.log(callbackArgs);
    }

2nd:将事件侦听器添加到脚本中。Firefox和Chrome都支持onload事件，因此您可以这样使用它：

script.onload = callbackFn();

script.onreadystatechange = function() {
    if ( this.readyState != "loaded" ) return;
    callbackFn();
    }

对于IE。。。您可以为状态更改添加事件侦听器，如下所示：

script.onload = callbackFn();

script.onreadystatechange = function() {
    if ( this.readyState != "loaded" ) return;
    callbackFn();
    }

Last:像以前一样将脚本附加到正文中

document.body.appendChild(script);

---

有关更多信息，请参阅。

动态加载脚本要简单得多：

var script = document.createElement('script');
script.onload = function () {
  main_function();  // Main function to call or anything else or nothing  
};
script.src = "yourscript.js";
document.head.appendChild(script);    

---

您可以附加一个

onload

属性，并在该属性中调用一个函数，该函数将在加载JS文件后执行

检查代码：

var jsElement = document.createElement("script");
jsElement.type = "application/javascript";
jsElement.src = "http://code.jquery.com/jquery-latest.min.js";
jsElement.setAttribute("onload","getMeAll()");
document.body.appendChild(jsElement);
function getMeAll(){
    //your code goes here
}

---

希望这能有所帮助。

最近在我的vue.js项目中，我尝试了类似的方法，我正在使用es6，所以请确保您已经安装好。这只是一个普通的javascript，所以运行起来应该没有任何问题

function handleLoad() {
  // on scirpt loaded logic goes here
  ...
};

function handleLoadError(yourScript) {
  // on scirpt loading error logic goes here
  ...

  // remove the script element from DOM if it has some error
  document.head.removeChild(yourScript);
};

function generatePan(token) {
  // if script does not exist only then append script to DOM
  if (!document.getElementById('your-script')) {
    const yourScript = document.createElement('script');
    yourScript.setAttribute('src', 'https://your-script.js');
    yourScript.setAttribute('id', 'your-script');
    yourScript.async = true;
    yourScript.addEventListener('load', () => handleLoad(), false);
    yourScript.addEventListener('error', () => handleLoadError(yourScript), false);

    document.head.appendChild(yourScript);
  } else {
    // runs if script is already loaded DOM
    handleLoad();
  }
};

---

此外，请检查此，即使这可能会有所帮助。

问题是。。。什么时候检查变量？

异步加载，将事件附加到

元素是不可靠的：这并不容易。如果加载了脚本，它们将触发该更新。我在问如何检测脚本是否不存在。我希望有更好的脚本。如果我处理的是一台速度较慢的服务器，我可以考虑在返回答案之前暂停一毫秒。@Lx1：是的，您可以将setTimeout的超时时间减少到10或20毫秒。如果我没记错的话，10是大多数浏览器的最小超时。为什么要使用

！='未定义的“

而不是（我认为是标准的）

！=”未定义“

？！=正在比较值，！==正在比较参考资料。如果使用===来比较值，它也将按预期工作。如果使用==比较包含相同值的引用，则按值进行比较，反之亦然。源poo pooing事件侦听脚本加载事件已过时（2007）。。包含这个宝石“这在我测试过的所有现代浏览器（即5.0和7.0；Firefox 2.0；Safari 1.3；Opera 7.54和9.10；Konqueror 3.5；iCab 3.0）上都能很好地工作。”那么OneError标签呢？