Question

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

父页面在localstorage中有一个我想从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访问父级的localstorage值？

Answer 1

localstorage是域

的属性

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

在你的jsfiddle例子中，你会期望它可以工作，因为它们都来自jsfiddle.net - 但是你被jsfiddle的工作方式所迷惑 - 实际执行的右下方框实际上是一个iframe本身，从不同的域加载：fiddle.jshell.net

因此，在父级上，执行窗口页面来自fiddle.jshell.net，而iframe来自jsfiddle.net，根据您的硬编码iframe src - 它们是不同的域，可以＆＃39;互相访问对方的地方分战。

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

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

从iframe访问iframe的父localstorage变量

1 个答案:

localstorage是域