避免浏览器弹出窗口阻止程序

2020/10/22 17:41 · javascript ·  · 0评论

我正在纯粹使用JavaScript开发OAuth身份验证流程,我想在弹出窗口中向用户显示“授予访问权限”窗口,但是该窗口被阻止了。

如何防止由window.open创建的弹出窗口window.showModalDialog被不同浏览器的弹出窗口阻止程序阻止?

一般规则是,如果window.open直接用户操作未调用的javascript中调用了javascript或类似方法,则会启用弹出窗口阻止程序也就是说,您可以window.open响应单击按钮而调用,而不会被弹出窗口阻止程序击中,但是如果将相同的代码放在计时器事件中,它将被阻止。呼叫链深度也是一个因素-一些较旧的浏览器仅查看直接呼叫者,较新的浏览器可以稍微回溯以查看呼叫者的呼叫者是否是鼠标单击等。请尽可能将其保持尽可能浅,以避免弹出窗口阻止程序。

基于杰森赛百灵非常有用的技巧,并在东西覆盖在这里那里,我发现我的情况下的完美解决方案:

带有Javascript代码段的伪代码:

  1. 立即根据用户操作创建空白弹出窗口

    var importantStuff = window.open('', '_blank');
    

    可选:添加一些“正在等待”的信息消息。例子:

    a)外部HTML页面:将以上行替换为

    var importantStuff = window.open('http://example.com/waiting.html', '_blank');
    

    b)文字:在上述内容下方添加以下行:

    importantStuff.document.write('Loading preview...');
    
  2. 准备就绪时将其填充内容(例如,返回AJAX调用时)

    importantStuff.location.href = 'http://shrib.com';
    

window.open使用您需要的其他任何选项来丰富呼叫

我实际上是使用此解决方案进行mailto重定向的,并且可以在我所有的浏览器(Windows 7,Android)上使用。_blank位有助于mailto重定向在移动设备btw上工作。

你的经验?有什么办法可以改善这个?

作为一个好习惯,我认为最好测试弹出窗口是否被阻止并采取措施以防万一。您需要知道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":如果成功打开了弹出窗口,则return
false将阻止链接操作,否则,如果弹出窗口被阻止,则returntrue将让默认行为(打开新的_blank窗口)并继续。

<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >

这样,您将有一个弹出窗口(如果可以),如果没有_blank窗口。

如果弹出窗口没有打开,您可以:

  • 像示例中一样打开一个空白窗口,然后继续
  • 打开一个伪造的弹出窗口(页面内的iframe)
  • 通知用户(“请允许该网站弹出”)
  • 打开一个空白窗口,然后通知用户等。

除了瑞士先生的帖子,在我的情况下,window.open是在promise中启动的,它打开了弹出窗口阻止程序,我的解决方案是:

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
        browserService.updateTabLocation(res.url, myNewTab);

    }
  );
};

browserService:

this.openNewTab = function(){
     var newTabWindow = $window.open();
     return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
     if(!tabLocation){
       tab.close();
     }
     tab.location.href = tabLocation;
}

这样,您可以使用Promise响应而不调用弹出窗口阻止程序来打开新标签。

来自Google的oauth JavaScript API:

http://code.google.com/p/google-api-javascript-client/wiki/Authentication

查看读取的区域:

设置身份验证

OAuth 2.0的客户端实现使用弹出窗口提示用户登录并批准该应用程序。第一次调用gapi.auth.authorize可以触发弹出窗口阻止程序,因为它间接打开了弹出窗口。为防止弹出窗口阻止程序在auth调用上触发,请在客户端加载时调用gapi.auth.init(callback)。库准备好进行auth调用时,将执行提供的回调。

我猜想这与上面的真实答案有关,它解释了如果有立即响应,它将不会触发弹出警报。“ gapi.auth.init”正在制作,因此api立即发生。

实际应用

我使用npm上的节点通行证以及每个提供商的各种通行证软件包制作了一个开源身份验证微服务。我对第三方使用了一种标准的重定向方法,为它提供了重定向URL以供返回。这是编程式的,因此在登录/注册时以及在特定页面上,我可以有不同的位置重定向回。

github.com/sebringj/athu

passwordjs.org

我尝试了多种解决方案,但是他是所有浏览器中唯一对我有用的解决方案

let newTab = window.open();
newTab.location.href = url;

除非回调成功返回,否则我不想创建新页面,因此我这样做是为了模拟用户单击:

function submitAndRedirect {
  apiCall.then(({ redirect }) => {
      const a = document.createElement('a');
      a.href = redirect;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
  });
}

我的用例:在我的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调用后,您可以使用网址填充该选项卡,并跳过弹出窗口阻止程序。

摆脱这种情况的最简单方法是:

  1. 不要使用document.open()。
  2. 而是使用this.document.location.href = location; 位置是要加载的网址

例如:

<script>
function loadUrl(location)
{
this.document.location.href = location;
}</script>

<div onclick="loadUrl('company_page.jsp')">Abc</div>

这对我来说非常有效。干杯

本文地址:http://javascript.askforanswer.com/bimianliulanqidanchuchuangkouzuzhichengxu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!