在 <object> 标记中加载 SVG 时向 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");
    }
);

有趣的是，我能够使用theObjectEl.contentDocument.rootElement.attributes.onunload 获得第一个示例中使用的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 属性。