完璧なポップアップ

キーテイクアウト

正しく実装されていれば、
• ポップアップウィンドウは効果的かつ非侵襲的に使用できます。一般的な障害には、スクリプト、検索エンジン、アクセシビリティ、サイト管理ツール、ポップアップキラー、ポップアップの開始を停止するオプションの問題が含まれます。
完璧なポップアップを作成するには、一般的に共有されるJavaScriptコードに配置できる関数を使用することを検討してください。この関数は、サイトのどこからでも簡単に呼び出すことができ、毎回Window.open関数を作成するよりも好ましいです。この関数は、フォーカスの側面を処理し、ポップアップの状態を評価し、ポップアップウィンドウを閉じて、新しい次元で再開する必要があります。
• ポップアップウィンドウ自体にリンクまたはボタンを提供して、ユーザーが閉じることができるようにすることが重要です。ただし、ユーザーがスクリプトを無効にしている場合、「このウィンドウを閉じる」リンクをJavaScriptを使用してWebページに書き込み、Window.open（）メソッドの一部としてウィンドウが開いているかどうかを確認する必要があります。真のポップアップの場合、リンクが表示され、閉じる（）メソッドが機能します。真のポップアップウィンドウでない場合、リンクは表示されません。
• ヤコブ・ニールセンと彼の支持者のようなものを信じているなら、ポップアップ・ウィンドウほど悪はありません。そして、多くの点で、これは正しいです。なぜ？まあ、私たちはすぐに理由をリストしますが、一言で言えば、それはそれらがほとんど常に不十分に実装されていないか、単に必要でないからです。このチュートリアルでは、正しい考えで、ポップアップウィンドウを誰も動揺させずに使用できることを示しています。特にあなたのサイトを閲覧している人。 ポップアップの問題

ポップアップウィンドウの一般的な障害は次のとおりです

スクリプトが無効になっている場合、またはブラウザがJavaScriptをサポートしていない場合、ポップアップは機能しません

検索エンジンはポップアップウィンドウへのリンクをたどることができません（スクリプト化された要素は常に無視されます）

ポップアップは、アクセシビリティの問題を提示します
• サイト管理ツール（例：dreamweaver）は、宛先ページをサイトの別のセクションに移動した場合、ポップアップへのリンクを更新できません
• 多くの人が、開いた瞬間に窓を閉めるポップアップキラーを走らせています
• モジラでは、そもそもポップアップの開くのを止めるオプションがあります
• phew。それはかなりのリストです...そしておそらくあなたはこのリストにあなた自身を追加することができます。したがって、これらにどのように対処しますか？
• スクリプト無効

スクリプトが無効になっていると、ポップアップは何もしません。そのように簡単です。しかし、標準を使用した場合、そのような問題はありません。したがって、使用する代わりに：

使用する場合があります：

このように、スクリプトが無効になっている場合、標準リンクはまだ機能します。

ただし、おそらく、現在のウィンドウの上にウィンドウを開く必要がある理由が非常にある理由があります。その場合は、次のようなターゲット属性を追加するだけです

<a href="#" onclick="window.open('file.htm');"> 

ビンゴ。問題が解決しました。しかし、これにできることはもっとあります！

検索エンジン

上記の修正コードを使用すると、検索エンジンが標準のHREFを取得するために取得するため、問題リストから別の問題が発生しました。

アクセシビリティの問題

ポップアップの最大の欠点は、メインブラウザウィンドウから焦点を奪うことであり、これは戸惑う可能性があることです。また、アクセシビリティ以外に一般的なユーザビリティの問題を提示します。誰かがポップアップを起動してから、ランチャーウィンドウを誤ってクリックしてクリックして、何も起こらないと思って、結果なしでリンクをもう一度クリックするのを見たことがありますか？もちろん、ウィンドウは開きましたが、現在はランチャーウィンドウの下にあり、タスクバーに下ってそこからウィンドウを選択するだけでこれが解決するでしょう。

トリックは、リンクが新しいウィンドウで開くことをユーザーに通知することです。これに対処する方法はいくつかあります：

リンク自体の一部として指示を含めます

タイトル属性にいくつかの命令を追加します
• 適切なアイコンを使用してポップアップが差し迫っていることを意味する
• このように、フォーカスが失われた場合、ユーザーは次のように接続を行う場合があります。
テストページを開きます（ポップアップウィンドウで開きます）

テストページを開きます

メインウィンドウでフォーカスを失うという問題に対処するために、JavaScriptを使用してフォーカスを再セットできます。このための提案されたスクリプトは、この記事の最後に登場します。

サイトリンク管理ツール

DreamWeaverやコンテンツ管理システムなどのツールを使用してページを移動する習慣がある場合は、リンクが維持されることを願っています。標準のHREFを使用すると、通常は（使用するツールによって異なります）が、JavaScriptではありそうもない。しばらくコードに戻ります：

上記のリンクは非常にうまく維持されます…ほとんど。その半分は - href部分。しかし、オンクリック部分はおそらく無視されるでしょう。これは大きな問題です。リンクが更新されたと思うかもしれませんが、実際にはJavaScriptを有効にしている人は、欠落しているページに送信されます。したがって、コードが次のように変更される可能性があります：

<a href="file.htm" onclick="window.open('file.htm');return false;">

そして、起動ページでリンクバリーターを実行する場合、リンクが実際に有効であるように見えます。それでは、この問題にどのように対処しますか？そうするように：

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

維持するリンクは1つだけで、正しいHREFがWindow.openメソッドに使用されます。優れている - 今、私たちはどこかに到達しています！

ポップアップキラー/モジラはポップアップを無効にします

<a href="file.htm" onclick="window.open('file.htm');  <br>
return false;">

JavaScriptが無効になっているという問題と同様に、標準のHREFを提供することは、リンクがまだ機能することを意味します。今、私たちはどのウィンドウに焦点があるかという問題に対処する必要があります…

完璧なポップアップスクリプト

一般的に共有されるJavaScriptコード（このサイトで行ったように）に配置できる関数を使用することをお勧めします。これは、毎回window.open機能を整理するよりもはるかに好ましいです。 URLに加えて、高さと幅などのパラメーターを含め、選択するポップアップスタイルの種類を含めてください（どのスタイルを定義するかがあなた次第です）。

お勧めのコードは次のとおりです

関数の追加コードは、フォーカスの側面を処理します。この関数を呼び出すリンクをクリックすると、ページをクリックしてポップアップが非表示になり、別のポップアップリンクをクリックすると、コードはポップアップの状態を評価し、ポップアップウィンドウを閉じて新しい寸法で再開します。

<a href="#" onclick="window.open('file.htm');"> 

関数を呼び出すには、次のコードを使用します。

または、いくつかの実際の例を使用するには：

<a href="file.htm" onclick="window.open('file.htm');return false;">

これ 私のポップアップリンク（コンソールモード）

です これ 私のポップアップ（固定モード）

です これ 私の（弾性モード）

です
注：「falseを返す」部分は、HREFのデフォルトアクションを効果的にキャンセルするため、ポップアップと通常のHTMLウィンドウを開くことはありません。 JavaScriptが有効になっている場合となしで上記のリンクを試して、自分で確認してください。
これ以上何を求めることができますか？さて…このケーキには最後のアイシングが1つあります。

ポップアップを閉じる

ポップアップが開かれたら、ブラウザ/オペレーティングシステムコントロールを使用して新しく開かれたウィンドウを閉じるために人々に依存する可能性があります。

しかし、人々はいつもこれをするとは限りません！したがって、ユーザーが閉じることができるように、ポップアップウィンドウ自体にリンク（またはボタン）を提供する必要があります。ただし、ユーザーにスクリプトが無効になっていること、および標準のHREFルートを介してポップアップウィンドウが開かれたと仮定しましょう。あなたがとても思慮深く提供した「このウィンドウを閉じる」リンクは、このようなあまり友好的ではない対話を促します：

この問題を回避するには、javaScriptを使用してWebページへのクローズリンクを記述し、Window.open（）メソッドの一部としてウィンドウが開いているかどうかを確認する必要があります。そうすれば、それが真のポップアップである場合、リンクが表示され、閉じる（）メソッドが機能します。真のポップアップウィンドウでない場合、リンクは表示されません。 これを行うためのコードは次のとおりです

もう一度リンクを試してみて、自分で確認してください：

これ 私のポップアップ（固定モード）

です

結論

<a href="file.htm" onclick="window.open('file.htm'); <br>
return false;" target="newWin">

このチュートリアルが、ポップアップリンクにアクセスしやすく、検索エンジンに優しい、非侵襲的であることを願っています。ただし、このすべてのアドバイスに従っていても、新しいウィンドウを実際に開く必要があるかどうかを自問する必要があります。

最後に注意すべき点の1つは、ポップアップは人々が使用することをオプトインするものである必要があるため、window.onloadまたはwindow.onloadイベントを使用しないでください。ポップアップウィンドウをユーザーに強制します。それは常に人々から一体を悩ませます...彼らがX10カメラを購入したり、「世界最大のオンラインカジノ」を訪問したいが、それを知らなかったのでなければ、それは！

以上が完璧なポップアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。