前端--iframe爬坑記錄

nanchen2251 發(fā)布于2019-08-02 12:01 / 953人閱讀

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

1、iframe通信

由于項(xiàng)目中有用到vue嵌入靜態(tài)頁(yè)面實(shí)現(xiàn)功能，vue頁(yè)面和普通H5頁(yè)面通信就是個(gè)問(wèn)題。這篇文章寫得很詳細(xì)https://segmentfault.com/a/11...

但是在開(kāi)發(fā)過(guò)程中還是遇到了一些問(wèn)題，比如：
iframe發(fā)出跳轉(zhuǎn)消息 ---> vue頁(yè)面處理消息，根據(jù)消息跳轉(zhuǎn)至對(duì)應(yīng)頁(yè)面 ---> 對(duì)應(yīng)頁(yè)面點(diǎn)擊跳轉(zhuǎn)至原來(lái)的vue頁(yè)面
如上過(guò)程在重復(fù)第二次的時(shí)候，從iframe發(fā)出的消息到vue頁(yè)面的監(jiān)聽(tīng)器中，會(huì)出現(xiàn)兩次響應(yīng)，且?guī)С龅膬纱蜗⒎謩e為前幾次和本次的，接下來(lái)的重復(fù)跳轉(zhuǎn)過(guò)程都會(huì)有重復(fù)響應(yīng)。

起先，我是懷疑window會(huì)緩存消息，因?yàn)樗⑿孪马?yè)面，之前的響應(yīng)消息就沒(méi)有了，但是找了一大圈也沒(méi)有清除window緩存的方法。且localstorage中沒(méi)有緩存這些消息。
然后仔細(xì)發(fā)現(xiàn)，在打開(kāi)第二個(gè)vue頁(yè)面時(shí)，第一個(gè)vue頁(yè)面被銷毀了，再次回到第一個(gè)頁(yè)面時(shí)，其實(shí)是重新加載了頁(yè)面。我想這是由于vue基于組件來(lái)構(gòu)建頁(yè)面的原理所造成的，所以再一次構(gòu)建組件時(shí)，會(huì)向window再次添加監(jiān)聽(tīng)器。

anyway，解決方法如下：
既然會(huì)重復(fù)添加，那就在vue組件銷毀時(shí)，刪除window的監(jiān)聽(tīng)器。

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

下面是添加監(jiān)聽(tīng)器的代碼

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

2、iframe加載

在向iframe頁(yè)面發(fā)送消息時(shí)，偶爾會(huì)有發(fā)不到iframe的現(xiàn)象。查閱了很多資料，后來(lái)發(fā)現(xiàn)這又是一坑。
https://blog.csdn.net/baidu_3...
在iframe沒(méi)有加載完成的情況下，消息自然是發(fā)不到iframe的。但是既然發(fā)不到的話也應(yīng)該報(bào)個(gè)異常啥的，竟然默默的就這樣了，原理以后再解。

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

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