一晃又是半年，半年又半年疟呐，坑了又有坑脚曾，人生啊，也許就是這樣吧ㄟ( ▔, ▔ )ㄏ启具，讓我放下?tīng)C手的磚頭本讥，慢慢吹逼。
這次的坑是，公司想想要給多個(gè)管理后臺(tái)做一個(gè)統(tǒng)一的登錄門(mén)戶(hù)拷沸，然后各個(gè)后臺(tái)之間的服務(wù)不同色查，所以對(duì)應(yīng)的域名也不一樣，而之前的模式設(shè)計(jì)的登錄信息都是存在localStorage撞芍、sessionStorage里面的秧了，這可難為死老夫了(╯‵□′)╯︵┻━┻。
我們知道序无，同源策略蛋疼的很,js cookie验毡、localStorage、sessionStorage都無(wú)法繞過(guò)同源策略的限制帝嗡，那么現(xiàn)在要想通信難道只能帶參數(shù)在url里面晶通？太傻了(╯‵□′)╯︵┻━┻，雖然這也是一個(gè)方案哟玷，但是在信息很多的時(shí)候狮辽，那長(zhǎng)長(zhǎng)的鏈接真讓人欲仙欲死，后來(lái)巢寡，在問(wèn)度娘問(wèn)了很久之后喉脖，終于找到了一個(gè)閃光點(diǎn)：postMessage，就是它：
但抑月！是树叽！當(dāng)我仔細(xì)研究的時(shí)候，發(fā)現(xiàn)了令人絕望的一點(diǎn)：”兩個(gè)頁(yè)面的模數(shù)?Document.domain設(shè)置為相同的值) 時(shí)爪幻，這兩個(gè)腳本才能相互通信“菱皆。 what？那有個(gè)雞毛用挨稿？(╯‵□′)╯︵┻━┻仇轻，又是番蛋疼的思考，正當(dāng)我準(zhǔn)備去忽悠運(yùn)維老哥弄子域的時(shí)候奶甘，突然一瞬間思維的閃光篷店，讓我忽然開(kāi)朗，如沐春風(fēng)臭家，醍醐灌頂疲陕，反正就是爽。钉赁。蹄殃。為什么我不能在當(dāng)前頁(yè)面里面嵌入一個(gè)iframe然后鏈到我的目標(biāo)頁(yè)面去呢？我擦你踩，說(shuō)干就干诅岩！最終讳苦，本大俠還是解決了這個(gè)問(wèn)題，并且問(wèn)了很多朋友大牛吩谦，目前已經(jīng)將該方案整理成簡(jiǎn)單sdk的行駛了鸳谜，撒花~~~
～(￣▽?zhuān)?(～￣▽?zhuān)?～
如果這時(shí)候，我要是完結(jié)了式廷，估計(jì)要被大家拿板凳砸死咐扭，本著不甩金水不罷休的原則，我把這次心得和遇到的坑總結(jié)起來(lái)滑废，至于sdk蝗肪，就不給了，自己研究去吧：
場(chǎng)景：我現(xiàn)在有兩個(gè)頁(yè)面需要通信：
A頁(yè)面：https://a.xxx.com
B頁(yè)面：https://b.eee.com
先甩點(diǎn)postMessage的使用方式：
1策严、window.postMessage()
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow：其他窗口的一個(gè)引用（在這里我使用了iframe的contentWindow屬性）
message：將要發(fā)送到其他window的數(shù)據(jù)（可以不受限制的將數(shù)據(jù)對(duì)象安全的傳送給目標(biāo)窗口而無(wú)需自己序列化穗慕，原因是因?yàn)椴捎昧?a target="_blank">結(jié)構(gòu)化克隆算法）
targetOrigin：接收信息的URL（在這里我當(dāng)然填的B頁(yè)面的URL）
transfer：可選參數(shù)（在這里我沒(méi)使用）
2、window.addEventListener('message', receiveMessage, false)
target.addEventListener(type, listener, options);
type：表示監(jiān)聽(tīng)事件類(lèi)型的字符串
listener：當(dāng)所監(jiān)聽(tīng)的事件類(lèi)型觸發(fā)時(shí)妻导，會(huì)通知的一個(gè)對(duì)象或者一個(gè)函數(shù)
potions：可選參數(shù)（在此我用false，表示在listener被調(diào)用之后不會(huì)自動(dòng)移除）
具體參考：addEventListener-MDN
扯回來(lái)怀各，那么現(xiàn)在想要使用這個(gè)通信倔韭，怎么通信呢？
以A頁(yè)面向B頁(yè)面?zhèn)鬟f數(shù)據(jù)為例瓢对，那么我們需要在A頁(yè)面先嵌入一個(gè)iframe寿酌，這個(gè)iframe的鏈接可以是B頁(yè)面的地址，也就是b.eee.com硕蛹，這樣醇疼，在A頁(yè)面里面就有：
otherWindow.postMessage(data, 'https://b.eee.com'),第三個(gè)參數(shù)反正我是沒(méi)用到。法焰。
在B頁(yè)面里面的接收：
代碼可能就是這么多秧荆，但是實(shí)際動(dòng)起手來(lái)，那個(gè)坑呀埃仪，真的是源源不絕乙濒。接下來(lái)干貨都甩給你們了，喜歡就點(diǎn)個(gè)贊吧卵蛉。颁股。。
注意點(diǎn)Ｉ邓俊８视小！
1葡缰、event.origin中的origin不能保證是該窗口的當(dāng)前origin或者未來(lái)origin亏掀，因?yàn)閜ostMessage被調(diào)用后忱反，可能會(huì)被導(dǎo)航到不同的位置，所以需要做個(gè)異常情況判斷處理origin !== 'https://a.xxx.com'幌氮；
2缭受、一定要等A頁(yè)面嵌入的B頁(yè)面加載完成之后，再進(jìn)行postMessage跨域通信（參考iframe.onload）
3该互、關(guān)于otherWindow米者，這個(gè)相當(dāng)重要，到底這個(gè)otherWindow是啥宇智？
始終是你需要通信的目標(biāo)窗口
就是蔓搞，
例如，A頁(yè)面向B頁(yè)面發(fā)送跨域信息随橘，otherWindow就是在A頁(yè)面中嵌入的iframe指向的B頁(yè)面的window喂分，即：iframe.contentWindow，呢么B頁(yè)面接收的時(shí)候就是他自己机蔗，即window蒲祈。
到此，所有的坑點(diǎn)應(yīng)該都列舉完了萝嘁，至于sdk梆掸，建議動(dòng)態(tài)標(biāo)簽，具體的大家自己玩去吧牙言。酸钦。。
再送上一些其他老哥總結(jié)出來(lái)的頁(yè)面通信方案咱枉，包括同域卑硫、子域和跨域：http://www.pianshen.com/article/1733333895/
最后，感謝這個(gè)老姐的文章：https://segmentfault.com/a/1190000014882611
