vue项目iframe的传值问题
前言
项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以html的方式调用，
所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。
到这里我就遇到了一个问题，那就是vue项目中iframe的传值问题，这里做个笔记防止之后忘记，
如果有其他的方式，欢迎大家交流，不胜感激。
正文
先写几个简易的demo
需要用到的html
测试damo
1213123111220980980
父级页面用iframe调用html
在线文档编译组件
点击获取iframe数据
向iframe中发送数据
这里提供两种传值方式：
第一种：postMessage
1、父页面生命周期函数中
const mapFrame = this.$refs['mainIframe'] if (mapFrame.attachEvent) { // 兼容浏览器判断 mapFrame.attachEvent('onload', function() { const iframeWin = mapFrame.contentWindow iframeWin.postMessage('初始化值', '*') // data传递的参数 *写成子页面的域名或者是ip }) } else { mapFrame.onload = function() { const iframeWin = mapFrame.contentWindow iframeWin.postMessage('初始化值', '*') } }
2、html页面接受数据
window.addEventListener('message', function(messageEvent) {
var data = messageEvent.data;
console.log('收到vue的数据：',data);
wpsData = data
console.log('wpsData：',wpsData);
}, false);
在页面加载结束，你就能发现html页面中的wpsData值已经被改变成了父级页面传过来的值。
这种方式是加载一次，数据不能实时同步，或者我没有实时同步数据的方法
第二种：直接操作iframe
1、父级页面直接给iframe的window对象设置值
setData(data) { const obj1 = window.frames['mainIframe']// 获得对应iframe的window对象 obj1.wpsData = '设置的数据' }
2、父级页面设置完值后，在html页面直接打印对应的参数，此时会发现wpsData数据已经改变
function getData(){ alert(wpsData) }
这种方式每次在父级页面改变值，html页面就会实时更新数据，我暂时用的这种方式，至于有什么bug，我正在研究。
完整的页面代码
html页面
测试damo 1213123111220980980
父级页面
在线文档编译组件点击获取iframe数据 向iframe中发送数据
结尾
学无止境，还是有很多不知道的，继续精进技术。。。
欢迎大家沟通交流。