JS实现iframe中⼦⽗页⾯跨域通讯的⽅法分析
⽬录
本⽂实例讲述了JS实现iframe中⼦⽗页⾯跨域通讯的⽅法。分享给⼤家供⼤家参考，具体如下：
在⾮跨域的情况下，iframe中的⼦⽗页⾯可以很⽅便的通讯，但是在跨域的情况下，只能通过window.postMessage()⽅法来向其他页⾯发送信息，其他页⾯要通过window.addEventListener()监听事件来接收信息；
#跨域发送信息
#window.postMessage()语法
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow
其他窗⼝的⼀个引⽤，写的是你要通信的window对象。
例如：在iframe中向⽗窗⼝传递数据时，可以写成window.parent.postMessage()，window.parent表⽰⽗
窗⼝。
message
需要传递的数据，字符串或者对象都可以。
[transfer]
可选参数。是⼀串和message 同时传递的 Transferable 对象，这些对象的所有权将被转移给消息的接收⽅，⽽发送⼀⽅将不再保有所有权。我们⼀般很少⽤到。
#跨域接收信息
需要监听的事件名为"message"
window.addEventListener('message', function (e) {
console.log(e.data) //e.data为传递过来的数据
console.igin) //e.origin为调⽤ postMessage 时消息发送⽅窗⼝的 origin（域名、协议和端⼝）
console.log(e.source) //e.source为对发送消息的窗⼝对象的引⽤，可以使⽤此来在具有不同origin的两个窗⼝之间建⽴双向通信
})
#⽰例Demo
⽰例功能：跨域情况下，⼦⽗页⾯互发信息并接收。
⽗页⾯代码：
<body>
<button onClick="sendInfo()">向⼦窗⼝发送消息</button>
<iframe id="sonIframe" src="192.168.2.235/son.html"></iframe>
<script type="text/javascript">
var info = {
message: "Hello Son!"
};
//发送跨域信息
function sendInfo(){
var sonIframe= ElementById("sonIframe");
}
//接收跨域信息
window.addEventListener('message', function(e){
alert(ssage);
}, false);
</script>
</body>
⼦页⾯代码
<body>
<button onClick="sendInfo()">向⽗窗⼝发送消息</button>
<script type="text/javascript">
var info = {
message: "Hello Parent!"
};
//发送跨域信息
function sendInfo(){
window.parent.postMessage(info, '*');
}
//接收跨域信息
window.addEventListener('message', function(e){
alert(ssage);
}, false);
iframe参数传递
</script>
</body>
更多关于JavaScript相关内容可查看本站专题：《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。