前言

项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以html的方式调用，

所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。

到这里我就遇到了一个问题，那就是vue项目中iframe的传值问题，这里做个笔记防止之后忘记，

如果有其他的方式，欢迎大家交流，不胜感激。

正文

先写几个简易的demo

需要用到的html

测试damo

请使用支持javascript的浏览器

打印本地的值

点击获取值vue的值

varwpsData;var aaaaa = '22222'

functionsetData(){

alert(aaaaa)

}functiongetData(){

alert(wpsData)

}

父级页面用iframe调用html

export default{

name:'wps-edit',

props: {},

mounted() {},

methods: {getData() {

},setData(data) {

}

}

}

这里提供两种传值方式：

第一种：postMessage

1、父页面生命周期函数中

const mapFrame = this.$refs['mainIframe']if (mapFrame.attachEvent) { //兼容浏览器判断

mapFrame.attachEvent('onload', function() {

const iframeWin=mapFrame.contentWindow

iframeWin.postMessage('初始化值', '*')//data传递的参数 *写成子页面的域名或者是ip

})

}else{

mapFrame.οnlοad= 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数据已经改变

functiongetData(){

alert(wpsData)

}

这种方式每次在父级页面改变值，html页面就会实时更新数据，我暂时用的这种方式，至于有什么bug，我正在研究。

完整的页面代码

html页面

测试damo

请使用支持javascript的浏览器

打印本地的值

点击获取值vue的值

varwpsData;

window.addEventListener('message', function(messageEvent) {var data =messageEvent.data;

console.log('收到vue的数据：',data);

wpsData =data

console.log('wpsData：',wpsData);var aaaaa = '22222'

functionsetData(){

alert(aaaaa)

}functiongetData(){

alert(wpsData)

}

父级页面

export default{

name:'wps-edit',

props: {},

mounted() {

const mapFrame= this.$refs['mainIframe']if (mapFrame.attachEvent) { //兼容浏览器判断

mapFrame.attachEvent('onload', function() {

const iframeWin=mapFrame.contentWindow

iframeWin.postMessage('初始化值', '*')//data传递的参数 *写成子页面的域名或者是ip

})

}else{

mapFrame.οnlοad= function() {

const iframeWin=mapFrame.contentWindow

iframeWin.postMessage('初始化值', '*')

}

}

},

methods: {

loaded() {

const vm= this.$refs.mainIframe.contentWindow.vm

console.log(vm)//vm.func1()

},

getData() {

const obj1= window.frames['mainIframe']//获得对应iframe的window对象

alert(obj1.aaaaa)

},

getWpsData() {return 'wps数据'},

setData(data) {

const obj1= window.frames['mainIframe']//获得对应iframe的window对象

obj1.wpsData = '设置的数据'

}

}

}

结尾

学无止境，还是有很多不知道的，继续精进技术。。。

欢迎大家沟通交流。