iframe跨域父子页面通信方法

        尽管iframe因兼容、性能等问题逐渐被替换掉，但有不少存量项目仍在使用。最近，我们部门一位小伙伴遇到iframe跨域相关问题，详细如下：

[问题前置条件]

1. 有两个系统A、B（都是银行存量老系统），A、B跨域；
2. A系统中有一个页面a、B系统中有一个页面b；
3. b以iframe方式嵌在a页面中。

[问题描述]

• 原来的逻辑是：在b页面有一个保存按钮，点击“保存” -> 将b页面的数据存在B系统，a页面处理完成后调用B系统的接口，把b页面的数据再通过接口的方式传给A系统。
• 现在优化的逻辑是：在b页面有一个保存按钮，点击“保存” -> b页面调用a页面的方法，将数据传过去，直接保存。

那么，iframe、跨域、如何通信？

[解决方法]

方法一：通过代理页面通信

父页面http://localhost:8081/dlParent.html

    
父页面
    
    

代理页面http://localhost:8081/iframe.html

子页面http://localhost:8080/dlChild.html

    
子页面
            
    

页面效果如下：

方法二：postMessage

父页面 http://localhost:8081/pmParent.html

    
    
    



    
page parent
    

        Hi,I'm father
        处理
    
    
    

 

子页面http://localhost:8080/pmChild.html：

    
    
    


    
page child
    
    保存

  

页面运行效果如下：