web-dev-qa-db-ja.com

ユーザーがクリックしたときにajaxを呼び出した後、ポップアップブロッカーなしで新しいタブを開く

ユーザーがHTML5キャンバスを介して画像操作を実行できるページがあり、そのページには、Facebookで生成されたキャンバスの画像を共有するためのFacebook共有ボタンがあります。

リンクがクリックされると、ajaxリクエストがサーバー（ASP.NET MVC）に送信され、画像生成が実行され、サーバーに画像が保存され、ajaxとして返されるURL（画像にリンクする）が生成されます応答。返されるURLは、共有するFacebookのパラメーターとして渡したいものです。問題は、「window.open」を呼び出すと、ポップアップブロッカーがFacebookの共有ダイアログをブロックしていることです。

ポップアップブロッカーなしで新しいタブを開く他の方法はありますか。ユーザーがアクションを開始したので、ポップアップブロッカーをバイパスする方法があるはずです。ありがとう。

javascriptpopupwindowpopup-blocker
37
Syma

2014年10月の更新：

コメントでは、Firefoxが2014年6月に同期設定を非推奨にしたが、このブラウザーではまだ機能していることが正しく指摘されました。

さらに、Chromeは、ajax呼び出しが1秒未満で戻ってきた場合にのみ期待どおりに動作するようになります。これは保証するのがかなり困難です。 Chrome timeout： Synchronous Ajax-does Chrome信頼できるイベントでタイムアウトが発生しますか？

リンクされた投稿には、この概念と問題を示すJSFiddleが含まれています。

元の回答

短い答え：ajaxリクエストを同期化します。

完全な回答：タブ/ポップアップを開くコマンドが 信頼できるイベント から来た場合、ブラウザはポップアップブロッカーの警告なしでタブ/ポップアップのみを開きます。つまり、ユーザーはポップアップを開くためにどこかをクリックする必要があります。

あなたの場合、ユーザーはクリックを実行するので、信頼できるイベントができます。ただし、Ajaxリクエストを実行することにより、その信頼されたコンテキストを失います。成功ハンドラには、そのイベントはもうありません。これを回避する唯一の方法は、同期Ajaxリクエストを実行することです。これは、ブラウザの実行中はブロックしますが、イベントコンテキストは保持します。

JQueryでは、これでうまくいくはずです。

$.ajax({
 url: 'http://yourserver/',
 data: 'your image',
 success: function(){window.open(someUrl);},
 async: false
});
59
Christopher Lörken

信頼されたコンテキストを失う非同期ajaxリクエストの問題をどのように回避したかを以下に示します。

ユーザーがクリックしたときにポップアップを直接開き、URLをabout:blankそして、そのウィンドウのハンドルを取得しました。あなたはおそらくあなたのajaxリクエストが行われている間に「ロード」URLにポップアップを向けることができます

var myWindow = window.open("about:blank",'name','height=500,width=550');

次に、リクエストが成功したら、ウィンドウでコールバックURLを開きます

function showWindow(win, url) {
    win.open(url,'name','height=500,width=550');
}
23
wsgeorge

wsgeorge からの答えは、私を正しい軌道に乗せたものです。うまくいけばテクニックをより明確に説明する関数があります。

function openNewAjaxTab(url) {
    var tabOpen = window.open("about:blank", 'newtab'),
        xhr = new XMLHttpRequest();

    xhr.open("GET", '/get_url?url=' + encodeURIComponent(url), true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            tabOpen.location = xhr.responseText;
        }
    }
    xhr.send(null);
}
6
Chris Broski