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

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

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

項目場景：

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

前言

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

一、內(nèi)嵌iframe

項目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傳參

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

項目b代碼如下：

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

三、接收iframe參數(shù)

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

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

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

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