さまざまな種類のネイティブJavaScriptポップアップを比較します

JavaScriptは、ユーザーインタラクション用の特別なUIを表示するためのさまざまな内蔵ポップアップAPIを提供します。最も一般的なものは次のとおりです。

アラート（「こんにちは、世界！」）;

UIはブラウザからブラウザまでさまざまですが、通常、渡すメッセージを含む非常に人目を引く方法でページの中央に小さなウィンドウが表示されます。 FirefoxとChromeの例は次のとおりです。

ネイティブJavaScriptポップアップの主要な問題

JavaScriptポップアップがブロックしています。

ポップアップが開くと、ページ全体が実際に実行を停止します。ポップアップ中、ページ上の何もやり取りすることはできません。これがまさに「モーダルウィンドウ」の目的ですが、それはまだ注意を払う必要があるユーザーエクスペリエンス要因です。ポップアップが開いたときに他のメインスレッドJavaScriptコードが実行されないことが重要です。

10回のうち9回、すべての操作を停止させるこの動作を使用しないように、アーキテクチャを再設計することが最善です。ブラウザは、ネイティブのJavaScriptアラートも実装しているため、設計を制御することができません。彼らがページのどこにいるのか、彼らがそこにどのように見えるかを制御することはできません。完全にブロッキング機能を絶対に必要としない限り、ほとんどの場合、ユーザーのエクスペリエンスをカスタマイズするために設計できるカスタムユーザーインターフェイスを使用することが最善です。

各ネイティブポップアップウィンドウを見てみましょう。

window.alert()

 Window.Alert（ "Hello World"）;

//メッセージの例const button = document.queryselectorall（ "button"）;
button.addeventlistener（ "click"、（）=> {
  alert（ "button text：" button.innertext）;
}）;

目的：単純なメッセージまたはデバッグ変数の値を表示します。

それがどのように機能するか：この関数は文字列を取り、OKラベルのあるボタンのポップアップウィンドウでユーザーに提示します。ボタン上のテキストなど、他の側面ではなく、メッセージを変更することができます。

代替：他のアラートと同様に、ユーザーにメッセージを表示する必要がある場合は、実行しようとしているアクションに適した方法で表示するのが最善です。

変数の値をデバッグしようとしている場合は、 console.log("变量的值：", variable);コンソールで表示します。

window.confirm()

 window.confirm（ "確かですか？"）;

//サンプルに尋ねますret ness = window.confirm（ "猫は好きですか？"）;
if（answer）{
  //ユーザーは「OK」をクリックしました
} それ以外 {
  //ユーザーは「キャンセル」をクリックしました
}

目的： 「よろしいですか？」に使用されます。メッセージを入力して、ユーザーが実際に開始したアクションを完了したいかどうかを確認します。

仕組み：カスタムメッセージを提供できます。ポップアップはOKまたはキャンセルオプションを提供し、その値を使用して返されたコンテンツを表示できます。

代替：これは、ユーザーを促す非常に邪魔な方法です。アザ・ラスキンが言ったように：

…多分あなたは警告をまったく使用したくないでしょう。 」

特定のコンテンツを確認するようにユーザーに依頼する方法はたくさんあります。おそらく、必要なことに接続する確認ボタンを備えた明確なUI。

window.prompt()

 window.prompt（ "あなたの名前は何ですか？"）;

回答= window.prompt（ "あなたの好きな色は何ですか？"）;
//回答はユーザーが入力するものです（ある場合）

目的：ユーザーの入力を促します。文字列（おそらく問題としてフォーマットされている）を提供すると、ユーザーは文字列を含むポップアップウィンドウ、入力ボックス、およびOKおよびキャンセルボタンが表示されます。

仕組み：ユーザーが「OK」をクリックすると、入力ボックスに入力したものが表示されます。何も入力せず、[OK]をクリックすると、空の文字列が表示されます。キャンセルを選択した場合、返品値はnullになります。

代替：他のすべてのネイティブJavaScriptアラートと同様に、これにより、アラートボックスのスタイルや配置もできません。使用するのが最善です<input>ユーザー情報を取得する要素。これにより、より多くのコンテキストと目的のあるデザインを提供できます。

window.onbeforeunload()

 window.addeventlistener（ "beforeunload"、（）=> {
  //標準では、デフォルト操作のキャンセルが必要です。
  event.preventdefault（）;
  // ChromeにはreturnValueの設定が必要です（MDN経由）
  event.returnValue = '';
}）;

目的：ユーザーがページを離れる前に警告を発します。これは非常に迷惑に聞こえるかもしれませんが、迷惑に使用されることはあまりありません。これは、あなたが取り組んでいるかもしれないウェブサイトに使用され、明示的に保存する必要があります。ユーザーが作業を保存しておらず、去ろうとしている場合は、この方法を使用して警告することができます。彼らが彼らの仕事を保存した場合、あなたはそれを削除する必要があります。

仕組み： beforeunloadイベントをウィンドウに添付した場合（上記のスニペットに示されている他のアクションを実行した場合）、ユーザーがページを離れようとすると、ポップアップが表示されます。サイトを離れるのは、ユーザーがリンクをクリックしたためかもしれませんが、ブラウザの更新またはバックボタンをクリックした結果である可能性もあります。メッセージをカスタマイズすることはできません。

MDNは、一部のブラウザがページを機能させるためにページとのやり取りが必要であることを警告しています。

不要なポップアップと戦うために、一部のブラウザは、ページが対話していない限り、 beforeunloadイベントハンドラーに作成されたプロンプトを表示しません。また、一部のブラウザはまったく表示されません。

代替：何も考えられません。これがユーザーが作業を失うことに問題がある場合は、それを使用する必要があります。彼らが滞在することを選択した場合、あなたは彼らが去ることが安全であることを確認するために何をすべきかを明確にするべきです。

アクセシビリティ

ネイティブのJavaScriptアラートは、アクセシビリティの世界では不人気でしたが、スクリーンリーダーは処理方法が賢くなっているようです。ペンシルベニア州のアクセシビリティガイドラインによると：

アラートボックスの使用はかつて奨励されていませんでしたが、実際には最新のスクリーンリーダーでアクセスできます。

独自のモーダルウィンドウを作成するときは、アクセシビリティを必ず考慮してください。ただし、方向を向けることができる優れたリソース（IRE Aderinokunによるこの投稿など）があります。

一般的な代替案

独自のポップアップを作成したり、モーダルウィンドウライブラリを使用したり、アラートライブラリを使用したりするなど、ネイティブのJavaScriptポップアップには多くの選択肢があります。導入したものはどれもJavaScriptの実行とユーザーの相互作用を完全に防ぐことはできないことを忘れないでください。

ネイティブのHTMLを見たいかもしれません<dialog></dialog>要素。クリスは最近、それに関する実践的な研究を実施しました。それは魅力的ですが、明らかにいくつかの大きなアクセシビリティの問題があります。モーダルウィンドウを処理することは非常に重要なインタラクティブな要素であるため、自分のポップアップを構築する方が良いか悪いかはわかりません。 Bootstrapなどの一部のUIライブラリはモーダルウィンドウを提供しますが、アクセシビリティは主に手にあります。 A11y-Dialogのようなプロジェクトをチェックアウトすることをお勧めします。

要約します

Webプラットフォームの組み込みAPIを使用することは正しいことのようです。機能をコピーするために多くのJavaScriptコードを送信する代わりに、すでに組み込まれている機能を使用します。ただし、ネイティブのJavaScriptポップアップを使用するのに役立たない深刻な制限、ユーザーエクスペリエンスの問題、パフォーマンスの問題があります。それらが何であり、どのように使用するかを知ることが重要ですが、制作Webサイトではそれらをあまり必要としないかもしれません。

以上がさまざまな種類のネイティブJavaScriptポップアップを比較しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。