在事件回调中访问iFrame的localStorage？

Question

我试图用localStorage作弊。规范定义当localStorage中的值更改时，同一域中的所有其他打开页面都会收到存储事件回调。我还希望在更改值的页面上触发事件。

我为每个页面添加了一个隐藏的iFrame，它从同一个域加载一个空文档并尝试将其用作localStorage更改的目标（所以从技术上讲，我正在查看的页面不是localStorage的原点变化）

它工作正常，除非我在事件回调中做同样的事情......

function fnSetupMusicPlayerSection(i, oSection) {
    var oAudio, oLocalStorageFrame, oLocalStorageWindow;

    oAudio = oSection.querySelector('audio');
    oLocalStorageFrame = oSection.querySelector('iframe.local-storage-target');
    oLocalStorageWindow = oLocalStorageFrame.contentWindow || oLocalStorageFrame;

    oLocalStorageWindow.localStorage.setItem('loadSetter', '1111');

    oAudio.addEventListener('play', function(oEvent) {
        oLocalStorageWindow.localStorage.setItem('callbackSetter', '2222');
    });
}

loadSetter 已成功存储，所有窗口都会收到存储事件。当我点击播放音频时，我在回调中遇到以下错误 - 未捕获的DOMException：无法在“存储”上执行'setItem'：此文档的访问被拒绝。

我有什么办法可以解决这个问题吗？我真的不想编写代码来单独更新当前页面

更新：我不知道我在上面给出的示例中是否做错了，但代码似乎在一些回调中有效。我在页面上有一个锚点，其中包含点击事件，我可以通过iFrame设置localStorage

Answer 1

您可以尝试postMessage API启用页面与iFrame之间的通信。简而言之，发送消息以指示iFrame更新其localStorage，并发送另一条消息，要求iFrame在您需要发送的数据时返回其localStorage内容。

小心，因为：

• 这是一个HTML5 API。检查您应用的最低要求是否允许实施。
• 这是一种跨域通信，这意味着如果浏览器中的其他页面使用postMessage，您的iFrame也会收到它。您可能需要在消息中添加信息以通知iFrame它应该读取哪条消息。