使用 `document.currentScript.ownerDocument.createElement` （从 <link> 导入的 HTML 中）创建的图像永远不会加载

Question

这是一个返回图像宽度的函数，给定图像的 url：

async function getImageWidthByUrl(imgUrl) {
  const imgEl = document.createElement("img");
  let untilImgLoaded = new Promise((resolve, reject) => {
    imgEl.onload = resolve;
    imgEl.onerror = reject;
  });
  imgEl.src = imgUrl;
  await untilImgLoaded;
  return imgEl.naturalWidth;
}

它工作正常。如果我们使用new Image() 而不是document.createElement("img")，它也（当然）有效。

但是，如果document 引用<link> html 导入的文档对象，document.createElement("img") 方法不起作用。

看看this example，它导入了this html。注意控制台输出：

"Starting..."
512
512

并且永远不会输出最终的512，然后是"Finished."，就像（似乎）应该的那样。那是因为imgEl 的onload 事件永远不会触发；如果图像是用document.currentScript.ownerDocument.createElement 创建的，它永远不会加载。我已经在 Chrome 69 中对此进行了测试。

这是预期的行为，还是错误？如果无法使用<link> 的document 创建图像，它至少不应该抛出错误吗？

Answer 1

这是正常行为。

在带有<link rel="import"> 的导入文档中src 属性<img> 元素中引用的图像在附加到主文档之前不会加载。

来自HTML Imports tutorial：

在您调用其服务之前，请将内容视为惰性。 [...]

除非您将其内容附加到 DOM，否则它是无操作的。实际上，唯一直接在导入文档中“执行”的就是<script>。

您可以使用document.apendNode() 将其附加到主文档。

另外，请注意，在您的示例中，您应该将导入的文档引用作为 simple-test.html 的主函数的参数传递，原因解释为 in this post 或 that post。

( function( ownerDocument ) {
    //...
    if( method === "document.currentScript.ownerDocument.createElement") {
        imgEl = ownerDocument.createElement("img")
        var imgOK = document.adoptNode( imgEl )
    }
    //...  
} ) ( document.currentScript.ownerDocument )