第三方登錄彈窗效果

需求
點擊第三方登錄-->打開新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)通信的幾種方法

原文地址： https://hi.cellmean.com/p/b5ed988d0089

本文在 CC BY-NC-SA 4.0 許可 下發布

• 署名 - 您可以複製、發行、展覽、表演、放映、廣播或通過信息網絡傳播本作品，但必須 署名作者 並添加鏈接到 原文地址。
• 非商業性使用 — 您不得將本作品用於商業目的。
• 相同方式共享 — 如果您再混合、轉換或者基於本作品進行創作，您必須基於與原先許可協議相同的許可協議 分發您貢獻的作品。