window.openがブラウザにブロックされている場合の解決策を詳しく説明します。

現象

プロジェクトは、最近window.openの使用は、人々は信じられないほどああ、自分の環境では、ページ上に解放することができますが、ユーザーのために、あなたはブロックに合格しているユーザーに求めることはできません落ち込んでいるブラウザによってブロックされた発生しました。また、インターセプトがある場合、多くの白人は、単に悲しいああ〜〜〜、インターセプトされたページで見るためにどこにわからない、何が起こったのか分からない。

また、window.openがユーザートリガーイベントの中やロードされたときはインターセプトされず、ポップアップコードがajaxや非同期コードの一部に移動すると、すぐにインターセプトされるように見えることがわかります。

原因分析＆ドリルダウン

ブラウザは、ユーザー以外のアクションによって生成された新しいポップアップウィンドウを検出すると、それをブロックします。これは、ブラウザが「ユーザーが見たいページではない」と判断するためです。

例えば、jsで直接実行する場合、以下のようなコードになります。

jsのコードです。

// Open a page directly
window.open('//www.baidu.com', '_blank');

ブラウザ ie8 chrome 40 firefox 34 opera 27 safari 5.1.7

ポップアップをブロックするかどうか N N Y Y Y そして以下のコードについて。

jsのコードです。

    document.body.addEventListener('click', function() {
        window.open('//www.baidu.com', '_blank');
    });

すべてのブラウザが傍受するわけではありません。

まとめると、ブラウザによって傍受のタイミングが一定せず、ajaxコールバックに置かれたコードでも対応が異なるので、ここでは改めて触れないことにします。しかし、私たちのコードでブラウザに傍受されてウィンドウをポップアップされることは、プログラマーが望むことではありません。

解決策

1. の代わりにaタグを使用します。

以下の関数がある場合、この関数をclickのイベントコールバックにバインドすると、ほとんどのブラウザでウィンドウポップアップの傍受を回避することができます。

function newWin(url, id) {

          var a = document.createElement('a');
          a.setAttribute('href', url);
          a.setAttribute('target', '_blank');
          a.setAttribute('id', id);
          // prevent repeated additions
          if(!document.getElementById(id)) document.body.appendChild(a);
          a.click();
}

2. フォームのsubmitメソッドでページを開く

この方法では、fromを構築する必要があり、jsコードがフォームのsubmitをトリガーにして、新しいページにフォームを送信します。コードは長いので、ここでは書きませんが、このようなソリューションがあることは知っています。

なお、上記2つの方法はajaxのコールバック関数には収まりません、コールバック関数に入れたとしても、ブラウザに傍受されます。
3. 究極の解決策 - 最初にポップアップウィンドウ、次にリダイレクト

3つ目の解決策は、実は回避策なのですが、まずユーザーのクリックでページを開き、それからページをリダイレクトするというのが核心的な考え方です。サンプルコードは以下の通りです。

jsのコードです。

xx.addEventListener('click', function () {
        // Open the page, it's best to use the hint page here
        var newWin = window.open('loading page');

        ajax().done(function() {
            // redirect to the target page
            newWin.location.href = 'target url';
        });
    });

上記の方法では実際には2つのアドレスを開くことになるので、最初のアドレスは「現在のページは読み込み中です、お待ちください」のような簡単なページで開くことをお勧めします。これにより、本当のターゲットページを2回開くことを避け、ユーザーにページリダイレクトを認識させることができます。
解決策2

<a href="javascript:;" onclick="dialog();">Click on the popup window</a>

<script>
function dialog(){
    $.ajax({
        url: 'url',
        type: 'POST',
        dataType: 'json',
        async: false, // this must be defined as synchronous
        data: {param1: 'value1'},
        success: function(data){
            window.open(data.url, '_blank'); // launch the popup
        }
    })
}    
</script>

メソッドの短所。

実際のテストでは、ほとんどのブラウザのブロック問題を解決できますが、セキュリティソフトのブロックは解決できません（360はブロックしませんが、QQバトラーはブロックします）

以上が今回の記事の全内容ですが、皆様の学習のお役に立てれば幸いです。また、Script Houseをより一層応援していただければと思います。