web-dev-qa-db-ja.com

Chrome window.openは、ajaxリクエストがポップアップのように動作した後

ユーザーがボタンを押したときにajaxリクエストを実行し、そのajaxリクエストの結果を使用して、新しいタブで開くURLを生成する状況があります。ただし、chrome ajaxリクエストの成功ハンドラでwindow.openを呼び出すと、ポップアップのような新しいウィンドウで開きます（ポップアップブロッカーによってブロックされます）。私の推測は成功コードはクリック処理コードと非同期であるため、chromeは、クリックに起因するものではありますが、クリックによってトリガーされたものではないと判断します。これはajaxリクエストを同期させずに？

編集 この動作を示す最小限のコードを次に示します。

$('#myButton').click(function() {
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {'json': JSON.stringify({
            url:'http://google.com'})},
        success: function(data) {
            window.open(data.url,'_blank');
        }
    });
});

http://jsfiddle.net/ESMUA/2/

明確化の注意点：ポップアップブロッカーによってブロックされていることよりも、タブではなく別のウィンドウで開くことについて、私はより慎重に考えています。

javascriptajaxgoogle-chrome
16
Thayne

追加してみてください

window.open(url,'_blank');

編集

まあ、ユーザーアクションの直接の結果ではない（つまり非同期ではない）ページを開くときに、ポップアップブロックを回避できるとは思わない。

ただし、次のようなものを試すことができます。ポップアップブロッカーに対するユーザーアクションのように見えるはずです。

var $a = $('<a>', {
        href: url,
        target: '_blank' 
    });

$(document.body).append($a);
$a.click();

編集2

物事を同期させたほうがいいようです。

新しいウィンドウが「同じオリジン」である限り、JSでそれを操作する力があります。

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');

    setTimeout(function(){ // async
        wi.location.href = 'http://google.com';
    }, 500);
});
19
pstenstrm

Async：falseを追加してみてください。動作するはずです

$('#myButton').click(function() {
$.ajax({
    type: 'POST',
    async: false,
    url: '/echo/json/',
    data: {'json': JSON.stringify({
        url:'http://google.com'})},
    success: function(data) {
        window.open(data.url,'_blank');
    }
});
});
14
rajesh

私のために働いたのは：

var win = window.open('about:blank', '_blank');

myrepository.postmethod('myserviceurl', myArgs)
.then(function(result) {
    win.location.href = 'http://yourtargetlocation.com/dir/page';
});

スコープ内にいる間に同期呼び出しの前に新しいウィンドウタブを開き、ウィンドウハンドルを取得して、約束のajaxの結果を受け取ったら再ナビゲートします。

10
bughunter1999

上記の@pstenstrmが投稿した回答（編集2）はほとんど機能しますが、ソリューションをよりエレガントにするために1行だけ追加しました。私の場合のajax呼び出しは1秒以上かかり、ユーザーが空白ページに直面すると問題が発生しました。良いことは、作成したばかりの新しいウィンドウにHTMLコンテンツを配置する方法があることです。

例えば：

$('#a').on('click', function(e){
    e.preventDefault();
    var wi = window.open('about:blank', '_blank');
    $(wi.document.body).html("<p>Please wait while you are being redirected...</p>");

    setTimeout(function(){ // async
        wi.location.href = 'http://google.com';
    }, 500);
});

これにより、新しいタブに「リダイレクト中です。しばらくお待ちください...」というテキストが入力されます。これは、ユーザーが空白ページを一瞬見ているよりもエレガントに見えます。これをコメントとして投稿したかったのですが、評判が足りません。

8
Afzal Naushahi

信頼できる方法はありません。 FFおよびIE6 SP2のポップブロッカーによってタブ/ウィンドウがブロックされている場合、window.openは値nullを返します。

https://developer.mozilla.org/en-US/docs/Web/API/Window/open#FAQ

ポップアップブロッカーによってウィンドウがブロックされたことを確認するにはどうすればよいですか？ Mozilla/FirefoxおよびInternet Explorer 6 SP2の組み込みポップアップブロッカーでは、window.open（）の戻り値を確認する必要があります。ウィンドウを開くことが許可されていない場合はnullになります。ただし、他のほとんどのポップアップブロッカーには、信頼できる方法はありません。

1
Ilker Cat