javascript - 如何检查嵌入的 SVG 文档是否加载到 html 页面中？

Question

我需要编辑(使用 javascript)嵌入在 html 页面中的 SVG 文档。

加载 SVG 后，我可以访问 SVG 的 dom 及其元素。但我无法知道 SVG dom 是否准备就绪，因此我无法在加载 html 页面时对 SVG 执行默认操作。

要访问 SVG dom，我使用以下代码:

var svg = document.getElementById("chart").getSVGDocument();

其中“图表”是嵌入元素的 ID。

如果我尝试在 html 文档准备就绪时访问 SVG，以这种方式:

jQuery(document).ready( function() {
var svg = document.getElementById("chart").getSVGDocument();
...

svg 始终为空。我只需要知道它什么时候不为空，这样我就可以开始操作它了。 你知道有没有办法做到这一点？

Answer 1

在主文档中的嵌入元素(例如“embed”、“object”、“iframe”)上添加调用函数的 onload 属性，或在脚本中添加事件监听器，例如embeddingElm.addEventListener('load', callbackFunction, false)。另一种选择可能是监听 DOMContentLoaded，这取决于您想要它做什么。

您还可以在主文档上添加一个加载监听器。 jQuery(document).ready 并不意味着所有资源都已加载，只是文档本身有一个准备好执行操作的 DOM。但是请注意，如果您监听整个文档的加载，您的回调函数将不会被调用，直到加载该文档中的所有资源，css，javascript 等。

如果您使用内联 svg，那么 jQuery(document).ready 将正常工作。

另外请注意，您可能需要考虑使用 embeddingElm.contentDocument(如果可用)而不是 embeddingElm.getSVGDocument()。