資訊專欄INFORMATION COLUMN
摘要：由于該項目是基于原本的安卓，做的微信，所以原來的使用的頁面現(xiàn)在需要在中實現(xiàn)，那就是使用查看了很多很多文檔，其中這一篇是很有價值的下面將天的爬坑最終以問答的方式總結(jié)如下組件中如何引入如何獲取對象以及內(nèi)的對象如何向內(nèi)傳送信息內(nèi)如何向外部發(fā)送信息
由于該項目是基于原本的安卓app，做的微信h5，所以原來的使用webview的頁面現(xiàn)在需要在vue中實現(xiàn)，那就是使用iframe
查看了很多很多文檔，其中這一篇是很有價值的 https://gist.github.com/pboji...
下面將3天的爬坑最終以問答的方式總結(jié)如下：
1、Vue組件中如何引入iframe？
2、vue如何獲取iframe對象以及iframe內(nèi)的window對象？
3、vue如何向iframe內(nèi)傳送信息？
4、iframe內(nèi)如何向外部vue發(fā)送信息？
1、Vue組件中如何引入iframe？
如上，直接通過添加iframe標(biāo)簽，src屬性綁定data中的src，第一步引入就完成了
2、vue如何獲取iframe對象以及iframe內(nèi)的window對象？
在vue中，dom操作比不上jquery的$("#id")來的方便，但是也有辦法，就是通過ref
然后就是獲取iframe的window對象，因為只有拿到這個對象才能向iframe中傳東西
3、vue如何向iframe內(nèi)傳送信息？
通過postMessage，具體關(guān)于postMessage是什么，自己去google， 我的理解postMessage是有點類似于UDP協(xié)議，就像短信，是異步的，你發(fā)信息過去，但是沒有返回值的，只能內(nèi)部處理完成以后再通過postMessage向外部發(fā)送一個消息，外部監(jiān)聽message 為了讓postMessage像TCP，為了體驗像同步的和實現(xiàn)多通信互不干擾，特別制定的message結(jié)構(gòu)如下
{
cmd: "命令",
params: {
"鍵1": "值1",
"鍵2": "值2"
}
}
通過cmd來區(qū)別這條message的目的
具體代碼如下
向iframe發(fā)送信息
4、iframe內(nèi)如何向外部vue發(fā)送信息？
現(xiàn)在通過點擊“向iframe發(fā)送信息”這個按鈕，從外部vue中已經(jīng)向iframe中發(fā)送了一條信息
{
cmd: "getFormJson",
params: {}
}
那么iframe內(nèi)部如何處理這個信息呢？
iframe Window
Hello there, i"m an iframe
至此內(nèi)部的收發(fā)信息已經(jīng)解決了，外部的收發(fā)也已經(jīng)解決了，快去解決你的問題吧
在這里先直接給出我項目的源碼
