一晃又是半年,半年又半年,坑了又有坑,人生啊,也许就是这样吧ㄟ( ▔, ▔ )ㄏ,让我放下烫手的砖头,慢慢吹逼。
这次的坑是,公司想想要给多个管理后台做一个统一的登录门户,然后各个后台之间的服务不同,所以对应的域名也不一样,而之前的模式设计的登录信息都是存在localStorage、sessionStorage里面的,这可难为死老夫了(╯‵□′)╯︵┻━┻。
我们知道,同源策略蛋疼的很,js cookie、localStorage、sessionStorage都无法绕过同源策略的限制,那么现在要想通信难道只能带参数在url里面?太傻了(╯‵□′)╯︵┻━┻,虽然这也是一个方案,但是在信息很多的时候,那长长的链接真让人欲仙欲死,后来,在问度娘问了很久之后,终于找到了一个闪光点:postMessage,就是它:
但!是!当我仔细研究的时候,发现了令人绝望的一点:”两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信“。 what?那有个鸡毛用?(╯‵□′)╯︵┻━┻,又是番蛋疼的思考,正当我准备去忽悠运维老哥弄子域的时候,突然一瞬间思维的闪光,让我忽然开朗,如沐春风,醍醐灌顶,反正就是爽。。。为什么我不能在当前页面里面嵌入一个iframe然后链到我的目标页面去呢?我擦,说干就干!最终,本大侠还是解决了这个问题,并且问了很多朋友大牛,目前已经将该方案整理成简单sdk的行驶了,撒花~~~
~( ̄▽ ̄~)(~ ̄▽ ̄)~
如果这时候,我要是完结了,估计要被大家拿板凳砸死,本着不甩金水不罢休的原则,我把这次心得和遇到的坑总结起来,至于sdk,就不给了,自己研究去吧:
场景:我现在有两个页面需要通信:
A页面:https://a.xxx.com
B页面:https://b.eee.com
先甩点postMessage的使用方式:
1、window.postMessage()
otherWindow.postMessage(message, targetOrigin, [transfer]);
otherWindow:其他窗口的一个引用(在这里我使用了iframe的contentWindow属性)
message:将要发送到其他window的数据(可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化,原因是因为采用了结构化克隆算法)
targetOrigin:接收信息的URL(在这里我当然填的B页面的URL)
transfer:可选参数(在这里我没使用)
具体参考:window.postMessage()-MDN
2、window.addEventListener('message', receiveMessage, false)
target.addEventListener(type, listener, options);
type:表示监听事件类型的字符串
listener:当所监听的事件类型触发时,会通知的一个对象或者一个函数
potions:可选参数(在此我用false,表示在listener被调用之后不会自动移除)
具体参考:addEventListener-MDN
扯回来,那么现在想要使用这个通信,怎么通信呢?
以A页面向B页面传递数据为例,那么我们需要在A页面先嵌入一个iframe,这个iframe的链接可以是B页面的地址,也就是b.eee.com,这样,在A页面里面就有:
otherWindow.postMessage(data, 'https://b.eee.com'),第三个参数反正我是没用到。。
在B页面里面的接收:
代码可能就是这么多,但是实际动起手来,那个坑呀,真的是源源不绝。接下来干货都甩给你们了,喜欢就点个赞吧。。。
注意点!!!
1、event.origin中的origin不能保证是该窗口的当前origin或者未来origin,因为postMessage被调用后,可能会被导航到不同的位置,所以需要做个异常情况判断处理origin !== 'https://a.xxx.com';
2、一定要等A页面嵌入的B页面加载完成之后,再进行postMessage跨域通信(参考iframe.onload)
3、关于otherWindow,这个相当重要,到底这个otherWindow是啥?
始终是你需要通信的目标窗口
就是,
例如,A页面向B页面发送跨域信息,otherWindow就是在A页面中嵌入的iframe指向的B页面的window,即:iframe.contentWindow,呢么B页面接收的时候就是他自己,即window。
到此,所有的坑点应该都列举完了,至于sdk,建议动态标签,具体的大家自己玩去吧。。。
再送上一些其他老哥总结出来的页面通信方案,包括同域、子域和跨域:http://www.pianshen.com/article/1733333895/
最后,感谢这个老姐的文章:https://segmentfault.com/a/1190000014882611