快捷導(dǎo)航

在?Vue?中使用?iframe?嵌套頁面的步驟

更新時(shí)間：2023年05月19日 09:18:09 作者：Zhuang_Z

這篇文章主要介紹了在?Vue?中使用?iframe?嵌套頁面,使用?iframe?技術(shù)可以實(shí)現(xiàn)多個(gè)頁面之間的數(shù)據(jù)傳遞和交互，提高了網(wǎng)站的整體性能和用戶體驗(yàn)，需要的朋友可以參考下

一、嵌入iframe頁面業(yè)務(wù)場(chǎng)景

項(xiàng)目是一個(gè)物流運(yùn)營(yíng)平臺(tái)的管理系統(tǒng)，系統(tǒng)中對(duì)接了第三方的客服系統(tǒng)。因此這里需要在自己的頁面中嵌入三方客服聊天的頁面（這里對(duì)接了智齒）。ps：別問我為什么不自己寫一個(gè)聊天的功能，問就是不知道。

二、iframe是什么

ifram標(biāo)簽規(guī)定了一個(gè)內(nèi)聯(lián)框架，讓我們有可能在當(dāng)前的HTML文檔中嵌入另外一個(gè)文檔，目前所有的主流瀏覽器都支持iframe標(biāo)簽，當(dāng)然為了以防萬一你可以在iframe標(biāo)簽中寫入提示文本，以提示用戶當(dāng)前使用的瀏覽器不支持iframe。

<iframe src="http://www.baidu.com">
    IE：你們都看我干嗎，我現(xiàn)在也是支持的
</iframe>

說白了就是我們?cè)谝粋€(gè)頁面中嵌入另外一個(gè)頁面，一般這個(gè)頁面是獨(dú)立的。

Vue 中使用 iframe 嵌套頁面

1.在 Vue 中引入 iframe

在 Vue 中使用 iframe 技術(shù)需要在組件中引入 iframe 標(biāo)簽，代碼如下：

<template>
  <div>
    <iframe src="https://www.baidu.com"></iframe>
  </div>
</template>

2.設(shè)置 iframe 的樣式

在 Vue 中使用 iframe 技術(shù)需要設(shè)置 iframe 的樣式，包括寬度、高度、邊框等。代碼如下：

<template>
  <div>
    <iframe src="https://www.baidu.com" width="100%" height="500px" frameborder="0"></iframe>
  </div>
</template>

3.在 iframe 中嵌套子頁面

在 Vue 中使用 iframe 技術(shù)可以嵌套子頁面，代碼如下：

<template>
  <div>
    <iframe src="./subpage.html" width="100%" height="500px" frameborder="0"></iframe>
  </div>
</template>

4.在子頁面中設(shè)置數(shù)據(jù)傳遞

在 Vue 中使用 iframe 技術(shù)可以實(shí)現(xiàn)子頁面和父頁面之間的數(shù)據(jù)傳遞，代碼如下：

在子頁面中設(shè)置一個(gè)按鈕，并在點(diǎn)擊按鈕時(shí)向父頁面?zhèn)鬟f數(shù)據(jù)：

<template>
  <div>
    <button @click="sendMessage">發(fā)送消息</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      window.parent.postMessage({ message: 'Hello, parent!' }, '*')
    },
  },
}
</script>

在父頁面中監(jiān)聽子頁面?zhèn)鬟f的數(shù)據(jù)，并進(jìn)行處理：

<template>
  <div>
    <iframe src="./subpage.html" width="100%" height="500px" frameborder="0" @load="loadIframe"></iframe>
  </div>
</template>
<script>
export default {
  methods: {
    loadIframe() {
      const iframe = document.querySelector('iframe')
      iframe.contentWindow.addEventListener('message', (event) => {
        console.log(event.data.message)
      })
    },
  },
}
</script>

以上就是在 Vue 中使用 iframe 技術(shù)嵌套頁面的詳細(xì)步驟。使用 iframe 技術(shù)可以實(shí)現(xiàn)多個(gè)頁面之間的數(shù)據(jù)傳遞和交互，提高了網(wǎng)站的整體性能和用戶體驗(yàn)。

到此這篇關(guān)于在 Vue 中使用 iframe 嵌套頁面的步驟的文章就介紹到這了,更多相關(guān)Vue 使用 iframe 嵌套頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: