6

AngularJS アプリ内からGithub API のWeb 認証フローを使用しようとしています。サインアップ フォームが送信されたら、新しいウィンドウを開いて認証ページに送信したいと考えています。通常は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 に答える