javascript - 使用 `document.currentScript.ownerDocument.createElement`(从 导入的 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.createElement("img")如果document，方法不有效引用 <link> 的文档对象html导入。

看看this example哪个进口 this html .注意控制台输出:

"Starting..."
512
512

并且永远不会输出最终的 512然后 "Finished." ，就像它(表面上)应该的那样。那是因为 onload imgEl 事件从不开火；如果图像是使用 document.currentScript.ownerDocument.createElement 创建的，则该图像永远不会加载.我已经在 Chrome 69 中对此进行了测试。

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

Answer 1

这是正常行为。

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

来自HTML Imports tutorial :

Think of content as inert until you call upon its services. [...]

Unless you append it's content to the DOM, it's a no-op. In fact, the only thing that "executes" in the import document directly is <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 )