我正在纯粹用 JavaScript 开发 OAuth 身份验证流程,我想在弹出窗口中向用户显示“授予访问权限”窗口,但它被阻止了。
如何防止由不同浏览器的弹出窗口阻止程序创建window.open
或阻止的弹出窗口window.showModalDialog
?
我正在纯粹用 JavaScript 开发 OAuth 身份验证流程,我想在弹出窗口中向用户显示“授予访问权限”窗口,但它被阻止了。
如何防止由不同浏览器的弹出窗口阻止程序创建window.open
或阻止的弹出窗口window.showModalDialog
?
一般规则是,如果window.open
从 javascript 调用或类似的调用,而不是由直接用户操作调用,则弹出窗口阻止程序将参与。也就是说,您可以调用window.open
以响应按钮单击而不会被弹出窗口阻止程序击中,但是如果您将相同的代码放在计时器事件中,它将被阻止。调用链的深度也是一个因素 - 一些较旧的浏览器只查看直接调用者,较新的浏览器可以回溯一点,看看调用者的调用者是否是鼠标点击等。尽可能保持浅层以避免弹出窗口阻止程序。
基于Jason Sebring的非常有用的提示,以及这里和那里涵盖的内容,我为我的案例找到了一个完美的解决方案:
带有 Javascript 片段的伪代码:
立即在用户操作上创建一个空白弹出窗口
var importantStuff = window.open('', '_blank');
(window.open
使用您需要的任何其他选项丰富呼叫。)
可选:添加一些“等待”信息消息。例子:
a) 外部 HTML 页面:将上面的行替换为
var importantStuff = window.open('http://example.com/waiting.html', '_blank');
b) 文本:在上面一行下面添加以下行:
importantStuff.document.write('Loading preview...');
准备好时用内容填充它(例如,当返回 AJAX 调用时)
importantStuff.location.href = 'https://example.com/finally.html';
或者,如果您根本不需要它,您可以在此处关闭窗口(if ajax request fails
例如 - 感谢@Goose 的评论):
importantStuff.close();
我实际上将这个解决方案用于 mailto 重定向,它适用于我的所有浏览器(Windows 7、Android)。该_blank
位有助于mailto重定向在移动设备上工作,顺便说一句。
作为一个很好的做法,我认为测试弹出窗口是否被阻止并采取措施以防万一是个好主意。您需要知道 window.open 有一个返回值,如果操作失败,该值可能为 null。例如,在以下代码中:
function pop(url,w,h) {
n=window.open(url,'_blank','toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width='+w+',height='+h);
if(n==null) {
return true;
}
return false;
}
如果弹出窗口被阻止,window.open 将返回 null。因此该函数将返回false。
举个例子,想象一下直接从任何链接调用这个函数
target="_blank"
:如果弹出窗口成功打开,返回false
将阻止链接操作,否则如果弹出窗口被阻止,返回true
将让默认行为(打开新的 _blank 窗口)并继续.
<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >
这样你就会有一个弹出窗口,如果它有效,一个 _blank 窗口如果没有。
如果弹出窗口没有打开,您可以:
此外,Swiss Mister post,在我的情况下,window.open是在一个 promise 内启动的,它打开了弹出窗口阻止程序,我的解决方案是:在 angular 中:
$scope.gotClick = function(){
var myNewTab = browserService.openNewTab();
someService.getUrl().then(
function(res){
browserService.updateTabLocation(res.url, myNewTab);
}
);
};
浏览器服务:
this.openNewTab = function(){
var newTabWindow = $window.open();
return newTabWindow;
}
this.updateTabLocation = function(tabLocation, tab) {
if(!tabLocation){
tab.close();
}
tab.location.href = tabLocation;
}
这就是您可以使用Promise响应而不调用弹出窗口阻止程序打开新选项卡的方法。
http://code.google.com/p/google-api-javascript-client/wiki/Authentication
看到它写的区域:
设置身份验证
客户端对 OAuth 2.0 的实现使用弹出窗口来提示用户登录并批准应用程序。第一次调用 gapi.auth.authorize 可以触发弹出窗口阻止程序,因为它间接打开了弹出窗口。为了防止弹出窗口阻止程序在身份验证调用时触发,请在客户端加载时调用 gapi.auth.init(callback)。当库准备好进行身份验证调用时,将执行提供的回调。
我猜它与上面的真实答案有关,它如何解释是否有立即响应,它不会触发弹出警报。“gapi.auth.init”正在制作它以便api立即发生。
实际应用
我使用 npm 上的节点通行证和每个提供商的各种通行证包制作了一个开源身份验证微服务。我对第 3 方使用了标准的重定向方法,并为其提供了一个重定向 URL 以供返回。这是程序化的,所以如果登录/注册和特定页面上,我可以有不同的地方重定向回。