6

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

在我的 Angular 应用程序中，我将一些 Github api 和 Angular 服务包装在一起，打开窗口的代码就在其中。正因为如此，它被阻塞了。我还尝试将它放在控制器中的一个函数中，该函数由表单调用ng-submit。

所以问题是，有没有一种优雅的方法可以从我的服务或控制器内部的某个地方打开表单提交的新页面，还是我需要找到另一种方法来做到这一点？

4

3 回答 3

27

默认情况下，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;
  });
}
于 2016-12-07T06:18:56.493 回答
5

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

于 2013-10-21T06:00:31.907 回答
2

您可以非常简单地从click事件内容中创建一个指令来执行此操作：

yourapp.directive('awesomeClick', ['$parse',function ($parse): ng.IDirective {
    return {
        restrict: 'A',        
        link: (scope, element:JQuery, attrs) => {
            var fn = $parse(attrs.awesomeClick);
            element.on('click', function (event) {

                // open the window if you want here 

                scope.$apply(function () {
                    fn(scope, { $event: event });
                });
            });
        }
    }
}]);
于 2013-10-21T03:04:03.667 回答