這個需求一般很少能遇到，只要說去了iframe，很多人就會唾棄。

但是有時候的確無法避免使用它，當(dāng)iframe的特性帶來的優(yōu)勢遠遠高于自己用div模擬的時候

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

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

一開始

我在項目目錄新建了個iframe.html文件，然后在vue文件的html標簽里面新增個iframe并且把src寫成

/iframe.html，然后通過BroadcastChannel來和主頁面通訊

這個看起來沒什么問題

問題來了

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

上面的實現(xiàn)方式無解

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

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

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

說干就干

路由

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

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

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

完美，即使部署到線上也是沒有問題的

是想后的效果如下

麻煩的地方

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

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

方便的地方

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

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

最新評論