前言
項目需要，我需要引入一個已經封裝好的瀏覽器插件。插件只能以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>
結尾
學無止境，還是有很多不知道的，繼續精進技術。。。
歡迎大家溝通交流。