ブラウザごとで処理を分けたい

導入した他社サービス（JavaScriptで組込み）がどうやらInternet Explorer（IE）に非対応のようで、IEでの閲覧時には動作しないように判定しないといけなかったのでそのメモ。

とりあえずUserAgentを確認しようと思い以下のコードを各ブラウザで実行。

let userAgent = window.navigator.userAgent;
console.log(userAgent);

これを各ブラウザで実行した結果が以下の通り。SafariだけはMacOSで動作させています。あとはWindows機で実行。

  • Chrome
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36
  • Firefox
    Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0
  • Opera
    Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36 OPR/68.0.3618.165
  • Internet Explorer（Ver.11）
    Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
  • Edge
    Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36 Edg/83.0.478.54
  • Safari
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.4 Safari/605.1.15

IEに含まれている「Trident」をindexOfで文字列検索すればよさそうなんだけど、あれ？昔は「MSIE」とかで判定してなかったっけ？と思って調べたところ、IE11になってUserAgentの文字列が「MSIE」から「Trident」になったようです。Oh……IE…。

IE11とそれ以下のバージョンを判定する

「MSIE」と「Trident」の文字列が含まれていなかったらIEと判定するようにします。大文字小文字が混ざると面倒なので、とりあえず大文字で統一させるためにtoUpperCase()関数でUserAgentを全部大文字にして判定します。

let userAgent = window.navigator.userAgent.toUpperCase();
  
if (userAgent.indexOf('MSIE') === -1 && userAgent.indexOf('TRIDENT') === -1) {
  // IE以外のブラウザでアクセス
  console.log(userAgent);
} else {
  // IEでアクセス
  console.log("IEだ！" + userAgent);
}

これでIE（ver.11）でアクセスしたときに、IEだ！MOZILLA/5.0 (WINDOWS NT 10.0; WOW64; TRIDENT/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; RV:11.0) LIKE GECKOと出てきました。

できた！＼(^o^)／
IEでこんなかんじなので、そのうちSafariが同じようにならないことを願うばかり。

おまけ

最新版のEdgeだと「Edg」となっており「e」がなくなっている模様……。ということはEdgeの判定は「Edg」と「Edge」の両方判定！？と思ったんだけどindexOf()なら「Edg」で両方判定するから大丈夫だ。しかし統一してくれよと思う。