Internet Explorerなんてサポートしたくないので、Internet Explorerでアクセスしてきた人に対応していませんとお知らせを表示する。

15295 ワード
IE InternetExplorer JavaScript JavaScript テキストリンク

ほかのブラウザでは利用できるのに、Internet Explorer(以下 IE)では利用できない機能が多くあります。そのためWeb開発でIEをサポートに含めると、CSS, JavaScriptに結構細かいハックが必要になって工数が増えてしまいます。

なので、できるだけサポートはしたくないですよね。

ただなにも対応しなければ、もしかしたらIEでアクセスしてきた人に「表示が崩れるんだけど」と文句を言われるかもしれません。

なので、「IEは対応していないよ」とWEBページに表示する機能をつけましょう。

IEであるかの判定

IEであることの判定は以下のJavaScriptで判定できます。

userAgent = window.navigator.userAgent.toLocaleLowerCase();
if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
    window.alert('ieですね');
}
  • window.navigatorでブラウザのユーザーエージェントを取得できます。
  • toLocaleLowerCase()で小文字に変換しています
  • indexOf()でmsieかtridentが含まれているか判定しています。

備考

  • IE 7 まではユーザーエージェントにmsieが含まれています。
  • IE 8 ~ IE 10まではユーザーエージェントにmsieとtridentが含まれています。
  • IE 11ではユーザーエージェントにtridentが含まれています。

ということで以上を踏まえて必要最小限のHTMLを作成します。

index.html

<html>
    <head>
        <link rel="stylesheet" href="./forIE.css" />
    </head>
    <body>
        <div id='forIE'>
            <!--    IEで表示する内容    -->
            <h1>このサイトはお使いのブラウザに対応しておりません。</h1>
        </div>
        <div id='root'>
            <!--    他のブラウザで表示するメインコンテンツ    -->
            <h1>hello world</h1>
        </div>
        <script src="./forIE.js" async></script>
    </body>
</html>

forIE.js

document.addEventListener('DOMContentLoaded', function () {
  var userAgent = window.navigator.userAgent.toLocaleLowerCase();
  if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
    var forIE = document.getElementById('forIE');
    forIE.style.display = 'block';

    document.getElementById('root').style.display = 'none';
  }
});

forIE.css

#forIE {
  display: none;
}

解説

document.addEventListener('DOMContentLoaded', function() }{})でDOMの解析が終了してから表示の切り替えを行っています。
IEで表示するHTMLと、その他のブラウザで表示するHTMLを分離しています。
<div id='forIE'></div>で囲まれた部分がIEで表示される箇所です。サポートしているブラウザのリンクなどを記述しておくと親切かもしれません。

使用OSがWin10の時、Edgeで開くボタンを表示する。

もし訪問者がWin10であるのなら、Edgeがインストールされていると思われるので、Edgeで開くリンクを用意すると親切でしょう。

以下のようにすれば、Edgeで開くリンクを用意できます。

<a href="microsoft-edge:http://*****.com">
    <span>Edgeで開く</span>
</a>

Windows 10であるかどうかの判別は以下のコードで行えます。

userAgent = window.navigator.userAgent.toLocaleLowerCase();
if (userAgent.indexOf('windows nt 10') != -1) {
   // Win 10での処理
}

よって、IEでアクセスしてきたときには、対応していないメッセージを表示し、Win10のときはEdgeで開くボタンも用意する場合、コードは以下のようになります。

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <script src="./forIE.js" async></script>
    <link rel="stylesheet" href="./forIE.css" />
  </head>
  <body>
    <div id="forIE">
      <h1>
        このサイトはお使いのブラウザ(Internet Explorer)には対応しておりません
      </h1>
      <div id="forWin10">
        <a href="microsoft-edge:http://*****.com">対応ブラウザの「Microsoft Edge」で開く</a>
      </div>
    </div>
    <div id="root">
      <h1>Hello World</h1>
    </div>
  </body>
</html>
forIE.css
#forIE {
  display: none;
}

#forWin10 {
  display: none;
}
forIE.js
document.addEventListener('DOMContentLoaded', function () {
  var userAgent = window.navigator.userAgent.toLocaleLowerCase();
  if (userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
    var forIE = document.getElementById('forIE');
    forIE.style.display = 'block';
    console.log(userAgent);
    document.getElementById('root').style.display = 'none';

    // for win10
    if (userAgent.indexOf('windows nt 10') != -1) {
      var forWin10 = document.getElementById('forWin10');
      forWin10.style.display = 'block';
    }
  }
});

偏見ですが、今でもIEを使っている方はそれほどパソコンに詳しいとは思えないので、「サポートブラウザで開いてね」って言ってもわからないと思うので、なるべく親切なUIを構築したいですね。

まとめ

  • window.navigator.userAgent.toLocaleLowerCase();でユーザーエージェントが取得できる
  • msieまたはtridentが含まれていたらIEだと判定できる
  • <a href="microsoft-edge:http://*****.com">Edgeで開く</a> ← で「Edgeで開く」リンクを用意できる

以上です。

やっていることは簡単なことですが、みんさんの参考になれば幸いです。

[leetcode-763] Partition Labels
Right-heavy tree-デカルトの木