這個(gè)需求一般很少能遇到，只要說(shuō)去了iframe，很多人就會(huì)唾棄。

但是有時(shí)候的確無(wú)法避免使用它，當(dāng)iframe的特性帶來(lái)的優(yōu)勢(shì)遠(yuǎn)遠(yuǎn)高于自己用div模擬的時(shí)候

啥時(shí)候需要用到iframe加載本地的vue文件呢

• 我在寫一個(gè)demo，我需要demo效果模擬在手機(jī)中運(yùn)行。
• 同時(shí)我本地代碼編輯的時(shí)候iframe的內(nèi)容也要同時(shí)更新，否者會(huì)很影響開發(fā)效率。

一開始

我在項(xiàng)目目錄新建了個(gè)iframe.html文件，然后在vue文件的html標(biāo)簽里面新增個(gè)iframe并且把src寫成

/iframe.html，然后通過(guò)BroadcastChannel來(lái)和主頁(yè)面通訊

這個(gè)看起來(lái)沒什么問(wèn)題

問(wèn)題來(lái)了

• 如何導(dǎo)入原來(lái)的jsx或者.vue文件呢？
• 我們編輯jsx或者.vue文件的時(shí)候，如何讓iframe的內(nèi)容實(shí)時(shí)更新呢

上面的實(shí)現(xiàn)方式無(wú)解

iframe嚴(yán)重依賴了src這個(gè)屬性，src必須指向一個(gè)有效的網(wǎng)頁(yè)地址

網(wǎng)頁(yè)地址？vue不是也有路由么？

拿我們寫個(gè)路由，這個(gè)路由的頁(yè)面專門存放iframe要顯示的內(nèi)容，那不就可以了

說(shuō)干就干

路由

{
        path: "/iframe",
        name: "iframe",
        component: DemoIframe,
    },

DemoIframe是存放iframe內(nèi)容的頁(yè)面

在另外個(gè)vue頁(yè)面添加如下內(nèi)容

完美，即使部署到線上也是沒有問(wèn)題的

是想后的效果如下

麻煩的地方

• 是多了一個(gè)路由和一個(gè)頁(yè)面
• 無(wú)法使用pinia這種狀態(tài)管理直接iframe與主窗口的通訊（注可通過(guò)localstore和pinia的插件來(lái)實(shí)現(xiàn)iframe和主頁(yè)面的的pinia通訊），因?yàn)閕frame是沙箱，是個(gè)獨(dú)立的窗口，調(diào)試工具會(huì)看到如下，有2個(gè)應(yīng)用

• 如何解決兩個(gè)app 2份狀態(tài)管理數(shù)據(jù)的問(wèn)題呢，可以使用BroadcastChannel來(lái)同步數(shù)據(jù)，BroadcastChannel的特性是向其他窗口發(fā)送數(shù)據(jù)，自己是無(wú)法接受到自己的數(shù)據(jù)的，所以接受數(shù)據(jù)的代碼不需要區(qū)分自己和其他窗口

方便的地方

• 用上了iframe沙箱的功能，獨(dú)立于主頁(yè)面的窗口，css position：fixed；不會(huì)破壞主頁(yè)面的樣式，也不需要特殊處理

到此這篇關(guān)于vue中通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法的文章就介紹到這了,更多相關(guān)vue iframe加載vue頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論