如何从svg内部获取嵌入元素

Question

Using mySVGNode.parentNode I get null for an embedded svg file. Ideally I want to reference the embed tag and its id attribute.

I can successfully search the DOM for it, but I am surprised parentNode returns null. Is it not supported for embedded objects?

Answer 1

What you're looking for is window.frameElement . See the definition in the html5 spec .

Here's an example .

Answer 2

window.frameElement is the way to go, as @Eric said, but it unfortunately doesn't work in IE or Edge.

There is a workaround, however, which is to get the parent document, find the <object> or <embed> tags in it (which may reference your SVG), and, for each of them, check whether the contentDocument is our SVG document.

Unlike regular DOM searching by ID, this avoids the need to assign a unique ID for you object/embed tag.

Example:

var objectElt = window.frameElement;
if (!objectElt) { // IE/Edge case
    var objectElts = window.parent.document.getElementsByTagName("object");
    for (var i = 0; i < objectElts.length; i++) {
        if (objectElts[i].contentDocument == document) {
            objectElt = objectElts[i];
            break;
        }
    }
}
// objectElt now references the appropriate <object> tag

Answer 3

您可以使用window.parent.document访问嵌入文档，以便通过其id获取embed标签，您可以执行以下操作...

window.parent.document.getElementById("<whatever your embed Id attribute is>");