如何检查HTML页面中是否加载了嵌入式SVG文档？
我需要编辑（使用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，就可以开始对其进行操作了。您知道是否有办法吗？
白衣非少年浏览 809回答 3
3回答
-
潇潇雨雨
您可以尝试每隔一段时间进行一次轮询。function checkReady() { var svg = document.getElementById("chart").getSVGDocument(); if (svg == null) { setTimeout("checkReady()", 300); } else { ... }} -
12345678_0001
在主文档中的嵌入元素（例如'embed'，'object'，'iframe'）上，添加一个onload调用函数的属性，或在脚本中添加事件监听器，例如embeddingElm.addEventListener('load', callbackFunction, false)。另一个选择可能是听DOMContentLoaded，具体取决于您想要听什么。您还可以在主文档上添加一个加载侦听器。jQuery(document).ready并不意味着所有资源都已加载，仅意味着文档本身具有一个可供操作的DOM。但是请注意，如果您侦听整个文档的加载，则只有在加载该文档中的所有资源，css，javascript等之后，才会调用回调函数。如果您使用内嵌svg，则jQuery(document).ready可以正常工作。进一步说明，您可能需要考虑使用embeddingElm.contentDocument（如果有）而不是embeddingElm.getSVGDocument()。 -
子衿沉夜
您可以使用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");});javascriptvar svgholder = document.getElementById("svgholder");svgholder.onload = function() { alert("some svg loaded");}
随时随地看视频慕课网APP
相关分类
JavaScript
JQuery