时间戳

首页 > 解决方案 > iOS Safari 中未触发的存储事件

javascript - iOS Safari 中未触发的存储事件

问题描述

我在 iOS Safari 中有两个选项卡，都打开到同一页面。两个选项卡都有一个用于窗口对象上的存储事件的事件侦听器，并且在客户端单击/点击/类型时都写入本地存储。

在 Internet Explorer 中，未与之交互的选项卡接收存储事件，但不是 Safari（在 Firefox 和 Chromium 浏览器上，我为此使用广播通道 API）。此外，此代码之前在 Safari 上进行过测试（恐怕我不记得哪个版本了）并且它有效。

我确保页面上没有抛出任何 JavaScript 错误，并且我没有在隐私浏览模式下进行测试。谁能想到为什么存储事件会简单地停止触发？

标签： javascriptlocal-storagemobile-safari

解决方案

起初我认为这是跟踪预防的一部分（对于试图通信的第三方页面上的同一页面的页面和 iframe 仍然是这种情况），但现在我认为这实际上是一个Safari 错误。

如果您需要在 Safari 中进行交叉表通信，请使用 Service Worker。我首选的交叉表设置，以首选回退到最不首选的回退的顺序：

  1. 如果支持，请使用BroadcastChannel，因为这实际上是他们设计的用例。Safari 或 IE 不支持。
  2. 使用 Service Worker 的消息事件。这是目前在 Safari 中唯一有效的方法，但定期唤醒 Service Worker 并不是很好。请注意，Service Worker 不能在 Firefox 隐私浏览模式下工作，因此 Firefox 支持 BroadcastChannel 是件好事。
  3. 使用存储事件。这是 Internet Explorer 中唯一可用的跨表通信方法，但如果您不需要支持 IE（幸运的是），请不要退缩到这一步。请注意，这在 Safari 无痕浏览模式下不起作用（设置 localStorage 项目会引发错误）。另请注意，有一个 IE localStorage 错误，这意味着存储事件的 newValue 属性实际上是 oldValue，因此您需要在将 localStorage 设置为触发两次后删除它，第二次具有正确的值。

另请注意，以上都不会让您在 Safari 中的第一方和第三方上下文之间进行通信。

推荐阅读