vue中如何通過iframe方式加載本地的vue頁(yè)面
通過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è)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā)的方法
這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02vue+iview如何實(shí)現(xiàn)拼音、首字母、漢字模糊搜索
這篇文章主要介紹了vue+iview如何實(shí)現(xiàn)拼音、首字母、漢字模糊搜索,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04vue3+ts+axios+pinia實(shí)現(xiàn)無感刷新方式
這篇文章主要介紹了vue3+ts+axios+pinia實(shí)現(xiàn)無感刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04vue使用element-ui的el-date-picker設(shè)置樣式無效的解決
本文主要介紹了vue使用element-ui的el-date-picker設(shè)置樣式無效的解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03vue 實(shí)現(xiàn)input表單元素的disabled示例
今天小編就為大家分享一篇vue 實(shí)現(xiàn)input表單元素的disabled示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10前端Vue頁(yè)面中展示本地圖片簡(jiǎn)單代碼示例
今天遇到一個(gè)在vue文件中引入本地圖片的問題,于是有了這篇文章,本文主要給大家介紹了關(guān)于前端Vue頁(yè)面中展示本地圖片的相關(guān)資料,需要的朋友可以參考下2023-12-12