object.onload 因 IE 和 Edge 而失败

Question

我正在尝试动态预加载文件列表，这些文件可能是图像和 JavaScript 文件之间的任何内容。 Chrome 和 Firefox 的一切都非常顺利，但是当我尝试使用 Edge 预加载 JavaScript 文件时失败了。例如，Edge 仍然可以处理图像，但不能处理 js 文件。是的，我已经尝试使用 addEventListener，它也不起作用。

Edge 没有给我任何错误。

    var object = {};
    object = document.createElement('object');
    object.width = object.height = 0;
    object.data = path/to/javascriptfile.js
    body.appendChild(object);

    object.onload = function(){
         console.log('hello world')
         //not firing with edge
    }

我遗漏了什么相关的东西？

更新：一天后没有取得任何成功。可能会暂时离开它，只是跳过使用边缘预加载脚本文件，直到我找到解决方案。

Answer 1

工作的临时解决方案是将 onload 事件直接放入脚本元素而不是对象。很遗憾，因为它在 Chrome 和 FF 中就像一个魅力。

事实证明，带有 css 源的 object.data 也没有加载。我不知道这是否是一个错误，因为它仍然可以将图像从 object.data 加载。

但表演必须继续。

干杯，艾尔尤科

Answer 2

也许值得一试 - 来自 msdn：

客户端加载应用程序、嵌入对象和图像 它在解析过程中遇到applet、embed 和img 对象。 因此，这些对象的 onload 事件发生在 客户端解析任何后续对象。确保事件处理程序 接收这些对象的onload事件，放置脚本对象 在对象之前定义事件处理程序并使用 onload 对象中的属性来设置处理程序。

https://msdn.microsoft.com/en-us/library/windows/apps/hh465984.aspx

编辑，澄清：

您应该在将元素添加到页面之前附加事件侦听器。

即使这样做，我也不确定它是否会起作用。但要确保您已用尽所有选项，请尝试以下示例：

function doLoad() {
   console.log('The load event is executing');
}

var object = {};
object = document.createElement('object');
object.width = object.height = 0;
object.data = 'path/to/javascriptfile.js';

object.onreadystatechange = function () {
   if (object.readyState === 'loaded' || object.readyState === 'complete') doLoad();
   console.log('onreadystatechange');
}

if (object.addEventListener) { 
   object.addEventListener( "load", doLoad, false );
   console.log('addEventListener');
}
else 
{
   if (object.attachEvent) { 
      object.attachEvent( "onload", doLoad );
      console.log('attachEvent');
   } else if (object.onLoad) {
      object.onload = doLoad;
      console.log('onload');
   }
}

var body = document.getElementsByTagName("body")[0];    
body.appendChild(object);

如果这不起作用，您也许可以在 IE 中使用“图像”而不是“对象”进行预加载：https://stackoverflow.com/a/11103087/1996783