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。

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会立即修改。

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)

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

2 个答案: