みなさん、こんにちは！
ブリュの公式ブログ.netにお越しいただきまして、ありがとうございます。
このサイトでは、ITについて特化したサイトを運営しています。
今回は、JavaScriptの小技です。
FirefoxでAjaxが動作しないときの解決策を紹介します。
これは、クリック時にAjaxを動作させる際に発生する仕様上の問題となります。
目次
不具合の起こる状況
以下のような状況で不具合が生じます。
- クリックで動作するAjaxを実装している
- GoogleChromeとEdgeでは動作
- FirefoxとIEでは動かない
- 動かないときは?s=***のようなパラメーター付きリンクに飛ばされる
例えば、当サイトのウェブサービスでは、クリック時に動作するAjaxを実装しています。
JavaScriptを有効にしていれば、GoogleChromeとEdgeでは正常動作します。
しかし、FirefoxとIEでは、
https://web.brionac-yu-yake.net/?domain=検索したドメイン名
に飛ばされて、Ajaxが動作しませんでした。
これの解決法です。
クリックイベントが重なる
ブラウザには、デフォルトのクリックイベントが実装されています。
例えば、リンクをクリックすると、リンク先のページが開く、これもブラウザの仕様なんですよね。
すると、クリック時に動作するAjaxを実装した場合、
- 開発者がAjaxを実装したい
- ブラウザがリンク先を開きたい
の動作が重なります。
すると、Ajaxはサーバーと通信することになりますから、当然時間がかかります。
Ajaxによる通信待ち
リンク先のページを開く
が重なったときに、結果、処理が即座に行われる「リンク先のページを開く」が実行されます。
ブラウザ的には、リンク先は、
https://example.com/現在のページ/?変数名=パラメーター
と解釈しますから、そのページに移動。
ページの移動によりAjaxの処理が中断される。
こんな動作で、最終的にAjaxの正常な動作を妨げていたことになります。
Firefoxのデフォルトのクリックイベントを無効化
解決策は簡単です。
クリック時にブラウザのデフォルトの動作を無効にすればいいだけです。
クリック時に動作する関数の先頭部分に、以下のコードを追加してください。
|
1 |
event.preventDefault();//ブラウザ動作の無効化 |
これだけです。
これで、ブラウザのデフォルトのクリック時のイベントが無効になりますから、クリック反応型のAjaxが動作します。
なお、JavaScriptはブラウザキャッシュが効いていますから、更新後は「Cttl+F5」の更新を忘れずに。
まとめ
プログラミングの不具合は、原因が分かれば簡単なのですが、一番の問題は原因がわからないこと。
特に今回の場合には、GoogleChromeとFirefoxの仕様の違いによる不具合でした。
経験的には、
- GoogleChromeが意図を汲んだ賢い動作
- Firefoxの動作が最も自然にコードを解釈した動作
をします。
デベロッパーツールはGoogleChromeの方が使いやすいので、GoogleChrome主体で開発しがちですが、必ずFirefoxでも動作確認をしてください。
Firefoxで動作するものはGoogleChromeで動作します。
しかし、GoogleChromeで動作するものはFirefoxでは動作しないことは十分にありますから。
以上、FirefoxでAjaxが動作しないときの参考になれば幸いです。
