<template>
<div class="act-form">
<iframe
:src="src"
ref="iframe"
frameborder="no"
align="middle"
width="100%"
height="600px"
scrolling="auto" />
<el-button @click="sendMessage">向iframe發送信息</el-button>
</div>
</template>
<script>
export default {
data () {
return {
src: '',
iframeWin: null,
isLoaded: false
}
},
created () {
this.src = 'http://odp.oa.com'
//獲取iframe
var oIframe=document.getElementsByTagName('iframe')[0];
//獲取iframe中的元素
var oText=oIframe.contentWindow.document.getElementById('navContent');
//改變iframe中元素的屬性
oIframe.contentWindow.document.getElementById('navContent').style.color='red';
},
mounted () {
// 在外部vue的window上添加postMessage的監聽，並且綁定處理函數handleMessage
window.addEventListener('message', this.handleMessage)
this.iframeWin = this.$refs.iframe.contentWindow
},
methods: {
sendMessage () {
console.log(this.iframeWin, 1111111)
this.iframeWin.postMessage({
cmd: 'getFormJson',
params: {}
}, '*')
},
async handleMessage (event) {
// console.log(event, 222222)
const data = event.data
// console.log(data, 333333)
switch (data.cmd) {
case 'returnFormJson':
break
case 'returnHeight':
break
}
},
async enroll (data) {
console.log('4444444')
}
}
}
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iframe Window</title>
<style>
body {
background-color: #D53C2F;
color: white;
}
</style>
</head>
<body>
<h1>Hello there, i'm an iframe</h1>
<script>
// 向父vue頁面發送信息
window.parent.postMessage({
cmd: 'returnHeight',
params: {
success: true,
data: document.body.scrollHeight + 'px'
}
}, '*')
// 接受父頁面發來的信息
window.addEventListener('message', function (event) {
var data = event.data
switch (data.cmd) {
case 'getFormJson':
// 處理業務邏輯
break
}
})
</script>
</body>
</html>
其他案例：
<template> <iframe v-if="$route.query.src" :src='$route.query.src' class="iframe" ref="iframe"></iframe> <iframe v-else :src="urlPath" class="iframe" ref="iframe"></iframe> </template> <script> import { mapState, mapGetters } from 'vuex' import NProgress from 'nprogress' // progress bar import 'nprogress/nprogress.css' // progress bar style export default { name: 'nxframe', data() { return { urlPath: this.getUrlPath() // iframe src 路徑 } }, created() { NProgress.configure({ showSpinner: false }) }, mounted() { this.load() this.resize() }, props: ['routerPath'], watch: { $route: function() { this.load() }, routerPath: function(val) { // 監聽routerPath變化，改變src路徑 this.urlPath = this.getUrlPath() } }, components: { ...mapGetters(['tagList']), tagListNum: function() { return this.tagList.length !== 0 }, ...mapState({ name: state => state.user.name }) }, methods: { // 顯示等待框 show() { NProgress.start() }, // 隱藏等待狂 hide() { NProgress.done() }, // 加載瀏覽器窗口變化自適應 resize() { window.onresize = () => { this.iframeInit() } }, // 加載組件 load() { this.show() var flag = true // URL是否包含問號 if (this.$route.query.src.indexOf('?') === -1) { flag = false } var list = [] for (var key in this.$route.query) { if (key !== 'src' && key !== 'name') { list.push(`${key}= this.$route.query[key]`) } } list = list.join('&').toString() if (flag) { this.$route.query.src = `${this.$route.query.src}${ list.length > 0 ? `&list` : '' }` } else { this.$route.query.src = `${this.$route.query.src}${ list.length > 0 ? `?list` : '' }` } // 超時3s自動隱藏等待狂，加強用戶體驗 let time = 3 const timeFunc = setInterval(() => { time-- if (time === 0) { this.hide() clearInterval(timeFunc) } }, 1000) this.iframeInit() }, // iframe窗口初始化 iframeInit() { const iframe = this.$refs.iframe const clientHeight = document.documentElement.clientHeight - 200 iframe.style.height = `${clientHeight}px` if (iframe.attachEvent) { iframe.attachEvent('onload', () => { this.hide() }) } else { iframe.onload = () => { this.hide() } } }, getUrlPath: function() { // 獲取 iframe src 路徑 let url = window.location.href url = url.replace('/myiframe', '') return url } } } </script> <style lang="scss"> .iframe { width: 100%; height: 100%; border: 0; overflow: hidden; box-sizing: border-box; } </style>