iframe子页面与父页面互相传递参数、事件

最近的项目：公司水环境信息平台，页面布局是，分四部分，左中右下四块。其中地图（子）页面是通过iframe嵌入到驾驶舱（父）页面。 那么需求来了：

Q1：父页面需要向子页面触发事件：当另外三个板块关闭之后，全屏显示地图后，需要地图页面显示工具栏div，因此需要跨域触发事件。

***********************************

A1：解决方案：

1，父页面获取当前iframe对象 ：

var myFrame = document.getElementByIdx_x("map")；

其中：

2，通过事件触发发送请求到子页面：

myFrame.contentWindow.postMessage("message", "*"); 这里不包含任何信息，只是事件。

3，子页面监听事件：

window.addEventListener('message', function(){ do（***）；    ;

 

 

Q2：子页面需要向父页面出发事件和参数： 当点击地图查询时，需要将查询到的行政区显示给父页面。

**********************

A2：解决方案：

1，子页面  内部触发父页面事件    先赋值 再调用方法

var parentData = {type: 'passDataBack', data: ptName};

window.parent.postMessage(parentData, '*');

2，父页面监听事件及参数：

window.addEventListener('message',function(event){do（***）；

  

转：http://blog.sina.com.cn/s/blog_9e42ae520102ynly.html

 

 

---

 

示例：

iframe页面向父页面传值——postMessage用法

最近在做系统的迁移，需要将老的系统作为iframe嵌入到新系统中，其中某些信息需要通过iframe的页面传到父页面中，调用contentWindow，因为新系统和老的系统域名不一样，会报跨域问题，最后选择了postMessage这种方法。

用法：
iframe的页面中：

window.parent.postMessage(你要传递的值,传递到那个域名);
如:
window.parent.postMessage('变量a','http://xxx.com');

我是使用的vue，所以在create中监听

created(){
            window.addEventListener("message",(event)=>{
                    console.log('event',event)
                }
            }, false) ;
        },

从event就能取到你需要的值啦～