前言
项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以html的方式调用，
所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。
到这里我就遇到了一个问题，那就是vue项目中iframe的传值问题，这里做个笔记防止之后忘记，
如果有其他的方式，欢迎大家交流，不胜感激。
正文
先写几个简易的demo
需要用到的html
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>测试damo</title>
</head>
<body>
<noscript>
<strong>请使用支持javascript的浏览器</strong>
</noscript>
<div id="app">1213123111220980980</div>
<button onclick="setData()">打印本地的值</button>
<button onclick="getData()">点击获取值vue的值</button>
</body>
<script>
var wpsData;
var aaaaa = '22222'
function setData(){
alert(aaaaa)
}
function getData(){
alert(wpsData)
}
</script>
</html>
父级页面用iframe调用html
<template>
<div>
<div>在线文档编译组件</div>
<el-button @click="getData()">点击获取iframe数据</el-button>
<el-button @click="setData('我是vue数据')">向iframe中发送数据</el-button>
<iframe id="mainIframe" ref="mainIframe" name="mainIframe" src="./test.html" frameborder="0" scrolling="auto" @load="loaded" />
</div>
</template>
<script>
export default {
name: 'wps-edit',
props: { },
mounted() {
},
methods: {
getData() {
},
setData(data) {
}
}
}
</script>
<style lang="scss" scoped></style>
这里提供两种传值方式：
第一种：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页面
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>测试damo</title>
</head>
<body>
<noscript>
<strong>请使用支持javascript的浏览器</strong>
</noscript>
<div id="app">1213123111220980980</div>
<button onclick="setData()">打印本地的值</button>
<button onclick="getData()">点击获取值vue的值</button>
</body>
<script>
var wpsData;
window.addEventListener('message', function(messageEvent) {
var data = messageEvent.data;
console.log('收到vue的数据：',data);
wpsData = data
console.log('wpsData：',wpsData);var aaaaa = '22222'
function setData(){
alert(aaaaa)
}
function getData(){
alert(wpsData)
}
</script>
</html>
父级页面
<template>
<div>
<div>在线文档编译组件</div>
<el-button @click="getData()">点击获取iframe数据</el-button>
<el-button @click="setData('我是vue数据')">向iframe中发送数据</el-button>
<iframe id="mainIframe" ref="mainIframe" name="mainIframe" src="./test.html" frameborder="0" scrolling="auto" @load="loaded" />
</div>
</template>
<script>
// 工具类
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.onload = 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 = '设置的数据'
}
}
}
</script>
<style lang="scss" scoped></style>
结尾
学无止境，还是有很多不知道的，继续精进技术。。。
欢迎大家沟通交流。