小谢第25问：iframe怎么向页面传值？

借鉴思路：https://www.jianshu.com/p/e558f4115c82

问题背景：因为重构项目暂未完成，因此架构大哥就用iframe把老页面放到了新的页面当中，今天涉及到老页面的更改，因此需要从iframe定义一个变量向页面传送，经过各种借鉴终于成功的在老的页面向新的页面传值成功

主要方法：postMessage

代码示例：此处场景iframe为子组件，因此用到上面提到子向父跨域通讯

1、在vue的页面监听iframe的值

window.addEventListener('message',function(e){
        console.log(e.data);
        if(e.data.msg==='xxx'){
                //一些自己的业务逻辑
            }
});

2、在iframe传值

window.parent.postMessage({
         msg:"xxx"
},'*');

是的，就是这么简单--------

注意：*号是必带的

 

注解：测试发现，子向父postMessage的时候，源可以写为‘*’，父向子postMessage的时候，源需要写成子的源，(也就是子页面的协议+主机号+端口)