Angularjs $ window.open弹出窗口被阻止

Question

我试图在AngularJS应用程序中使用Github API的Web身份验证流程.当我的注册表单提交时,我想打开一个新窗口将它们发送到auth页面.通常我会window.open在用户事件中使用,以确保它不会被弹出窗口阻止程序捕获.

在我的角度应用程序中,我正在包装一些Github api和Angular服务,打开窗口的代码就在那里.因为它被阻止了.我也尝试将它放在控制器中的一个函数中,该函数由表单通过调用ng-submit.

所以问题是,是否有一种优雅的方式在我的服务或控制器内的某个地方提交表单上打开新页面,或者我是否需要找到另一种方法来执行此操作？

Answer 1

默认情况下,Chrome会阻止不是用户直接操作的弹出窗口.在你的情况下,我假设,对window.open的调用是在回调函数中进行的.这使它成为异步,Chrome会阻止它.

//before
$scope.userClicked = function(){
  $http.post('your/api/endpoint',{data:x}).then(function(r){
    $window.open(r.data.url,'window name','width=800,height=600,menubar=0,toolbar=0');
  });
}

但是,有一种解决方法可以使这项工作.在回调函数之外实例化您的窗口,您可以引用该变量来更改回调函数中该窗口的目标URL.

//after
$scope.userClicked = function(){
  var popup = $window.open('','window name','width=800,height=600,menubar=0,toolbar=0');
  popup.document.write('loading ...');

  $http.post('your/api/endpoint',{data:x}).then(function(r){
    popup.location.href = r.data.url;
  });
}

Answer 2

您无法摆脱脚本化自动window.open的弹出窗口阻止程序。只有真实用户的号召性用语才会打开新窗口，而不会被弹出窗口阻止程序阻止。想象一下一个站点的情况，该站点的浏览器中没有弹出窗口阻止程序，而javascript会循环打开100个弹出窗口。你想要吗？它曾经像病毒一样在我们过去的美好时光中存在过，但是现代的浏览器却非常聪明，这种烦恼得到了很好的处理。