小谢第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的时候,源需要写成子的源,(也就是子页面的协议+主机号+端口)
既然许愿了,就努力去实现