前端--iframe爬坑記錄

CntChen 發布于2019-08-23 13:10 / 2874人閱讀

摘要：且中沒有緩存這些消息。查閱了很多資料，后來發現這又是一坑。在沒有加載完成的情況下，消息自然是發不到的。解決辦法就是需要的事件寫到的事件中，代碼如下

1、iframe通信

由于項目中有用到vue嵌入靜態頁面實現功能，vue頁面和普通H5頁面通信就是個問題。這篇文章寫得很詳細https://segmentfault.com/a/11...

但是在開發過程中還是遇到了一些問題，比如：
iframe發出跳轉消息 ---> vue頁面處理消息，根據消息跳轉至對應頁面 ---> 對應頁面點擊跳轉至原來的vue頁面
如上過程在重復第二次的時候，從iframe發出的消息到vue頁面的監聽器中，會出現兩次響應，且帶出的兩次消息分別為前幾次和本次的，接下來的重復跳轉過程都會有重復響應。

起先，我是懷疑window會緩存消息，因為刷新下頁面，之前的響應消息就沒有了，但是找了一大圈也沒有清除window緩存的方法。且localstorage中沒有緩存這些消息。
然后仔細發現，在打開第二個vue頁面時，第一個vue頁面被銷毀了，再次回到第一個頁面時，其實是重新加載了頁面。我想這是由于vue基于組件來構建頁面的原理所造成的，所以再一次構建組件時，會向window再次添加監聽器。

anyway，解決方法如下：
既然會重復添加，那就在vue組件銷毀時，刪除window的監聽器。

// 在組件生命周期結束的時候銷毀
beforeDestroy() {
    if (window.addEventListener) {
        window.removeEventListener("message", this.handleMessage)
    } else {
        window.detachEvent("message", this.handleMessage)
    }
}

下面是添加監聽器的代碼

created() {
    if (window.addEventListener) {
        window.addEventListener("message", this.handleMessage)
    } else {
        window.attachEvent("message", this.handleMessage)
    }
}

2、iframe加載

在向iframe頁面發送消息時，偶爾會有發不到iframe的現象。查閱了很多資料，后來發現這又是一坑。
https://blog.csdn.net/baidu_3...
在iframe沒有加載完成的情況下，消息自然是發不到iframe的。但是既然發不到的話也應該報個異常啥的，竟然默默的就這樣了，原理以后再解。

解決辦法就是需要postMessage的事件寫到iframe的load事件中，代碼如下：

getDataAndPost() {
    requestData().then(res => {
      this.$refs.iframe.contentWindow.postMessage(res, "*")
    }).catch(function(err) {
      console.log(err)
    })
}

GPU云服務器云服務器爬坑篇爬坑記爬坑 ifram

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99260.html

前端--iframe爬坑記錄

摘要：且中沒有緩存這些消息。查閱了很多資料，后來發現這又是一坑。在沒有加載完成的情況下，消息自然是發不到的。解決辦法就是需要的事件寫到的事件中，代碼如下 1、iframe通信由于項目中有用到vue嵌入靜態頁面實現功能，vue頁面和普通H5頁面通信就是個問題。這篇文章寫得很詳細https://segmentfault.com/a/11... 但是在開發過程中還是遇到了一些問題，比如：ifra...

nanchen2251 2019-08-02 12:01 評論0 收藏0
前端爬坑日記之vue內嵌iframe并跨域通信

摘要：由于該項目是基于原本的安卓，做的微信，所以原來的使用的頁面現在需要在中實現，那就是使用查看了很多很多文檔，其中這一篇是很有價值的下面將天的爬坑最終以問答的方式總結如下組件中如何引入如何獲取對象以及內的對象如何向內傳送信息內如何向外部發送信息由于該項目是基于原本的安卓app，做的微信h5，所以原來的使用webview的頁面現在需要在vue中實現，那就是使用iframe查看了很多很多文檔...

dreambei 2019-08-23 11:42 評論0 收藏0
初入 Flutter 的爬坑過程（Windows10）

摘要：最近入坑在此過程遇到一些一般教程沒有注意的問題，由此記錄一下。教程看的是技術胖的免費視頻技術胖教程。但對我這種半路出家的前端來說，打過幾次也沒成功，又不能不學，只能在網上找解決方法。最近入坑Fultter,在此過程遇到一些一般教程沒有注意的問題，由此記錄一下。教程看的是技術胖的免費視頻技術胖Fultter教程。一般情況下按照此教程是可以慢慢把開發環境搭好的，但其中遇到如下問題：1....

IamDLY 2019-08-23 18:04 評論0 收藏0
peewee爬坑

摘要：代碼示例用戶基本信息用戶名在視圖函數更新數據更新只有調用字段的值才會在改變項目使用的，使用了語法數據庫遷移管理，文檔，文檔 peewee update_time字段爬坑 SQLalchemy中BaseModel定義: # -*- coding:utf-8 -*- from datetime import datetime from sqlalchemy import Column, D...

ashe 2019-06-26 17:50 評論0 收藏0