如何從svg內部獲取嵌入元素

Question

使用mySVGNode.parentNode，對於嵌入式svg文件，我會得到null。 理想情況下，我想引用embed標簽及其id屬性。

我可以為它成功搜索DOM，但是我很驚訝parentNode返回null。 嵌入式對象不支持它嗎？

Answer 1

您正在尋找的是window.frameElement 。 請參閱html5規范中的定義。

這是一個例子 。

Answer 2

正如@Eric所說， window.frameElement是要走的路，但是不幸的是，它在IE或Edge中不起作用。

但是，有一種解決方法，即獲取父文檔，在其中找到<object>或<embed>標簽（它們可能引用您的SVG），然后針對每個標簽檢查contentDocument是否為我們的SVG文檔。

與按ID進行常規DOM搜索不同，這避免了為對象/嵌入標簽分配唯一ID的需要。

例：

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>");