javascript - iFrame 关闭时 session 存储不会重置

Question

我面临的问题是，当关闭一个 iframe 并再次打开另一个具有相同目标的 iframe 时，sessionStorage 似乎仍然是从我打开的最后一个 iframe 中填充的。我预计 session 存储将被重置并再次重新开始。

我的 iframe 位于其自己的组件中，我将其显示为模式弹出窗口。当关闭模态时，我验证了 onDestroy 函数正在被调用，并且看起来组件正在被拆除，并且 iframe 应该从 DOM 中删除。

我还尝试专门通过 id 获取 iframe 并在 onDestroy 函数中将其从 ParentNode 中删除，以防万一它没有被正确删除，但这仍然没有什么区别。

我还尝试使用 beforeunload 事件并在 iframe 中的页面关闭之前清除 session 存储...但是当关闭包含 iframe 的对话框(组件)时，似乎事件没有被触发或处理程序没有被触发。下面是我用来处理 beforeunload 事件的代码( Angular ):

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    console.log("unload event");
  }

有什么方法可以在 iframe 关闭时强制清除 session 存储吗？这是 session 存储运行方式中的错误还是使用 session 存储时的预期行为？

Answer 1

根据documentation ，这是 sessionStorage 的预期行为。它的范围为浏览器选项卡/窗口，按域隔离，并在浏览器或选项卡关闭时被清除。但根据定义，iframe 既不是浏览器选项卡，也不是窗口，但它实际上可能指向不同的域。清理它的“自然”方法是关闭浏览器/选项卡。

要以编程方式执行此操作，一种解决方案是通过 window.postMessage 与 iframe 通信应用程序模式正在关闭。这样，加载到 iframe 中的应用程序就可以自行清理存储。但您可能无法在 iframe 中修改应用程序的代码。

另一个解决方案是通过反向代理在与主应用程序相同的域上提供 iframe 应用程序。然后，存储将在两个应用程序之间共享，并且您应该能够在调用模态 onDestroy 方法时清除它:

onDestroy() {
  sessionStorage.clear();
}