iframe 页面中获取父级页面的 localStorage 或者 sessionStorage数据

发布时间:2024年01月24日

问题

在开发的过程中遇到需要在 iframe 页面中获取父级页面系统所存储的本地数据的需求。由于浏览器的安全策略,是不允许 iframe 页面直接获取系统的存储数据的,那么要如何解决呢?

解决方法

对于该问题,我们可以通过 window.postMessage() 传值来解决

window.postMessage() 方法允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本,而不用管是否跨域。一个文档里的脚本还是不能调用在其他文档里方法和读取属性,但他们可以用这种消息传递技术来实现安全的通信。

实现代码

1、父级页面在 iframe 加载完成后,使用 postMessage 方法将存储的数据发送给 iframe 。

父级页面代码:

var data = {
  'localStorage': localStorage.getItem('key'),
  'sessionStorage': sessionStorage.getItem('key')
};
var iframe = document.getElementById('myIframe');
iframe.onload = function() {
  iframe.contentWindow.postMessage(JSON.stringify(data), '*');
};

2、在 iframe 中,通过监听父级的 message 事件,获取发送过来的数据。

iframe 页面代码:

window.addEventListener('message', function(event) {
  var data = JSON.parse(event.data);
  var localStorageValue = data.localStorage;
  var sessionStorageValue = data.sessionStorage;
  console.log(localStorageValue); // 输出localStorage的值
  console.log(sessionStorageValue); // 输出sessionStorage的值
});

这样就实现了 iframe 页面中获取父级页面系统所存储的本地数据的需求了。

文章来源:https://blog.csdn.net/jiangjunyuan168/article/details/135816042
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。