如何知道<embed>元素的内容何时加载完成

Question

我正在程序化地向我的HTML文档中添加一个<embed>标签：

var e = document.createElement('embed');
e.src = "some-image.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);

这个解决方案运行良好，SVG 元素按预期显示。但是，我想用 JavaScript 操作 SVG 元素，而在将元素添加到 DOM 后立即尝试操作会失败，因为内容尚未加载。

我该怎么做？请注意，我希望在此过程中不使用 jQuery，所以请不要指向 jQuery API。

- Drew Noakes

---

e.addEventListener("load", function() { ... })怎么样？ - CodingIntrigue

你给嵌入元素分配了任何ID吗？ - HIRA THAKUR

可能是重复的问题：如何检查嵌入式SVG文档是否已在HTML页面中加载？ - apsillers

Answer 1

正如@RGraham在评论中指出的那样，<embed>元素在其内容准备就绪时会引发load事件。

因此我的代码变为：

var e = document.createElement('embed');
e.src = "img/z-slider.svg";
e.type = "image/svg+xml";
document.body.appendChild(e);

e.addEventListener('load', function()
{
    // Operate upon the SVG DOM here
    e.getSVGDocument().querySelector('#some-node').textContent = "New text!";
});

这种做法比轮询更好，因为它没有闪烁。SVG被立即修改，然后再进行绘制。

- Drew Noakes

---

事件在Safari中不触发。 - Vladimir

Answer 2

为创建的元素分配一个id。

  function check_if_loaded() {
    var your_svg = document.getElementById("id").getSVGDocument();
    if (your_svg) {
        alert("loaded");

    } else {
        console.log("not yet loaded")
    }
}

your_element.addEventListener('load',check_if_loaded, false)

- HIRA THAKUR

---

谢谢你的回答。你认为为什么需要轮询？在我对Chrome/Firefox/IE的实验中，当“load”事件触发时，SVG文档是可用的。 - Drew Noakes

此外，我不需要为元素添加 id，因为我已经有了对它的引用（在我的示例中是 e）。 - Drew Noakes

只是一个快速的解决方案...你的更好。我将仅删除轮询部分。 - HIRA THAKUR

此外，clear_me_later 是事件回调函数的私有函数，因此调用 clearInterval 将不起作用。 - Drew Noakes