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

Question

我正在尝试使用 Github API 的 web auth flow从 AngularJS 应用程序中。当我的注册表单提交时，我想打开一个新窗口将它们发送到授权页面。通常我只会在用户事件中使用 window.open 以确保它不会被弹出窗口拦截器捕获。

在我的 Angular 应用程序中，我包装了一些 Github API 和 Angular 服务，打开窗口的代码也放在那里。正因为如此，它被阻止了。我还尝试将它放在 Controller 中的一个函数中，该函数通过 ng-submit 被表单调用。

所以问题是，是否有一种优雅的方式可以在我的服务或 Controller 中的某处提交的表单上打开一个新页面，或者我是否需要找到另一种方式来做到这一点？

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;
  });
}