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

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

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

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

script.onload = callbackFn();

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

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

最后：将脚本添加到正文中。

document.body.appendChild(script);

有关详细信息，请参阅this acticle。

Answer 4

您可以追加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 5

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

Answer 6

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

Answer 7

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

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

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

Answer 9

你使用什么JavaScript库？

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

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

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

9 个答案: