不同域iframe主动与父容器通讯的方法

Posted 2020-08-09

web前端（H5、混合APP）开发中，经常会遇到跨域的坑，而基于iframe的跨域更是坑中巨坑。而且也会常常遇到父容器与iframe页面间进行交互操作的需求，可以称之为通讯。一般跨域有几种情况：

1、主域（domain）相同，子域不同

相对来讲这种跨域是最好处理的，只要设置document.domain = "主域" 即可。

2、两个域之间好不相干

这种详情是最坑爹的，如果iframe嵌入的是别的站点，且该站点不能配合我们进行通讯处理，那么，我下面所讲的方法基本没戏。

那么，iframe页面怎么主动与父容器进行通讯呢？

方法如下：

1）在主页面main.html，添加一个H5的消息监听事件：

window.addListenerEvent(‘message‘, function(e){

　　//处理消息

}, fasle);

2）在iframe页面iframe.html，添加一个发送消息的函数

<script>

　　function postParentMessage(data){

　　　　top.postMessage(data, ‘*‘);

　　}

</script>

3）在iframe页面需要发送消息给父容器的地方调用postParentMessage函数

<script>

　　function pay(orderId){

　　　　postParentMessage(orderId);

　　}

</script>

<a href="#" onclick="pay(orderId);">支付</a>

 

可以尝试一下！

GOOD LUCK！