【知識碎片】第三方登陸彈窗效果

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