最近的vue3項目,使用了百度地圖,發現用iframe導.html文件到vue里做開發更加便捷,於是借鑒網上的相關資料總結如下。
1、Vue組件中如何引入iframe?
<template> <div class="act-form"> <iframe :src="src"></iframe> </div> </template> <script> export default { data () { return { src: '你的src' } } } </script>
如上,直接通過添加iframe標簽,src屬性綁定data中的src,第一步引入就完成了
2、vue如何獲取iframe對象以及iframe內的window對象?
在vue中,dom操作比不上jquery的$('#id')來的方便,但是也有辦法,就是通過ref
<template> <div class="act-form"> <iframe :src="src" ref="iframe"></iframe> </div> </template> <script> export default { data () { return { src: '你的src' } }, mounted () { // 這里就拿到了iframe的對象 console.log(this.$refs.iframe) } } </script>
然后就是獲取iframe的window對象,因為只有拿到這個對象才能向iframe中傳東西
<template> <div class="act-form"> <iframe :src="src" ref="iframe"></iframe> </div> </template> <script> export default { data () { return { src: '你的src' } }, mounted () { // 這里就拿到了iframe的對象 console.log(this.$refs.iframe) // 這里就拿到了iframe的window對象 console.log(this.$refs.iframe.contentWindow) } } </script>
3、vue如何向iframe內傳送信息?
通過postMessage,具體關於postMessage是什么,自己去google,
我的理解postMessage是有點類似於UDP協議,就像短信,是異步的,你發信息過去,但是沒有返回值的,只能內部處理完成以后再通過postMessage向外部發送一個消息,外部監聽message 為了讓postMessage像TCP,為了體驗像同步的和實現多通信互不干擾,特別制定的message結構如下
{
cmd: '命令', params: { '鍵1': '值1', '鍵2': '值2' } }
通過cmd來區別這條message的目的
具體代碼如下
<template> <div class="act-form"> <iframe :src="src" ref="iframe"></iframe> <div @click="sendMessage">向iframe發送信息</div> </div> </template> <script> export default { data () { return { src: '你的src', iframeWin: {} } }, methods: { sendMessage () { // 外部vue向iframe內部傳數據 this.iframeWin.postMessage({ cmd: 'getFormJson', params: {} }, '*') }, }, mounted () { // 在外部vue的window上添加postMessage的監聽,並且綁定處理函數handleMessage window.addEventListener('message', this.handleMessage) this.iframeWin = this.$refs.iframe.contentWindow }, handleMessage (event) { // 根據上面制定的結構來解析iframe內部發回來的數據 const data = event.data switch (data.cmd) { case 'returnFormJson': // 業務邏輯 break case 'returnHeight': // 業務邏輯 break } } } </script>
4、iframe內如何向外部vue發送信息?
現在通過點擊“向iframe發送信息”這個按鈕,從外部vue中已經向iframe中發送了一條信息
{
cmd: 'getFormJson', params: {} }
那么iframe內部如何處理這個信息呢?
<!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>
至此內部的收發信息已經解決了,外部的收發也已經解決了,快去解決你的問題吧。