Vue页面通过Iframe嵌入别人页面并通过postmessage传递数据
2023-12-14 12:50:31
接到一个新需求,自己的管理端不做登录,将页面嵌入别人的页面,直接在localstorage获取别人登录成功后存储到本地的用户信息,然后将其作为入参传入己方接口来获取自己所需的数据,但是这里会有一个问题就是不同域之间的localstorage不能跨域访问
这里就可以使用postmessage来做操作,具体如下:
上级页面需要这么写来传递数据:
===============================上级页面===================================
html:?
<iframe id="father" src="http://xxx.html"></iframe>
JS:
document.getElementById("father").contentWindow.postMessage("要传递的数据","*");
===============================上级页面===================================
下级页面需要这么写来接收数据:?
?我是写在public/index.html里的
window.addEventListener('message', function (e) {
console.log(e.data, "e.data===83");
window.localStorage.setItem("userInfo", JSON.stringify(e.data))
}, false);
这样在自己的域内的localstorage也会有所需的数据了?
文章来源:https://blog.csdn.net/weixin_53035812/article/details/134990736
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!