我需要编辑（使用javascript）嵌入html页面的SVG文档。加载SVG后，我可以访问SVG的dom及其元素。但是我不知道SVG dom是否准备好，因此在加载html页面时，我无法对SVG执行默认操作。要访问SVG dom，我使用以下代码：var svg = document.getElementById("chart").getSVGDocument();其中“图表”是embed元素的ID。如果在html文档准备好后尝试访问SVG，则采用这种方式：jQuery(document).ready( function() {var svg = document.getElementById("chart").getSVGDocument();...svg始终为null。我只需要知道它何时不为null，就可以开始对其进行操作了。您知道是否有办法吗？
3 回答
潇潇雨雨
TA贡献1833条经验 获得超4个赞
您可以尝试每隔一段时间进行一次轮询。
function checkReady() {
var svg = document.getElementById("chart").getSVGDocument();
if (svg == null) {
setTimeout("checkReady()", 300);
} else {
...
}
}
12345678_0001
TA贡献1802条经验 获得超5个赞
在主文档中的嵌入元素（例如'embed'，'object'，'iframe'）上，添加一个onload调用函数的属性，或在脚本中添加事件监听器，例如embeddingElm.addEventListener('load', callbackFunction, false)。另一个选择可能是听DOMContentLoaded，具体取决于您想要听什么。
您还可以在主文档上添加一个加载侦听器。jQuery(document).ready并不意味着所有资源都已加载，仅意味着文档本身具有一个可供操作的DOM。但是请注意，如果您侦听整个文档的加载，则只有在加载该文档中的所有资源，css，javascript等之后，才会调用回调函数。
如果您使用内嵌svg，则jQuery(document).ready可以正常工作。
进一步说明，您可能需要考虑使用embeddingElm.contentDocument（如果有）而不是embeddingElm.getSVGDocument()。
子衿沉夜
TA贡献1828条经验 获得超3个赞
您可以使用onload事件进行检查。
假设some.svg嵌入在对象标签中：
<body>
<object id="svgholder" data="some.svg" type="image/svg+xml"></object>
</body>
jQuery的
var svgholder = $('body').find("object#svgholder");
svgholder.load("image/svg+xml", function() {
alert("some svg loaded");
});
javascript
var svgholder = document.getElementById("svgholder");
svgholder.onload = function() {
alert("some svg loaded");
}
添加回答
举报
0/150
提交
取消