vue中通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法

更新時(shí)間：2023年06月14日 09:03:32 作者：陸康永

這篇文章主要給大家介紹了在vue中如何通過(guò)iframe方式加載本地的vue頁(yè)面的解決方法，文中有詳細(xì)的解決流程,需要的朋友可以參考下

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

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

一開(kāi)始

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

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

這個(gè)看起來(lái)沒(mé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)容

完美，即使部署到線上也是沒(mé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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: