从iframe访问iframe的父级localstorage变量 [英] Accessing iframe's parent localstorage variable from iframe

问题描述

我有此页面 https://jsfiddle.net/r91bLb7r/9/用于显示此iframe https://jsfiddle.net/r91bLb7r/8/.

父页面具有我要从iframe访问的localstorage值.

这是父母的代码:

$(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是域的属性

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)，然后您会发现它按预期运行.

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

>

I have this page https://jsfiddle.net/r91bLb7r/9/ which I am using to display this iframe https://jsfiddle.net/r91bLb7r/8/.

The parent page has a value in localstorage that I want to access from the iframe.

This is the parent's code:

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

This is the iframe code:

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

How can I access the parent's localstorage value from the iframe?

解决方案

localstorage is a property of the domain

localstorage isn't a property of the page or iframe, but a property of the domain. If your main page and iframe are from the same domain, they will be able to access the same localstorage

In your jsfiddle example, you would expect it to work, because they are both from jsfiddle.net - but you are being caught out by a trick of how jsfiddle works - the bottom-right box that actually executes is actually an iframe itself, being loaded from a different domain: fiddle.jshell.net

So on the parent, the execution window page is from fiddle.jshell.net and the iframe is from jsfiddle.net, as per your hardcoded iframe src - they are different domains and can't access each other's localstrage.

If you alter the parent iframe src to be https://fiddle.jshell.net/r91bLb7r/8/show/ (the fiddle.jshell.net URI assocated with your iframe's jsfiddle), then you'll find it works as expected.

If your real-world case has the two pages being loaded from different domains, then they will not be able to access each other's local storage - if they are from the same domain, you shouldn't have a problem.

这篇关于从iframe访问iframe的父级localstorage变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！