window.openがブラウザにインターセプトされる場合の解決策の詳細な説明

最近、あるプロジェクトに取り組んでいたときに、window.open の使用がブラウザによって傍受されるという状況に遭遇し、人々を非常に落ち込ませました。自分の環境ではページを公開できますが、ユーザーにとっては公開できません。インターセプトを通過するために必要です。さらに、傍受が発生した場合、多くの初心者は何が起こっているのかわからず、傍受されたページのどこを見ればよいのかわかりません。それは本当に悲しいです〜〜。

さらに、window.open がユーザーのイベントをトリガーするとき、またはロードされるときに、ポップアップ コードが ajax または非同期コードに移動されると、すぐにインターセプトされないことがわかります。 。

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

たとえば、js で直接実行すると、次のコードになります。

jsコード:

 //ページを直接開きます window.open('//www.baidu.com', '_blank');

ブラウザ IE8 クロム 40 ファイアフォックス 34 オペラ 27 サファリ 5.1.7

NNYYY のポップアップを防止するかどうか、および次のコードの場合:

jsコード:

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

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

まとめると、ブラウザごとにインターセプトのタイミングの判断が異なり、ajax コールバックに配置されたコードに対する応答も異なるため、ここでは詳しく説明しません。ただし、コード内のポップアップ ウィンドウがブラウザーによってインターセプトされることは、プログラマーが望んでいることではありません。

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

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

jsコード:

 function newWin(url, id) { var a = document.createElement('a'); a.setAttribute('href', 'url); a.setAttribute('id'); ', id); // 繰り返しの追加を防止する if(!document.getElementById(id)) document.body.appendChild(a);}

2. フォームの submit メソッドを使用してページを開きます

このメソッドでは、from を構築し、js コードでフォームの送信をトリガーし、そのフォームを新しいページに送信する必要があります。コードは長いため、ここでは書きません。そのようなコードがあることは誰もが知っています。解決。

上記の 2 つのメソッドは、ajax コールバック関数に配置するには適していないことに注意してください。コールバック関数に配置しても、ブラウザーによってインターセプトされます。

3. 究極の解決策 - 最初にウィンドウをポップアップし、次にリダイレクトします

3 番目の解決策は、実際には回避策です。基本的なアイデアは、まずユーザーのクリックによってページを開き、次にページをリダイレクトするというものです。サンプルコードは以下のとおりです。

jsコード:

 xx.addEventListener('click', function () { // ページを開きます。ここではプロンプト ページを使用するのが最善です var newWin = window.open('loading page'); ajax().done(function() { // ターゲット ページに直接アクセスします newWin.location.href = 'ターゲット URL' });

上記の方法では実際には 2 つのアドレスを開くため、最初のアドレスを開くときに「現在のページを読み込んでいます。お待ちください」のようなメッセージを表示することをお勧めします。 。のシンプルなプロンプト ページ。これにより、実際のターゲット ページを 2 回開くことがなくなり、ユーザーがページのリダイレクトに気づくことができます。

解決策 2:

 <a href=javascript:; onclick=dialog();>ポップアップ ウィンドウをクリック</a><script>function editor(){ $.ajax({ url: 'url', type: 'POST', dataType: 'json ', async: false, // これは同期データとして定義する必要があります: {param1: 'value1'}, success: function(data){ window.open(data.url, '_blank'); //ポップアップウィンドウ} })} </script>

この方法の欠点:

実際のテストでは、ほとんどのブラウザの傍受問題は解決できますが、セキュリティ ソフトウェアの傍受は解決できません (360 は傍受しませんが、QQ Butler は傍受します)

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。