javascript - 当 SVG 在 <object> 标记内加载时，向 SVG 卸载事件添加监听器

Question

我有一个 SVG 文件，正在元素中加载。我将一个监听器附加到 load事件。当 SVG 文件显示并准备好进行任何操作时，会触发此事件。之后load事件我在应用程序层上使用 javascript 来操作 SVG。隐藏/显示某些元素、为某些元素设置动画、添加或删除元素。到目前为止，一切都运行良好，并且所有主要浏览器都支持。

(如果你好奇的话，我这样做是因为这个 SVG 是可重用组件的一部分，我向我推荐这是一种隔离 SVG 元素 ID 与应用程序中的元素 ID 重叠的方法或 SVG 的其他实例。)

当<object>时出现问题元素或元素的某些父元素与文档分离。这会导致 <object>卸载。当重新连接分离的元素时 <object>会自动重新加载，并且 load事件再次触发。

我在这里最关心的是当 <object> 时收到通知元素被卸载。我需要运行一些代码来防止对卸载的 <object> 进行任何进一步的 SVG 操作.

据说有一个 'unload' event在 <svg> 上触发当发生这种卸载时。我只能在 SVG 文件本身中将句柄作为属性附加到此事件。喜欢:

<svg ... onunload="javascript:console.log('THIS WORKS')">

但是，我的应用程序层上的 javascript 似乎无法附加到此事件。假设theObjectEl是对我的<object>的引用我希望以下内容能够发挥作用:

theObjectEl.contentDocument.rootElement.addEventListener(
    'unload',
    function() {
        console.log("THIS DOES NOT WORK");
    }
);

有趣的是我能够得到onunload第一个示例中使用的属性为 theObjectEl.contentDocument.rootElement.attributes.onunload 。但是设置属性绝对不会改变事件的处理程序。

A demo showing how the SVG object gets unloaded and reloaded

有什么想法吗？

注意:SVG 与我的应用程序托管在同一服务器上，因此不存在跨域限制。

Answer 1

编辑

明白了:svgDocument.defaultView.addEventListener('unload' , function(){console.log('Gotcha!')})

您必须将事件附加到 documentElement 的 defaultView属性(property)。