JavaScriptでwebサイトを作成している人なら分かると思いますが、IEでは機能しないJavaScriptのコードが多々あるため、IEのみで動かないときにはJavaScriptのどのコードが非対応なのか調べ、書き換える作業が必要です
きちんとしたものを作るのであれば地道にやっていくしかありませんが、私は趣味で個人で作っているだけですのでIEの対応が面倒ですので、使用しているブラウザがIEの場合には「このサイトはIEに対応していません」のメッセージを表示するだけで済ませてしまおうと考えました
そのためには、使用しているブラウザを判定する機能が必要になります
この記事では、JavaScriptで使用しているブラウザを判定する方法について書いていきます
JavaScriptで使用しているブラウザを判定する
以下のコードで、ブラウザのユーザーエージェントの文字列を取得します
1 | var userAgent = window.navigator.userAgent; |
取得できるブラウザの識別子
| ブラウザ | 識別子 |
| IE(10以前) | MSIE |
| IE(11以降) | Trident |
| Edge | Edge |
| Google Chrome | Chrome |
| FireFox | Firefox |
| Safari | Safari |
| Opera | Opera |
IEは10以前と11以降で識別子が異なるので、IEを判定する場合は、MSIEとTridnetの論理和を考える必要があります
これを使って、使用ブラウザがIEか調べて、IEの場合には他のブラウザを推奨するようなコードを書くと
1 2 3 4 | var userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf(‘msie’) != -1 || userAgent.indexOf(‘trident’) != -1) { alert(“Internet Explorerでは動作しません。他のブラウザをご使用ください。”); } |
toLowerCase() メソッドを使って全て小文字にしており、論理和演算子(||)でMSIEとTridnet両方に対応しています
どのブラウザか判別するためのコードは、以下のようになります
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var userAgent = window.navigator.userAgent.toLowerCase(); if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) { alert(“ブラウザはIEです”); } else if(userAgent.indexOf('edge') != -1) { alert(“ブラウザはEdgeです”); } else if(userAgent.indexOf('chrome') != -1) { alert(“ブラウザはChromeです”); } else if(userAgent.indexOf('safari') != -1) { alert(“ブラウザはSafariです”); } else if(userAgent.indexOf('opera') != -1) { alert(“ブラウザはOperaです”); } else if(userAgent.indexOf('firefox') != -1) { alert(“ブラウザはFireFoxです”); } else { alert(“その他のブラウザです”); } |
【参考】
使用しているブラウザを判定したい