資訊專欄INFORMATION COLUMN
摘要：且中沒有緩存這些消息。查閱了很多資料，后來發(fā)現(xiàn)這又是一坑。在沒有加載完成的情況下，消息自然是發(fā)不到的。解決辦法就是需要的事件寫到的事件中，代碼如下
1、iframe通信
由于項目中有用到vue嵌入靜態(tài)頁面實現(xiàn)功能，vue頁面和普通H5頁面通信就是個問題。這篇文章寫得很詳細https://segmentfault.com/a/11...
但是在開發(fā)過程中還是遇到了一些問題，比如：
iframe發(fā)出跳轉(zhuǎn)消息 ---> vue頁面處理消息，根據(jù)消息跳轉(zhuǎn)至對應(yīng)頁面 ---> 對應(yīng)頁面點擊跳轉(zhuǎn)至原來的vue頁面
如上過程在重復(fù)第二次的時候，從iframe發(fā)出的消息到vue頁面的監(jiān)聽器中，會出現(xiàn)兩次響應(yīng)，且?guī)С龅膬纱蜗⒎謩e為前幾次和本次的，接下來的重復(fù)跳轉(zhuǎn)過程都會有重復(fù)響應(yīng)。
起先，我是懷疑window會緩存消息，因為刷新下頁面，之前的響應(yīng)消息就沒有了，但是找了一大圈也沒有清除window緩存的方法。且localstorage中沒有緩存這些消息。
然后仔細發(fā)現(xiàn)，在打開第二個vue頁面時，第一個vue頁面被銷毀了，再次回到第一個頁面時，其實是重新加載了頁面。我想這是由于vue基于組件來構(gòu)建頁面的原理所造成的，所以再一次構(gòu)建組件時，會向window再次添加監(jiān)聽器。
anyway，解決方法如下：
既然會重復(fù)添加，那就在vue組件銷毀時，刪除window的監(jiān)聽器。
// 在組件生命周期結(jié)束的時候銷毀
beforeDestroy() {
if (window.addEventListener) {
window.removeEventListener("message", this.handleMessage)
} else {
window.detachEvent("message", this.handleMessage)
}
}
下面是添加監(jiān)聽器的代碼
created() {
if (window.addEventListener) {
window.addEventListener("message", this.handleMessage)
} else {
window.attachEvent("message", this.handleMessage)
}
}
2、iframe加載
在向iframe頁面發(fā)送消息時，偶爾會有發(fā)不到iframe的現(xiàn)象。查閱了很多資料，后來發(fā)現(xiàn)這又是一坑。
https://blog.csdn.net/baidu_3...
在iframe沒有加載完成的情況下，消息自然是發(fā)不到iframe的。但是既然發(fā)不到的話也應(yīng)該報個異常啥的，竟然默默的就這樣了，原理以后再解。
解決辦法就是需要postMessage的事件寫到iframe的load事件中，代碼如下：
getDataAndPost() {
requestData().then(res => {
this.$refs.iframe.contentWindow.postMessage(res, "*")
}).catch(function(err) {
console.log(err)
})
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99260.html
摘要：且中沒有緩存這些消息。查閱了很多資料，后來發(fā)現(xiàn)這又是一坑。在沒有加載完成的情況下，消息自然是發(fā)不到的。解決辦法就是需要的事件寫到的事件中，代碼如下 1、iframe通信 由于項目中有用到vue嵌入靜態(tài)頁面實現(xiàn)功能，vue頁面和普通H5頁面通信就是個問題。這篇文章寫得很詳細https://segmentfault.com/a/11... 但是在開發(fā)過程中還是遇到了一些問題，比如：ifra...
摘要：由于該項目是基于原本的安卓，做的微信，所以原來的使用的頁面現(xiàn)在需要在中實現(xiàn)，那就是使用查看了很多很多文檔，其中這一篇是很有價值的下面將天的爬坑最終以問答的方式總結(jié)如下組件中如何引入如何獲取對象以及內(nèi)的對象如何向內(nèi)傳送信息內(nèi)如何向外部發(fā)送信息 由于該項目是基于原本的安卓app，做的微信h5，所以原來的使用webview的頁面現(xiàn)在需要在vue中實現(xiàn)，那就是使用iframe查看了很多很多文檔...
摘要：最近入坑在此過程遇到一些一般教程沒有注意的問題，由此記錄一下。教程看的是技術(shù)胖的免費視頻技術(shù)胖教程。但對我這種半路出家的前端來說，打過幾次也沒成功，又不能不學(xué)，只能在網(wǎng)上找解決方法。 最近入坑Fultter,在此過程遇到一些一般教程沒有注意的問題，由此記錄一下。教程看的是技術(shù)胖的免費視頻 技術(shù)胖Fultter教程。一般情況下按照此教程是可以慢慢把開發(fā)環(huán)境搭好的，但其中遇到如下問題：1....
閱讀 873·2021-11-24 09:38
閱讀 1098·2021-10-08 10:05
閱讀 2594·2021-09-10 11:21
閱讀 2812·2019-08-30 15:53
閱讀 1839·2019-08-30 15:52
閱讀 1979·2019-08-29 12:17
閱讀 3430·2019-08-29 11:21
閱讀 1621·2019-08-26 12:17
