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

Question

我是以编程方式向<embed>我的HTML文档添加标记:

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在加载之前立即被修改,然后进行绘制.