father and son involved in cross-domain iframe page issue

What is cross-domain?

Cross-domain, referring to the browser can not execute scripts other sites. It is caused by the browser's same-origin policy, are browser security restrictions imposed. The so-called homology means the same domain name, protocol and port, as long as it is one of the different cross-domain.
A few examples:

1. http://a.123.com/index.html and http://a.123.com/index.js non-cross-domain, they have the same domain name, protocol and port.
2. http://a.123.com/index.html and http://b.123.com/index.js cross-domain, the same port, protocol, but different domain name ( a.123.com and b.123. COM ).
3. http://a.123.com:8080/index.html and http://a.123.com:8081/index.js cross-domain, the same domain name, protocol, but different ports (8080 and 8081).
4. http://a.123.com/index.html and https://a.123.com/index.js cross-domain cross-domain, the same domain name, the port, but different protocols (http and https).

 First, the sub-transmission data to the Father:

【send messages】

otherWindow.postMessage(message, targetOrigin, [transfer])

• otherWindow
  a reference to the other window, the window object is written you have to communicate.
  For example, when data is transmitted to the parent window in an iframe, can be written window.parent.postMessage (), window.parent represents the parent window.
• message
  data to be transmitted, or the object may be a string.
• targetOrigin
  represents the source of the target window, the protocol name + + port number, if set to "*", then can be passed to any window. When sending a message, if any protocol target window, the domain name or the port does not match one of these three values targetOrigin provided, then the message will not be sent; only three exact match, a message will be sent. E.g:

window.parent.postMessage('hello world','http://a.123.com:8080/index.html')

Only the parent window is http://a.123.com:8080 message will be received when delivered.

• [Transfer]
  optional parameters. Transferable object, a string and is simultaneously transmitted message, ownership of these objects will be transferred to the recipient of the message, the sender side will no longer retain ownership. We generally rarely used.

[Receive messages]

window.addEventListener('message', function (e) {
    console.log(e.data)  //e.data为传递过来的数据
    console.log(e.origin)  //e.origin为调用 postMessage 时消息发送方窗口的 origin（域名、协议和端口）
    console.log(e.source)  //e.source为对发送消息的窗口对象的引用，可以使用此来在具有不同origin的两个窗口之间建立双向通信
})

 

 

Close the command transfer iframe

 

 

Receiving a command to the parent window closed iframe

Second, data transmitted to the parent sub

A total of two pages,

Page 1: www.a.com/a.html 
Page 2: www.b.com/b.html

Target: two Web pages communicate with each other to achieve cross-domain 
current example relies on jQuery 3.0

Page code: www.a.com/a.html

<iframe id="myIframe" src="http://www.b.com/b.html"></iframe>
<script>
var $myIframe = $('#myIframe');
// 注意：必须是在框架内容加载完成后才能触发 message 事件哦
$myIframe.on('load', function(){
    var data = {
        act: 'article',  // 自定义的消息类型、行为，用于switch条件判断等。。
        msg: {
            subject: '跨域通信消息收到了有木有~', 
            author: 'CSDN-神神的蜗牛'
        }
    };
    // 不限制域名则填写 * 星号, 否则请填写对应域名如 http://www.b.com
    $myIframe[0].contentWindow.postMessage(data, '*');
});

// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
window.addEventListener('message', function(e){
    if (e.data.act == 'response') {
        alert(e.data.msg.answer);
    } else {
        alert('未定义的消息: '+ e.data.act);
    }
}, false);
</script>

Page code: www.b.com/b.html

<script>
// 注册消息事件监听，对来自 myIframe 框架的消息进行处理
window.addEventListener('message', function(e){
    if (e.data.act == 'article') {
        alert(e.data.msg.subject);
        // 向父窗框返回响应结果
        window.parent.postMessage({ 
            act: 'response', 
            msg: {
                answer: '我接收到啦！'
            }
        }, '*');
    } else {
        alert('未定义的消息: '+ e.data.act);
    }
}, false);
</script>