iframe内部不会长时间显示检测到iframe

Posted 2021-05-06

我提供了一个显示在iframe中的Web组件。加载我的组件的iframe创建如下：

   this._iframe = document.createElement( "iframe" );
   this._iframe.allowtransparency = "true";
   this._iframe.src = url;

当我的组件不再需要时，它只需由加载器清除：

this._iframe = null;

现在，在卸载我的Web组件之前，我应该做一些清理工作。当我的组件独立加载时，这段代码对我来说很好：

if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('beforeunload', cleanup, false);
}
else if (typeof document.addEventListener != 'undefined') {
    document.addEventListener('beforeunload', cleanup, false);
}
else if (typeof window.attachEvent != 'undefined') {
    window.attachEvent('onbeforeunload', cleanup);
}

else {
    if (typeof window.onbeforeunload == 'function') {
        window.onbeforeunload = function() {
            cleanup();
        };
    }
    else {
        window.onbeforeunload = cleanup;
    }
}

但是，当我的组件加载到iframe中时，永远不会触发onb​​eforeunload。有谁知道在这种情况下我怎么能检测到我的网络被卸载了？

答案

我所知道的是，iframe拥有自己的窗口对象，并且Same Origin策略也适用于iframe，这意味着您无法使用主窗口中的脚本控制iframe内部的内容。您可以通过postMessage see this link在iframe和主窗口脚本之间进行通信。我不知道iframe的来源是否与您的主网址相同。

另一答案

经过多次测试后，我终于找到了如何从iframe代码中检测到它正在被卸载。

一些考虑：

• 出于某种原因，我无法进行onbeforeunload所以我不得不使用onunload。
• 使用'addEventListener'或'attachEvent'添加事件不起作用。当您“侦察”DOM时会添加事件，但不会触发它们。

有了这一切，我采用了这种执行清理方法的方法：

function checkLoaded(){
  var body = document.getElementsByTagName("body")[0];
  if(body){
    body.onunload=cleanup;
  } else{ 
    setTimeout(checkLoaded,2000);
  }
}
setTimeout(checkLoaded,2000);