我正在开发一个纯JavaScript的OAuth身份验证流程,我想在弹出窗口中向用户显示“授予访问权限”窗口,但它被阻塞了。

我如何防止弹出窗口创建的任何窗口。打开或打开窗户。showModalDialog从被不同的浏览器的弹出窗口拦截器阻止?


当前回答

我尝试了多种解决方案,但他的解决方案是唯一一个在所有浏览器中都有效的解决方案

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

其他回答

我的用例:在我的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填充选项卡并跳过弹出窗口阻止程序。

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

不要使用document.open()。 而是使用this.document.location.href = location;要加载的url在哪里

例:

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

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

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

@here 我发现它在所有浏览器中都可以正常工作

window.open(URL) || window.location.assign(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);
  });
}

我尝试了多种解决方案,但他的解决方案是唯一一个在所有浏览器中都有效的解决方案

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