背景

近来公司请求一切产物付款页面输入卡号暗码信息的部份必需采纳公司的一致页面。
详细完成计划是，我们将公司一致的输入卡号暗码的页面经由过程iframe嵌入我们产物的付款页面。用户点击付款时，我们须要给iframe的页面发送音讯，关照他们能够举行付款处理了。
我们产物页面与iframe内嵌的页面之间是差别域的页面。所以在关照iframe付款时，我们采纳了window.postMessage要领举行通讯。

window.postMessage要领引见

假如我们的页面的window对象援用是windowParent，内嵌在iframe的页面的window对象援用是windowCard。
付款时，我们须要给他们发送数据：

windowCard.postMessage(message, targetOrigin, [transfer]);

• message: 给目的页面发送的数据。花样能够是种种数据对象。现在我们发送的花样为JSON字符串。
• targetOrigin: 通常是字符串”*”或许一个URI，指定许可哪些域能吸收到音讯。假如采纳*，那末意味着许可把数据发送就任一个站点。所以，假如我们明白晓得目的页面的域，那末将域的URL给这个参数是更加平安的做法。
• transfer(可选): “是一串和message同时通报的Transferable对象。这些对象的一切权将被转移给音讯的吸收方，而发送一方将不再保有一切权”。

我们在发送音讯给目的页面以后，目的页面举行数据处理，处理完毕后会将处理结果返回给我们的页面。

他们一样用window.postMessage给我们发送处理结果。我们经由过程给我们页面的message事宜增添event handler来吸收处理结果。

windowParent.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
    var data = event.data;
    var origin = event.origin;
    var source = event.source;
}

如上所示，event的属性有:

• data: 数据对象。目的页面会将她们的处理结果等等信息放在这里。
• origin: postMessage发送方的origin。该字符串为协定、域名和端口号拼接而成。
• source: postMessage发送方的window对象的援用。

样例代码(不可运转)

<div id="MyPage">
    <iframe id="checkout" url="checkout.mycompany.com/uniformcheckoutpage"></iframe>
    
    <input type="text" id="name" />
    <input type="text" id="address" />
    
    <input type="button" id="pay" />
<div>
<script type="text/javascript">
    document.querySelector("#pay").addEventListener("click", MakePayment, false);
    window.addEventListener("message", ReceiveMessage, false);
    
    function MakePayment() {
        var name = document.querySelector("#name");
        var address = document.querySelector("#address");
        windowCard.postMessage(JSON.stringify({name : name, address : address}), "checkout.mycompany.com");
    }
    
    //Assume the target frame send back response with result and errorMessage
    function ReceiveMessage(event) {
        var result = event.data.result;
        var result = event.data.errorMessage;
    }
</script>

参考:
[1] https://developer.mozilla.org…