需求
点击第三方登录-->打开新tab并控制tab大小-->新tab登录完成自动关闭-->通知旧tab刷新
难点一 如何通过js新建tab
<a class="3rdLogin" href="/a/b/c">click to login</a>
$(".3rdLogin").click(function(e) {
e.preventDefault(),
window.open($(this).attr("href"), "_blank", "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=500")
})
如果直接用window.open()
,在chrome默认会阻止弹窗
难点二 如何关闭tab
window.opener = null;
window.open('', '_self');
window.close();
难点三 如何跨tab通信
html5 postMessage解决跨域、跨窗口消息传递
跨页面(tab/window)通信的几种方法
本文在 CC BY-NC-SA 4.0 许可 下发布
- 署名 - 您可以复制、发行、展览、表演、放映、广播或通过信息网络传播本作品,但必须 署名作者 并添加链接到 原文地址。
- 非商业性使用 — 您不得将本作品用于商业目的。
- 相同方式共享 — 如果您再混合、转换或者基于本作品进行创作,您必须基于与原先许可协议相同的许可协议 分发您贡献的作品。