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

【问题标题】：Accessing localStorage of an iFrame in an event callback?在事件回调中访问 iFrame 的 localStorage？
【发布时间】：2017-06-16 08:10:03
【问题描述】：

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

我向每个页面添加了一个隐藏的 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 已成功存储，所有窗口都会收到 storage 事件。当我点击播放音频时，我在回调中收到以下错误 - Uncaught DOMException: Failed to execute 'setItem' on 'Storage': access is denied for this document.

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

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

【问题讨论】：

标签： javascript local-storage

【解决方案1】：

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

小心：

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

【讨论】：