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