内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

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

发布:2021-05-29 浏览: 评论(
    在实际的项目中,我们经常会在一个系统中引入另一个系统的页面,放在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-2021 seozhijia.net 版权所有-粤ICP备13087626号-4