vue中如何通過iframe方式加載本地的vue頁(yè)面

更新時(shí)間：2022年09月13日 09:33:08 作者：tianyue_yuan

這篇文章主要介紹了vue中如何通過iframe方式加載本地的vue頁(yè)面，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

通過iframe方式加載本地的vue頁(yè)面

也是在實(shí)際的項(xiàng)目中碰到一個(gè)奇葩的需求，用vue，居然還要用到iframe，真是腦殼大，試了好多次最后才找到了正確的方法。

總共有三種方法吧

iframe方式加載本地的vue頁(yè)面的第一種方法

就是直接使用具體的頁(yè)面地址：http://127.0.0.1:8080/Index

<iframe
? src="http://127.0.0.1:8080/Index"
? id="frames"
? frameborder="0"
? sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
? style="height: 100%; width: 100%"
></iframe>

iframe方式加載本地的vue頁(yè)面的第二種方法

跟第一種方法類似，就是將127改為了localhost

<iframe
? src="http://localhost:8080/Index"
? id="frames"
? frameborder="0"
? sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
? style="height: 100%; width: 100%"
></iframe>

不過，注意一下，第一種和第二種方法只能在本地訪問時(shí)生效，當(dāng)打包部署到線上后，就會(huì)出現(xiàn)頁(yè)面找不到的問題，不能部署那用處少了太多，這時(shí)要用第三種方法

iframe方式加載本地的vue頁(yè)面的第三種方法

第三種方法跟頁(yè)面中用相對(duì)路徑引用圖片的方式差不多，就是：…/index，這里的路徑的路由中的路徑

<iframe
? src="../index"
? id="frames"
? frameborder="0"
? sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
? style="height: 100%; width: 100%"
></iframe>
// 或者是像這樣的路徑
<iframe
? src="../#/index"
? id="frames"
? frameborder="0"
? sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
? style="height: 100%; width: 100%"
></iframe>

像第三種方法，就可以實(shí)現(xiàn)在打包部署在線上時(shí)，正確訪問到相應(yīng)的頁(yè)面。

不過注意一下，當(dāng)在本地打包成功后，在本地進(jìn)行測(cè)試時(shí)，會(huì)出現(xiàn)嵌入的頁(yè)面不是你想要的頁(yè)面，而是自己項(xiàng)目的樹形文件結(jié)構(gòu)。

這是正常的，當(dāng)部署到線上后，就是正常的頁(yè)面啦

關(guān)于iframe在vue中應(yīng)用問題

背景是一個(gè)vue3.0的個(gè)人博客，由于沒有支持vue3.0的md展示手段（具體是vue-template-compiler版本太低目前最高2.6.12，而要求vue必須與其版本相同），所以我的解決方法是先將md文件轉(zhuǎn)換成html文件然后由iframe直接導(dǎo)入頁(yè)面。

iframe的寬高無法根據(jù)內(nèi)容撐開

網(wǎng)上查閱了許多解決方法（其中多數(shù)是講iframe自適應(yīng)頁(yè)面而非自適應(yīng)內(nèi)容），但基本思路都是***獲取到iframe 內(nèi)容的body寬高，重新賦值給iframe本身，但問題就出在***什么時(shí)候獲取iframe寬高，vue的生命周期在iframe中完全失效，于是我的解決思路如下

首先利用點(diǎn)擊文章列表這一過程，在每次點(diǎn)擊后獲取iframe body的寬高賦值給iframe本身

<iframe
?style="width: 100%; height: 100%"
?scrolling="no"
?class="iframe"
?:src="item.path"
?frameborder="0"
></iframe>

要強(qiáng)調(diào)的是一定是點(diǎn)擊結(jié)束后，即新文章已經(jīng)顯示后才能后去到body的寬高

如果你也用了ui組件提供的click回調(diào)函數(shù)，并在其中做這件事，一定要使用this.$nextTick{}將你要做的事放到回調(diào)的最后執(zhí)行

methods: {
//ui組件給的回調(diào)
? ?handleClick(tab, event) {
? ?//參數(shù)詳見elemntui的tabs，這里只用到了tab.index獲取點(diǎn)擊文章的序號(hào)
? ? ?const oIframe = document.getElementsByClassName("el-tabs__content")[0]
? ? ? ?.children;
? ? ?const iframe = oIframe[tab.index].children[0].children[1].children[0];
? ? ?//以上都是找元素節(jié)點(diǎn)iframe的過程可忽略（因?yàn)橛昧藇-for所以找起來會(huì)有點(diǎn)麻煩）
? ? ?this.$nextTick(function () {
? ? ? ?iframe.style.height =
? ? ? ? ?iframe.contentWindow.document.body.offsetHeight + "px";
? ? ? ? ?//contentWindow中有iframe對(duì)應(yīng)網(wǎng)頁(yè)的全部信息，包括windows、document等
? ? ?});
? ?},
?},

現(xiàn)在，點(diǎn)擊文章列表的單個(gè)文章，文章的大小應(yīng)該已經(jīng)正常了，但頁(yè)面首次加載時(shí)默認(rèn)文章大小怎么辦呢（我曾想過調(diào)用一次點(diǎn)擊函數(shù)來模擬點(diǎn)擊一次默認(rèn)文章，但ui組件讓我沒有這個(gè)機(jī)會(huì)，后來想想這也確實(shí)不是什么好方法）

為了解決這個(gè)問題，我又重新回到vue的mounted的函數(shù)，但無論如何也獲取不到body正確的高度，用this.$nextTick{}只會(huì)獲取到最終iframe默認(rèn)的寬高，這時(shí)vue的生命周期又失效了，為了找到這個(gè)時(shí)間點(diǎn)，只能再次求助原生的dom了

mounted() {
? ? const oIframe = document.getElementsByClassName("el-tabs__content")[0]
? ? ? .children;
? ? //該處dom操作的耦合性較高，待優(yōu)化
? ? const iframe = oIframe[0].children[0].children[1].children[0];
? ? //以上都是找元素節(jié)點(diǎn)iframe的過程可忽略（因?yàn)橛昧藇-for所以找起來會(huì)有點(diǎn)麻煩）
? ? this.$nextTick(function () {
? ? ? iframe.contentWindow.window.onload = () => {
? ? ? ? if (iframe.contentWindow.document.readyState == "complete") {
? ? ? ? ? iframe.style.height =
? ? ? ? ? ? iframe.contentWindow.document.body.offsetHeight + "px";
? ? ? ? }
? ? ? };
? ? });
? },

這個(gè)時(shí)間點(diǎn)很玄學(xué)，所以確切的說是點(diǎn)擊文章列表后iframe完全加載完成后，才能獲取到body的寬高，否則即使能夠獲取到body標(biāo)簽而且body內(nèi)容都已加載完成，body的offsetHeight依然是0，最后我找到了iframe.contentWindow.document.readyState == "complete"這個(gè)代表iframe頁(yè)面加載完成的標(biāo)志，在其為”complete“后馬上獲取body的寬高，賦值，即可

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: