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

Question

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

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

这是一种很常见的方法。 这里也有讨论： http://www.nczonline.net/blog/2009/06/23/loading-javascript-without-blocking/

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

我不知道的是，如果 Javascript 源文件的链接被破坏，我将如何收到通知。

谢谢

Answer 1

侦听脚本元素上的事件被认为是不可靠的（ Source ）。 想到的一种选择是使用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();

Answer 2

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

您需要为此脚本添加回调。

第一：创建回调：

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

第二：向脚本添加事件侦听器。 Firefox 和 Chrome 都支持 onload 事件，因此您可以像这样使用它：

script.onload = callbackFn();

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

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

最后：像以前一样将脚本附加到正文中。

document.body.appendChild(script);

有关更多信息，请参阅此操作。

Answer 3

这很简单，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);

Answer 4

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

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);    

Answer 5

您可以附加一个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
}

希望这会有所帮助。

Answer 6

在 onload 事件中，有状态码。 200 是好的，您可能还记得 404 表示找不到文件。 有用吗？

Answer 7

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

Answer 8

最近在我的 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();
  }
};

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

Answer 9

抱歉发布了 necroposting，但这是我针对这种确切情况的第一次点击，我相信我找到了一个更好的答案：（至少）现在你可以从任何 HTML 元素执行onload事件回调以在加载到 DOM 后执行代码，你可以这样使用它：

const script = document.createElement("script");
script.type = "text/javascript";
script.src = "file.js";
script.onload(() => {
    // ...whatever you want to excecute after loadinng the script
})
document.body.appendChild(script);

Answer 10

你使用什么 JavaScript 库？

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

还有一个专门的脚本加载函数：$.getScript()