首页 > Vue >

iframe父子页面的跨域问题解决;父子页面相互传递信息的方法;

时间: 作者:admin 浏览:

在实际的项目中,我们经常会在一个系统中引入另一个系统的页面,放在iframe中实现展示,而且这两个系统的域名是不一样的,这就出现了不同源的跨域问题,比如想在iframe中获取父页面的相关参数,浏览器往往会报一个错“cross-origin”,就是跨域的意思,跨域时在iframe中用window.parent去获取父页面的信息是获取不到的,但是项目中确实需要获取父页面的信息进行判断,难道没有解决的办法吗?百度搜一下找到两种方法,第一种是代理页面的方法,这个方法太过于复杂,大家可以自行搜索一下,这里主要说下第二种方法:postMessage;上代码:

//子页面传递信息给父页面
//父页面:
window.addEventListener("message",(event)=>{
     console.log(event.data)
})

//子页面(iframe):
window.parent.postMessage({msg: "hello"}, "*")

这样在子页面就可以将需要的信息发送到父页面接收,但问题是怎么在父页面给子页面发送信息呢?因为页面执行的时候父页面比子页面(iframe)要先加载,所以上面的代码在父子页面之间换过来是没办法触发的,因为父页面执行完postMessage方法时,子页面还没有绑定监听事件,小编想到了一个方法,供大家参考:

//父页面:
window.addEventListener("message", (event)=>{
    window.frames['iframeName'].postMessage({msg:"parent"}, "*");//给指定的iframe发送信息
})

//子页面(iframe):
 window.addEventListener("message",(event)=>{
     //监听父元素的postMessage事件
     console.log(event.data)
     window.removeEventListener("message",()=>{});//移除message监听事件,否则会成死循环;
})
 window.parent.postMessage({},"*");//触发父元素的监听事件

这样就可以在父页面传递信息给子页面(iframe)了,在实际项目中测试过确实可行,快去试试吧;

前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4