从 iframe 访问 iframe 的父本地存储变量答案

【问题标题】：Accessing iframe's parent localstorage variable from iframe从 iframe 访问 iframe 的父本地存储变量
【发布时间】：2017-01-12 08:17:10
【问题描述】：

我有这个页面 https://jsfiddle.net/r91bLb7r/9/，我用它来显示这个 iframe https://jsfiddle.net/r91bLb7r/8/。

父页面在本地存储中有一个值，我想从 iframe 访问它。

这是父母的代码：

$(document).ready(function () {
    $( "#top" ).click(function() {
        localStorage.setItem("parent", "one");
        alert('I am the top page');
    });
});

这是 iframe 代码：

$(document).ready(function () {
    $( "#map" ).click(function() {
        var mode = localStorage.getItem("parent");
        alert('I am the iframe'+mode);
    });
});

如何从 iframe 访问父级的本地存储值？

【问题讨论】：

标签： javascript jquery html iframe

【解决方案1】：

localstorage 是域的属性

localstorage 不是页面或 iframe 的属性，而是域的属性。如果您的主页和 iframe 来自同一个域，它们将能够访问相同的本地存储

在您的 jsfiddle 示例中，您希望它能够工作，因为它们都来自 jsfiddle.net - 但您被 jsfiddle 如何工作的技巧所吸引 - 实际执行的右下角框实际上是 iframe本身，从不同的域加载：fiddle.jshell.net

因此，在父级上，执行窗口页面来自fiddle.jshell.net，iframe 来自jsfiddle.net，根据您的硬编码 iframe src - 它们是不同的域，无法访问彼此的本地策略。

如果您将父 iframe src 更改为 https://fiddle.jshell.net/r91bLb7r/8/show/（与 iframe 的 jsfiddle 关联的 fiddle.jshell.net URI），那么您会发现它按预期工作。

如果您的实际案例中的两个页面是从不同的域加载的，那么它们将无法访问彼此的本地存储 - 如果它们来自同一个域，那么您应该没有问题。

【讨论】：

感谢您的冗长回答。