快捷導(dǎo)航

vue3內(nèi)嵌iframe的傳參與接收參數(shù)代碼示例

更新時(shí)間：2023年07月24日 14:53:28 作者：fat_shady

這篇文章主要給大家介紹了關(guān)于vue3內(nèi)嵌iframe的傳參與接收參數(shù)的相關(guān)資料,Vue項(xiàng)目中使用iframe及傳值功能相信有不少人都遇到過(guò),需要的朋友可以參考下

項(xiàng)目場(chǎng)景：

當(dāng)項(xiàng)目a需要用到項(xiàng)目b中的某個(gè)模塊，如項(xiàng)目b中的支付模塊與項(xiàng)目a的支付模塊是通用的，可以使用iframe將項(xiàng)目b內(nèi)嵌在項(xiàng)目a中，達(dá)到代碼功能復(fù)用的效果。

前言

既然兩個(gè)項(xiàng)目中有共通的內(nèi)容就少不了互相通信。核心的兩個(gè)方法是傳值：postMessage() 和接收值：addEventListener()。

一、內(nèi)嵌iframe

項(xiàng)目a代碼如下：

<template>
	<div class="iframe" v-if="payShow">
	  <!--iframeUrl 需要內(nèi)嵌展示的url 傳值可以直接拼接在路徑后 如：https://xxx.com?data='需要傳的參數(shù)'-->
      <iframe id="iframe" :src="iframeUrl" frameborder="0" style="width:100%; height: 100%;"></iframe>
    </div>
</template>

二、iframe傳參

此時(shí)項(xiàng)目a中內(nèi)嵌了iframe展示項(xiàng)目b，項(xiàng)目b中需要點(diǎn)擊關(guān)閉按鈕，將自己在項(xiàng)目a中關(guān)閉，這個(gè)時(shí)候需要項(xiàng)目b點(diǎn)擊事件觸發(fā)時(shí)，將這個(gè)操作響應(yīng)給項(xiàng)目a，所以需要項(xiàng)目b給項(xiàng)目a傳參。使用方法：window.parent.postMessage() , 具體參數(shù)和使用詳細(xì)可以查看官網(wǎng)：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

項(xiàng)目b代碼如下：

const handleBack = () => {
 	let data = {
 		judge: false,
  	}
  	// 傳參
  	window.parent.postMessage(data, '*')
}

三、接收iframe參數(shù)

接收參數(shù)使用方法： addEventListener(事件名稱，執(zhí)行函數(shù)，觸發(fā)類型) 用于向指定元素添加監(jiān)聽事件，配合removeEventListener() 方法來(lái)移除事件。項(xiàng)目a代碼如下：

onMounted(() => {
	// message 該事件通過(guò)或者從對(duì)象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時(shí)觸發(fā)
	window.addEventListener('message',payEvent)
})

const payEvent=(event)=> {
    if (event.data) {
      	payShow.value = event.data.judge
    }
}

onUnmounted(() => {
  	window.removeEventListener('message',payEvent)
})