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

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")方法不起作用。

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

"Starting..."
512
512

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

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

Answer 1

这是正常行为。

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

从 HTML 导入教程：

将内容视为惰性，直到您调用其服务。[...]

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

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

另外，请注意，在您的示例中，您应该将导入的文档引用作为简单测试主要功能的参数传递.html出于本文或那篇帖子中解释的一些原因。

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