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

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

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

通過iframe方式加載本地的vue頁面

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

總共有三種方法吧

iframe方式加載本地的vue頁面的第一種方法

就是直接使用具體的頁面地址：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頁面的第二種方法

跟第一種方法類似，就是將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>

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

iframe方式加載本地的vue頁面的第三種方法

第三種方法跟頁面中用相對路徑引用圖片的方式差不多，就是：…/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>

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

不過注意一下，當在本地打包成功后，在本地進行測試時，會出現(xiàn)嵌入的頁面不是你想要的頁面，而是自己項目的樹形文件結構。

這是正常的，當部署到線上后，就是正常的頁面啦

關于iframe在vue中應用問題

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

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

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

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

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

要強調(diào)的是一定是點擊結束后，即新文章已經(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獲取點擊文章的序號
? ? ?const oIframe = document.getElementsByClassName("el-tabs__content")[0]
? ? ? ?.children;
? ? ?const iframe = oIframe[tab.index].children[0].children[1].children[0];
? ? ?//以上都是找元素節(jié)點iframe的過程可忽略（因為用了v-for所以找起來會有點麻煩）
? ? ?this.$nextTick(function () {
? ? ? ?iframe.style.height =
? ? ? ? ?iframe.contentWindow.document.body.offsetHeight + "px";
? ? ? ? ?//contentWindow中有iframe對應網(wǎng)頁的全部信息，包括windows、document等
? ? ?});
? ?},
?},

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

為了解決這個問題，我又重新回到vue的mounted的函數(shù)，但無論如何也獲取不到body正確的高度，用this.$nextTick{}只會獲取到最終iframe默認的寬高，這時vue的生命周期又失效了，為了找到這個時間點，只能再次求助原生的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é)點iframe的過程可忽略（因為用了v-for所以找起來會有點麻煩）
? ? this.$nextTick(function () {
? ? ? iframe.contentWindow.window.onload = () => {
? ? ? ? if (iframe.contentWindow.document.readyState == "complete") {
? ? ? ? ? iframe.style.height =
? ? ? ? ? ? iframe.contentWindow.document.body.offsetHeight + "px";
? ? ? ? }
? ? ? };
? ? });
? },

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

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

您可能感興趣的文章: