需求
點擊第三方登錄-->打開新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 許可 下發布
- 署名 - 您可以複製、發行、展覽、表演、放映、廣播或通過信息網絡傳播本作品,但必須 署名作者 並添加鏈接到 原文地址。
- 非商業性使用 — 您不得將本作品用於商業目的。
- 相同方式共享 — 如果您再混合、轉換或者基於本作品進行創作,您必須基於與原先許可協議相同的許可協議 分發您貢獻的作品。