更改后重新加载DOM

Question

我在embed标签中的SVG有一个小问题。 我使用javascript用SVG文件路径更新了嵌入标签的来源。 然后，我必须更新viewbox属性以正确调整SVG的大小。

问题是SVG标记不可用，因为javascript执行速度太快。

一个例子 ：

//Creation and insertion by JQuery
var EmbedTag = $("<embed id='zoomSVG' src=idSVG + ".svg' type='image/svg+xml' width='500px' height='500px' />").appendTo(zoomGalleryHisto);

//This doesn't work : svgDoc is null
//SVG document recovery
var svgDoc = document.getElementById('zoomSVG').getSVGDocument();

This work :
setTimeout(function(){
   //SVG document recovery
   var svgDoc = document.getElementById('zoomSVG').getSVGDocument();
},100);

我不想使用setTimeout函数，因为超时值取决于硬件。 有时100毫秒工作正常，但我必须找到一个通用的解决方案。

嵌入标签插入后，我可以通过javascript重新加载DOM吗？ 嵌入对象的加载完成后，是否存在embed标签的现有事件？

谢谢你的帮助

Answer 1

使用标签的»onload«事件将您的功能延迟到加载之前，而不是应使用的功能。

Answer 2

从嵌入的onload调用代码，例如

var EmbedTag = $("<embed id='zoomSVG' onload='init()' src=idSVG + ".svg' type='image/svg+xml' width='500px' height='500px' />").appendTo(zoomGalleryHisto);

然后在init中实现您的代码（或任何您想调用的代码）

Answer 3

首先，创建元素，然后尝试在DOM中再次找到它。

其次，JavaScript无法阻止，直到发生某些事情为止，请使用回调代理。

像这样：

var svgDoc = false;
// Create an element
var EmbedTag = $("<embed id='zoomSVG' type='image/svg+xml' width='500px' height='500px' />");
// Append it to the dom
EmbedTag.appendTo(zoomGalleryHisto);

// Load the svg file
$.get('file.svg', function() {
    // And then add it to the created element
    EmbedTag.attr('src', 'file.svg');
    svgDoc = EmbedTag.getSVGDocument();
});