家 › 電話 › HTML5を使用したブラウザのコンテキストメニュー。 JavaScript を使用したカスタムコンテキストメニューブラウザにマウスクリック可能なメニューがない

HTML5を使用したブラウザのコンテキストメニュー。 JavaScript を使用したカスタムコンテキストメニューブラウザにマウスクリック可能なメニューがない

今日の Web アプリケーションは、Web 開発への新たなステップになりつつあります。これらは通常の情報サイトとはかけ離れています。高度な Web アプリケーションの例には、Gmail や Dropbox などがあります。 Web アプリケーションの機能、可用性、有用性が向上するにつれて、その使用効率を高める必要性も高まっています。このガイドでは、独自のコンテキストメニューなど、特に次のような便利なものの作成について説明します。

コンテキストメニューとは何なのか、そしてなぜそれが必要なのかを理解してみましょう。
JS と CSS を使用して独自のコンテキストメニューを実装してみましょう。
これらすべてを運用環境に導入するときにどのような問題が警告されるかを知るために、使用されるアプローチの欠点と制限について触れてみましょう。

コンテキストメニューとは何ですか?

Wikipedia によると、コンテキストメニューは、ユーザーが (マウスを右クリックして) グラフィカルインターフェイスを操作するときに表示されるメニューです。コンテキストメニューには、選択されたオブジェクトに通常関連付けられている、可能なアクションの限られたセットが含まれています。

コンピュータでは、デスクトップを右クリックすると、オペレーティングシステムのコンテキストメニューが表示されます。ここから、おそらく新しいフォルダーを作成し、情報を取得し、他のことを行うことができます。ブラウザのコンテキストメニューを使用すると、たとえば、ページに関する情報の取得、ソースの表示、画像の保存、新しいタブでリンクを開く、クリップボードの操作などが可能になります。さらに、利用可能なアクションのセットは、正確にクリックした場所、つまりコンテキストによって異なります。これはブラウザ開発者が意図した標準的な動作です [ そしてそれの拡張].

Web アプリケーションは、標準のコンテキストメニューを独自のコンテキストメニューに徐々に置き換え始めています。良い例は Gmail や Dropbox です。唯一の問題は、独自のコンテキストメニューを作成する方法です。ブラウザでマウスを右クリックすると、コンテキストメニューイベントがトリガーされます。デフォルトの動作をオーバーライドして、標準メニューの代わりに独自の動作を表示するようにする必要があります。それほど難しいことではありませんが、段階的に説明していくので、内容はかなり広範囲になります。まず、開発中のサンプルが現実から完全に乖離しないように、アプリケーションの基本構造を作成しましょう。

タスクリスト

タスクのリストを管理できるアプリケーションを作成していると想像してみましょう。おそらくすでにこれらすべてのタスクリストにうんざりしていることと思いますが、それでも構いません。申請ページには、未完了のタスクのリストが含まれています。タスクごとに、典型的な CRUD アクションのセット (タスクに関する情報の取得、新しいタスクの追加、編集、削除) を使用できます。

翻訳者より
翻訳はかなり自由な箇所もありますが、意味や内容を損なうことはありません。原作とは直接関係のないものはすべてメモに含まれます。
いつものように、PM で提案、要望、コメントをお送りください。

このチュートリアルでは、めったに言及されない HTML5 機能であるコンテキストメニューを見ていきます。このメニューについて聞いたことがないかもしれませんが、状況によっては非常に便利です。

contextmenu 属性は何に使用されるのでしょうか? Javascript が無効になっている場合でも、わずか数行の HTML コードを使用して、ブラウザの右クリックコンテキストメニューにさまざまなオプションを追加できます。現時点では、このような便利なツールは Firefox でのみ利用可能ですが。

仕組みは次のとおりです。

コンテキストメニューの使用は、一見したよりもはるかに簡単です。 contextmenu 属性を追加する必要があります。

次に、メニューを作成します。

id 属性は contextmenu 属性と一致する必要があります。したがって、ページの異なる部分に異なるコンテキストメニューを使用することができます。

次に、メニュー項目を追加します。まず、テキストとアイコンを含むメニュー項目を挿入し、次に Facebook で現在のページをブロードキャストするためのリンクを追加し、最後にページを更新するためのリンクを挿入します。これにより、次の 3 つの項目を含むコンテキストメニューが表示されます。

サブメニューを作成することもできます。

HTML5 の非常に興味深く便利なプロパティです。ただし、その使用は Firefox ブラウザーにのみ限定されます。

一部のサイトでは画像を右クリックしても何も表示されないことに気づきましたか。ボタンが何もせずクリックしているように見えますが、ブラウザはそれを気にせず、「フリーズして考え込んでいる」のです。実際には、ブラウザは、読み込まれたページの JavaScript スクリプトからそのようなコマンドを受信した後、クリックをブロックするだけです。

どうやって右ボタンのロックを解除する画像をクリックしてオフラインで閲覧できるように保存するには? ほとんどのインターネットブラウザでは、詳細設定を「掘り下げる」にはこれで十分です。 JavaScript.. それで…

あなたが持っている場合 " オペラ»:
1. 「ツール」→「一般設定」の順に進みます。
2. 表示されるウィンドウで、「コンテンツ」項目に移動し、「JavaScript の構成」ボタンを見つけます (図 1 を参照)。

3. それをクリックして、詳細な JavaScript 設定ウィンドウを開き、「右ボタンをブロック」行の横にあるボックスのチェックを外します。
確認後 (「OK」をクリック)、このボタンはコンテキストメニューを呼び出すことが「自由」になります。ちなみに「」では、 ファイアフォックス「右ボタンのロックを解除するには、この項目の横にあるボックスのチェックを外す必要があります (図 2 を参照)。

他の高度なブラウザーでも、同じ高度な JavaScript 設定を使用して、右ボタンのブロックは同じ方法で削除されます。

コンテキストメニューとは、画面上で右クリックすると表示されるメニューです。通常、このようなメニューは、フォルダーやファイルの並べ替え、新しいアプリケーションウィンドウの開き、システム設定へのアクセスなど、お気に入りのアクションを簡単に実行できるようにするために使用されます。

長年にわたり、「コンテキストメニュー」という用語は主にネイティブアプリケーションを指しました。ただし、Web アプリケーションでもそれを利用できるようになりました。例としては、Gmil のファイルマネージャーがあります。このメニューは JavaScript コードを使用して実装されます。

将来的には、HTML5 ベースのサイトのコンテキストメニューを作成できるようになります。ぜひこのアプローチに慣れてください。

コンテキストメニューの開発

HTML5 では、menu と menuitem という 2 つの新しい要素が導入され、コンテキストメニューを作成できるようになります。ブラウザがメニュー要素を「コンテキストメニュー」として扱うには、メニュータイプをコンテキストに設定し、一意の ID を与える必要があります。

以下は、これらのプロパティを使用してコンテキストメニューを作成する例です。

次のようにメニュー要素を分岐させることでサブメニューを追加することもできます。

右クリックしたときにコンテキストメニューが画面に表示されるように、contextmenu という新しい HTML 属性を使用します。この属性は、指定された ID を持つメニューを識別するために使用されます。上記の例を考えると、contextmenu=context-menu-id を使用してコンテキストメニューを定義できます。

ページ全体でコンテキストメニューを使用したい場合は、body タグに属性を設定できます。これを HTML 要素に追加して、メニューがその要素内でのみ使用されるようにすることもできます。

以下の例に示すように、新しいコンテキストメニューがオペレーティングシステムメニュー内に表示されます。

アイコンを追加する

アイコンを使ったコンテキストメニューを見たことがある人も多いと思います。場合によっては、アイコンはユーザーがメニューを見つけるのに役立つ優れた視覚補助となることがあります。さらに、ユーザーはメニューの目的を理解することもできます。

icon 属性を使用して、HTML5 コンテキストメニューにアイコンを追加することもできます。

これがブラウザウィンドウに表示される内容です。

メニューを機能させる

この段階では、新しいコンテキストメニューをクリックしても機能しません。ただし、少しの JavaScript コードを使用するだけで、非常に簡単に実現できます。この例では、メニューは「電子メール選択」と呼ばれます。このメニューを使用すると、ユーザーは選択したテキストを電子メールで送信できます。

これを機能させるには、ユーザーがその背後でコードを使用できるようにする機能を追加しましょう。

関数 getSelectedText() (
var text = "";
if(window.getSelection) (
テキスト = window.getSelection().toString();
) else if (document.selection && document.selection.type != "コントロール") (
テキスト = document.selection.createRange().text;
}
テキストを返します。
};
次に、電子メールクライアントを開く別の関数、たとえば sendEmail() を作成します。電子メールの件名はドキュメントのタイトルから入力されたテキストになり、電子メールの本文には選択したテキストが入力されます。

関数 sendEmail() (
var bodyText = getSelectedText();
window.location.href = "mailto:?subject="+ document.title +"&body="+ bodyText +"";
};
最後に、onclick 属性を使用してこの機能をメニューに追加します。

電子メールの選択
以前に、Web コンテンツをページ上で直接編集できる HTML5 EditableContent の使用方法について説明しました。この機能は、「コンテンツの編集」というメニューに追加することで使用できます。

結論は

個人的に、私たちはこの新機能に非常に興奮しています。私たちはそこに多くのチャンスがあると考えています。残念ながら、この資料の執筆時点では、Firefox のみがこのプロパティをサポートしていました。他のブラウザでもすぐに接続できるようになる予定です。

以下のデモをご覧いただけます (Firefox でのみ動作します)。

すべてのデバイスの操作。故障や故障が発生した場合、必ずしも専門家に電話する必要はなく、場合によってはかなり高額なサービス料金を支払うことになります。多くの欠点やエラーは自分で修正できます。これらのタイプの失敗およびエラーには、マウスの右ボタンでコンテキストメニューが開かない場合が含まれます。このような場合はどうすればよいでしょうか?

まず、誤動作が発生する理由、Windows 10 のコンテキストメニューが機能しない理由を確認する必要があります。これにはいくつかの理由が考えられます。

古いファイルによるレジストリの混乱。
コンテキストメニューに含まれるプログラムが不足しており、動作が不安定です。

このような場合にどうすればよいのか、右クリックのコンテキストメニューが開かない場合の状況をどのように変更するかを考えてみましょう。

レジストリが古いファイルでいっぱいになっているために右クリックのコンテキストメニューが表示されない場合は、Glary Utilities などのユーティリティを使用してクリーンアップすることをお勧めします。 Glary Utilities は、PC のパフォーマンスの保護、微調整、向上に役立つシステム調整ツールとユーティリティのセットです。このセットを使用すると、システムを詰まらせる不要なファイル、古くなったレジストリエントリの削除、RAM の最適化、スタートアップの管理、メモリの最適化、およびコンピュータの良好な機能に役立つその他の機能を実行できます。 Glary ユーティリティは無料でダウンロードできます。

設定を行った後、同じユーティリティを使用してデバイスから不要なファイルを削除し、レジストリをクリーンアップすると、コンピュータのパフォーマンスが向上します。

フリーズエラーの修正

ファイルまたはフォルダーを右クリックしたときに、デスクトップのコンテキストメニューが機能せず、コンピューターがフリーズし、キーがコマンドに応答しない場合は、2 つの方法でこのフリーズを解消できます。両方を順番に実行することをお勧めします。これらのいずれかを開始する前に、管理者権限が必要です。レジストリを操作する必要がありますが、これを誤るとシステムが失敗する可能性があるので注意してください。したがって、障害を修正するプロセスを開始するときは、何かを削除する前に必ずシステムの復元ポイントを作成してください。

「サイレント」フリーズは通常、不安定なプログラム、フリーズしたプログラム、またはコンテキストメニュー内のリンクが存在しないリソースを指している場合に発生します。

方法 1

次の手順を順番に実行してください。

表示されるリストで、既に削除したプログラムが存在するかどうかを確認します。
削除したプログラムがリストにある場合は、それをレジストリから削除します。レジストリキーを削除する前に、復元する必要がある場合に備えて、そのアーカイブコピーを作成して保存しておくことをお勧めします。

方法 2

Windows 10 のコンテキストメニューが開かない場合の 2 番目の方法のアルゴリズムは次のとおりです。

前の方法の手順 1 ～ 2 の説明に従って、レジストリエディターを開きます。
HKEY_CLASSES_ROOT サブキーを開きます。
その中には、「name_programm.exe」、「name_programm.dll」などの名前を持ついくつかのサブセクションが表示されます。「コマンド」サブセクションが表示されるまで左クリックして、それぞれを順番に確認します。すべてのサブセクションが開くはずです。開かない場合は、ウィンドウの右側に「NoOpenWith」パラメータがあるかどうかを確認してください。そのようなパラメータはありませんので、作成してください。これを行うには、次の手順に従います。

「command」サブセクションを見つけたら、LMB をクリックして、右側に「(Default)」パラメータの存在を確認します。このパラメーターは、コンピューター上に存在するアプリケーションまたはネットワークリソースに対して指定する必要があります。

パラメータがすでに存在しないリソースを参照している場合は、このリソースまたはプログラムの名前で始まるセクション全体を削除する必要があります。削除する前に、必要に応じて復元用のアーカイブコピーを作成することを忘れないでください。 RMB セクションの名前をクリックし、「削除」-「はい」をクリックして削除します。

2 つの方法を完了すると、コンテキストメニューが開き、ファイルを右クリックしても PC がフリーズしなくなります。

コンテキストメニューの設定は難しくありませんが、レジストリを変更しようとすると PC の動作が不安定になる可能性があるので、復元ポイントや削除されたプログラムのバックアップコピーを作成することを忘れないでください。マウスの右ボタンでコンテキストメニューが開かない場合は、上記の手順を順番に実行し、すべての方法を適用すると、エラーが修正されます。

カテゴリ内で人気のあるもの: