我正在开发一个纯JavaScript的OAuth身份验证流程,我想在弹出窗口中向用户显示“授予访问权限”窗口,但它被阻塞了。
我如何防止弹出窗口创建的任何窗口。打开或打开窗户。showModalDialog从被不同的浏览器的弹出窗口拦截器阻止?
我正在开发一个纯JavaScript的OAuth身份验证流程,我想在弹出窗口中向用户显示“授予访问权限”窗口,但它被阻塞了。
我如何防止弹出窗口创建的任何窗口。打开或打开窗户。showModalDialog从被不同的浏览器的弹出窗口拦截器阻止?
当前回答
作为一个好的实践,我认为这是一个好主意,测试一个弹出窗口是否被阻止,并采取行动,以防万一。你需要了解那个窗口。Open有一个返回值,如果操作失败,该值可能为空。例如,在以下代码中:
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;
}
如果弹出窗口被阻塞,窗口。Open将返回null。所以函数会返回false。
例如,想象一下直接从任何链接调用这个函数 target="_blank":如果弹出窗口被成功打开,返回 False将阻塞链接动作,否则如果弹出窗口被阻塞, 返回true将允许默认的行为(打开新的_blank 窗口)然后继续。
<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >
这样你就会有一个弹出窗口,如果它工作,和一个_blank窗口 不是。
如果弹出框没有打开,你可以:
像例子中那样打开一个空白窗口,然后继续 打开一个假的弹出窗口(页面内的iframe) 通知用户(“请允许本网站弹出窗口”) 打开一个空白窗口,然后通知用户 等。
其他回答
我的用例:在我的react应用程序中,在用户单击后端执行API调用。根据响应,打开新选项卡,并将api响应作为参数添加到新选项卡URL(在同一域中)。
在我的用例中,唯一需要注意的是,接收API响应需要1秒钟的时间。因此弹出窗口阻止显示(如果它是活跃的)时,打开URL在一个新的选项卡。
为了避免上述问题,下面是示例代码,
var new_tab=window.open()
axios.get('http://backend-api').then(response=>{
const url="http://someurl"+"?response"
new_tab.location.href=url;
}).catch(error=>{
//catch error
})
总结:创建一个空选项卡(如上面的第1行),当API调用完成时,您可以用url填充选项卡并跳过弹出窗口阻止程序。
@here 我发现它在所有浏览器中都可以正常工作
window.open(URL) || window.location.assign(URL)
我已经通过使用setTimeOut函数来管理这一点。
setTimeOut(function(){
window.location.replace("https://www.google.com/");
}, 1000)
✅✅✅✅✅
我尝试了多种解决方案,但他的解决方案是唯一一个在所有浏览器中都有效的解决方案
let newTab = window.open(); newtable .location.href = url;
基于Jason Sebring的非常有用的技巧,以及这里和那里覆盖的东西,我找到了一个完美的解决方案:
伪代码与Javascript片段:
immediately create a blank popup on user action var importantStuff = window.open('', '_blank'); (Enrich the call to window.open with whatever additional options you need.) Optional: add some "waiting" info message. Examples: a) An external HTML page: replace the above line with var importantStuff = window.open('http://example.com/waiting.html', '_blank'); b) Text: add the following line below the above one: importantStuff.document.write('Loading preview...'); fill it with content when ready (when the AJAX call is returned, for instance) importantStuff.location.href = 'https://example.com/finally.html'; Alternatively, you could close the window here if you don't need it after all (if ajax request fails, for example - thanks to @Goose for the comment): importantStuff.close();
我实际上使用这个解决方案进行邮件重定向,它适用于我所有的浏览器(windows 7, Android)。顺便说一下,_blank位有助于邮件重定向在移动设备上工作。