「javascript:void(0)」の意味とは?リンクが開かない時の対処法も
Webページのボタンに「javascript:void(0)」をつけることができますが、どんな意味を持つものか理解しなければ使いこなすことはできません。「javascript:void(0)」はどういったものか、リンクが開かない場合の対処法とともに解説します。
「javascript:void(0)」の意味とは?
Webページの構築にはタグやCSSなどを組み合わせる必要がありますが、挙動の変更をするためにはJavaScriptを利用することも多いです。
その際に「javascript:void(0)」を利用する人もいる中、指定しているわけでもないのにリンクを押すと「javascript:void(0)」が出てしまいリンクが表示されないこともあります。
「javascript:void(0)」の意味
実際に「javascript:void(0)」を利用したい、Webページの挙動確認時に「javascript:void(0)」が表示されてリンクが出ない場合など、「javascript:void(0)」の意味とはどういったものかを知りたいということはあるかと思います。
WEBページ上のボタンをJavaScriptでアクションさせる場合に書く
「javascript:void(0)」とは、Webページ上にあるボタンをJavaScriptを利用して指定した動作をさせる際に利用されるものです。
設定していなくても、何らかの拍子に定義されていないとして、リンクボタンを押した際に「javascript:void(0)」が表示されることもあります。
a タグの画面遷移を無効化できる
「javascript:void(0)」はリンクのタグであるaタグで、画面遷移を無効化する際によく利用されていました。通常、aタグは下記のような形で記載され、記載したURLに画面遷移するように設定されます。
<a href="https://appli-world.jp/"> |
「javascript:void(0)」を使うと画面遷移が起きない仕組み
本来の挙動はaタグですのでクリックすると指定したリンク先に遷移するのですが、リンクの代わりに「javascript:void(0)」を指定することでWebページの遷移を無効化し、JavaScriptでリンク先への遷移とは異なる挙動をするよう設定できます。
<a href="javascript:void(0);"> |
voidはJavaScriptの関数で、これに「0」という値を入れているものです。void演算子は、どのような値を指定した場合も「undefined」という、定義されていない無効なものを示すものとして返してくれます。
0は入力しなくても意味は同じなので結局は「undefined」で返されるのですが、画面上のポップアップには引数として使用した式が実行されて表示されることは変わらないため、わかりやすい数値である「0」を指定してあるだけです。
別の値を入力しても結果は変わらず「undefined」なためです。
挙動はマウスオーバーしたときにカーソルを表示させる、というだけのものですのでそもそも使う場所が少ないです。
「javascript:void(0)」はaタグの「href」属性に対して指定する形で活用されますがWebページの見栄えの問題、CSSで処理して同じような挙動を設定できることなどから現在は使われないようになっています。
「javascript:void(0)」のリンクが開かない時の対処法
「javascript:void(0)」の意味が分かったところで、今度は「javascript:void(0)」を指定しないリンクにも関わらず「javascript:void(0)」が表示されてリンクが開かない、という場合の原因と対処法も確認していきましょう。
リンクをクリックしても「javascript:void(0)」が表示されてリンクが開かない場合、原因としてはページ内にあるJavaScriptのコードが正しく動作していないことが考えられます。
これは利用しているブラウザの設定が原因である場合もあれば、Webブラウザ側に原因があることもあります。
ブラウザを再起動
「javascript:void(0)」が表示されてリンクボタンを押してもリンクが開かない場合、まずは利用しているブラウザを再起動してみましょう。ブラウザに一時的なエラーが起きている場合二それを解消することができるためです。
ブラウザの再起動で、ブラウザに生じているエラーが改善することが多いため、再起動後そのサイトを開いてみて、「javascript:void(0)」が出てボタンを押しても開かないということが起きないかどうか確認してみましょう。
JavaScriptを有効に変更
ブラウザでJavaScriptを有効化していないと、Webサイトで動作しているJavaScriptのコードが正しく動作しません。それにより、リンクがあるボタンをクリックしてもリンクが開かず「javascript:void(0)」が表示されることがあります。
この場合、JavaScriptをブラウザ側で有効化してください。主要なブラウザであるMicrosoft Edge、Google Chrome、Firefoxでのやり方をそれぞれ説明します。
Microsoft Edgeの場合、メニューから「設定」を開きます。
左側のメニューで「Cookieとサイトのアクセス許可」をクリックし、右側に表示されている「JavaScript」をクリックします。
「許可」のスイッチをオンにすれば、JavaScriptを有効化できます。
Google Chromeの場合、メニューから設定を開きましょう。
「プライバシーとセキュリティ」で「サイトの設定」を開きます。
「コンテンツ」内にある「JavaScript」を押します。
「サイトがJavaScriptを使用できるようにする」を選択しましょう。これで完了です。
Firefoxの場合は「about:config」をアドレスバーに入力してください。
ポップアップが表示されるため「危険性を承知の上で使用する」をクリックしましょう。
「設定名を検索」の欄に「javascript.enabled」を入力してください。
右側に表示されている矢印を押して「true」に切り替えればJavaScriptの有効化が完了します。いずれのブラウザも、JavaScriptを有効化した後はWebページに再アクセスして、JavaScriptを含め正常にページが表示されるか確認してください。
ページを強制再読み込み/スーパーリロードしてみる
JavaScriptの有効化後も「javascript:void(0)」が表示される場合、ページを強制再読み込み/スーパーリロードをしてみましょう。
ページの強制再読み込みは、キャッシュを無視した状態でページ内容を再度サーバーから取得するため、キャッシュの影響を受けずにWebページを再読込することができます。
[Ctrl]+[F5]キーを押すことで強制再読み込み/スーパーリロードが可能ですので試してみましょう。その後、リンクボタンをクリックしてリンクが開かないエラーが改善しているか確認してみましょう。
ブラウザのキャッシュ/Coockieをクリア
それでも改善しない場合はブラウザ自体のキャッシュやCookieをクリアしましょう。
Microsoft Edgeの場合、メニューから履歴を開きます。
履歴画面のメニューを開き「履歴データをクリア」をクリックします。
期間は「すべての期間」、削除する対象として「閲覧履歴」「ダウンロードの履歴」「Cookieおよびその他のサイトデータ」「キャッシュされた画像とファイル」にチェックを入れ、「今すぐクリア」しましょう。
Google Chromeの場合、メニューから「その他のツール」→「閲覧履歴を消去」を開きます。
期間は「全期間」、削除する対象として「閲覧履歴」「Cookieと他のサイトデータ」「キャッシュされた画像とファイル」にチェックを入れ、「データを削除」してください。
Firefoxの場合、メニューから設定を開きます。
「プライバシーとセキュリティ」を開き、「履歴を消去」をクリックしてください。
「消去する履歴の期間」は「すべての履歴」に、削除対象は「表示したページとダウンロードの履歴」「Cookie」「キャッシュ」にして「今すぐ消去」をしましょう。
ブラウザの拡張機能を無効化
ブラウザの拡張機能が原因であることもあるため、そちらも無効化してみてください。拡張機能欄を開いて、それぞれのブラウザですべての拡張機能をオフにすることで可能です。
Microsoft Edgeはメニューから「拡張機能」をクリックします。
「拡張機能の管理」から拡張機能一覧を開くことができます。
Google Chromeはメニューから「拡張機能」を開けば拡張機能一覧を表示できます。
Firefoxの場合メニューから「アドオンとテーマ」を開けば拡張機能一覧を開くことが可能です。いずれのブラウザも、拡張機能無効化後、ブラウザでWebページの再読み込みをしてみて、問題が改善しているか確認してみましょう。
最後に
定義なしを意味する「javascript:void(0)」はリンクなしのボタンに利用されることがありますが、稀にリンク付きのページでも表示されることがあります。この記事で紹介した対処法を参考に対応してみてください。