41

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

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

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

4

3 に答える 3

59

2014 年 10 月の更新:

Firefox が 2014 年 6 月に同期設定を廃止したことはコメントに正しく記載されていましたが、このブラウザーではまだ機能しています。

さらに、Chrome は、ajax 呼び出しが 1 秒以内に返された場合にのみ、これが必要に応じて機能するようにする更新を受け取りました。これは保証するのがかなり難しいです。Chrome のタイムアウトに関する別の質問を作成しました: 同期 Ajax - Chrome には信頼できるイベントのタイムアウトがありますか?

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

元の回答

簡単な答え: ajax リクエストを同期させます。

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

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

jQueryでは、これでうまくいくはずです：

$.ajax({
 url: 'http://yourserver/',
 data: 'your image',
 success: function(){window.open(someUrl);},
 async: false
});
于 2013-10-09T18:05:54.883 に答える
8

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);
}
于 2016-09-19T20:14:29.920 に答える