跨域跨页面数据通信方案(iframe+postMessage)

一晃又是半年,半年又半年,坑了又有坑,人生啊,也许就是这样吧ㄟ( ▔, ▔ )ㄏ,让我放下烫手的砖头,慢慢吹逼。

这次的坑是,公司想想要给多个管理后台做一个统一的登录门户,然后各个后台之间的服务不同,所以对应的域名也不一样,而之前的模式设计的登录信息都是存在localStorage、sessionStorage里面的,这可难为死老夫了(╯‵□′)╯︵┻━┻。

我们知道,同源策略蛋疼的很,js cookie、localStorage、sessionStorage都无法绕过同源策略的限制,那么现在要想通信难道只能带参数在url里面?太傻了(╯‵□′)╯︵┻━┻,虽然这也是一个方案,但是在信息很多的时候,那长长的链接真让人欲仙欲死,后来,在问度娘问了很久之后,终于找到了一个闪光点:postMessage,就是它:

1

但!是!当我仔细研究的时候,发现了令人绝望的一点:”两个页面的模数 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270