1

给定图像的 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")。

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

看看这个导入这个 html的例子。请注意，控制台输出：

"Starting..."
512
512

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

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

4

1 回答 1

2

这是正常的行为。

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

从HTML 导入教程：

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

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

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

另外，请注意，在您的示例中，您应该将导入的文档引用作为simple-test.html的 main 函数的参数传递，原因在这篇文章或那篇文章中解释了一些原因。

( function( ownerDocument ) {
    //...
    if( method === "document.currentScript.ownerDocument.createElement") {
        imgEl = ownerDocument.createElement("img")
        var imgOK = document.adoptNode( imgEl )
    }
    //...  
} ) ( document.currentScript.ownerDocument )
于 2018-09-15T15:22:26.517 回答