web-dev-qa-db-ja.com

ブラウザーがInternet Explorer 9以降でない場合にメッセージを表示する

次の場合、このようなバーをユーザーに表示したいと思います。

  1. ブラウザはIEではありません。または
  2. ブラウザはIEですが、バージョン8以前です

http://blog.integryst.com/webcenter-interaction/files/2011/10/ie9-support-confluence.png

（スクリーンショットは説明用であることに注意してください-IE 9isは私のサイトでサポートされています。）

この素敵なjQueryプラグインを見つけましたが、ポップアップを使いたくありません。

http://jreject.turnwheel.com/

これを実装するサイトはSharepoint 2013サイトです。したがって、コンテンツエディターWebパーツを使用して、提供するHTMLコンテンツを含めます。バーは他のすべての最上部にある必要があります。

スクリーンショットのように見えるようにする必要がある場合は、CSSを含めてください。

javascriptjquerycssinternet-explorerbrowser-detection
20
Luis Valencia

HTML

IE 9およびそれ以前（IE 4）まで）は、HTMLで 条件付きコメント を使用して識別できます。

@ Jost前述 のように、これらを使用してIE IE 8以前のユーザー、次のように警告します。

<!--[if lte IE 8]>
    BANNER HERE
<![endif]-->

ただし、IE 10はこれらのサポートを廃止したため、これらを使用してIE以外のブラウザを識別することはできません。

jQuery

ブラウザ検出モジュールを含めるために使用されるjQuery（ $.browser ）、ただし jQuery 1.9で削除されました 。以前のバージョンのjQuery（例 1.8. ）または jQuery Migrateプラグイン を使用できる場合、これを使用してバナーを表示できます。

if ( !$.browser.msie || $.browser.version < 9 ) {
    // Add banner to the page here.
}

一般的なブラウザ検出

ブラウザの検出は難しいことに注意してください。新しいブラウザは常に登場しているので、警告メッセージの基になっている前提がそうであるように、ブラウザサポートプラグインは急速に古くなってしまいます。 jQueryのブラウザ検出は最も一貫して維持され、最終的にはそれをあきらめました。

最近では、Web開発者は一般にクロスブラウザで動作するコードを記述し、機能検出を使用して、使用したい機能をサポートしていないブラウザに対処することが期待されています。

SharePointサイトで作業している場合、おそらく社内用であり、会社はMicrosoft中心です。 IEで動作するようにサイトを開発していて、開発中は他のブラウザーを無視しているようです。

ほとんどのユーザーが何らかのバージョンのIEを使用していると合理的に予想できる場合は、おそらく条件付きコメント警告で十分です。

13
Paul D. Waite

私はこの質問を興味深いと感じました。だから私は自分でスクリプトを作成しましたが、おそらく他の誰かがそれから利益を得ることができます。だから、私は答えとしてそれを投稿しました。ブラウザとOSの情報を含むオブジェクトを返します。

browser = {};
if (/Edge\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "Edge";
    browser.majorVersion = parseInt(/Edge\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /Edge\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/chrome\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "chrome";
    browser.majorVersion = parseInt(/chrome\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /chrome\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/firefox\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "firefox";
    browser.majorVersion = parseInt(/firefox\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /firefox\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/msie\ [0-9]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = parseInt(/MSIE\ ([0-9]{1})/i.exec(navigator.userAgent)[1]);
    browser.version = /MSIE\ ([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/opr\/[0-9]{2}/i.test(navigator.userAgent)) {
    browser.agent = "opera";
    browser.majorVersion = parseInt(/opr\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /opera\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else if (/Trident\/[7]{1}/i.test(navigator.userAgent)) {
    browser.agent = "msie";
    browser.majorVersion = 11;
    browser.version = "11";
} else if (/Safari\/[0-9.]+/i.test(navigator.userAgent)) {
    browser.agent = "safari";
    browser.majorVersion = parseInt(/Version\/([0-9]{2})/i.exec(navigator.userAgent)[1]);
    browser.version = /Version\/([0-9.]+)/i.exec(navigator.userAgent)[1];
} else {
    browser.agent = false;
    browser.majorVersion = false;
    browser.version  = false;
}

if (/Windows\ NT/.test(navigator.userAgent)) {
    browser.os = "windows";
    var winver = parseFloat(/Windows\ NT\ ([0-9]{1,2}\.[0-9]{1})/i.exec(navigator.userAgent)[1]);
    switch(winver) {
    case 6.0:
        browser.osversion = "Vista";
        break;
    case 6.1:
        browser.osversion = "7";
        break;
    case 6.2:
        browser.osversion = "8";
        break;
    case 6.3:
        browser.osversion = "8.1";
        break;
    case 10.0:
        browser.osversion = "10";
        break;
    default:
        browser.osversion = false;
    }
} else if (/OS\ X\ /.test(navigator.userAgent)) {
    browser.os = "os x"; // 
    browser.osversion = /OS\ X\ [0-9]{2}_([0-9]{1,2})_[0-9]{1,2}/i.exec(navigator.userAgent)[1];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "linux";
    browser.osversion = false;
}
12
Dany

ブラウザエンジンがTrident 6+（IE 9、10、11）であるかどうかを確認する（ demo ）：

(function () {
  var trident = {
    string: navigator.userAgent.match(/Trident\/(\d+)/)
  };

  trident.version = trident.string ? parseInt(trident.string[1], 10) : null;

  if (!trident.string || trident.version < 6) {
    document.body.innerHTML = '<div class="alert">Not supported.</div>' +
      document.body.innerHTML;
  }
})();

ただし、MicrosoftがuserAgent文字列の変更を決定した場合、スニッフィングはIE 11の最終バージョンまたは将来のバージョンで中断する可能性があります。

2
Pavlo

編集：これはOPに直接答えます。

Danyの答えを更新しました（IE 6,7,8,9,10,11）（ChromeとEdge）。主に、更新をコメントで読むのが非常に難しいためです。

  • 純粋なJavaScript-jQueryは不要
  • IE10レポートIE 10 vs IE 1
  • これでEdgeがレポートされるようになりました
  • 事前に存在する必要のある特定のHTML要素はありません（本文以外）
  • IE6、IE7、IE8、IE9、IE11、Chrome v62、およびEdgeでテスト済み
  • TODO：OSX SierraおよびiPhoneで正常に動作するようにします

Edgeのテストは、すべてであると主張するため、最初にする必要があります。 ：/

ブラウザの検出は「それが何であるか」と言われており、その必要性がすぐになくなることを期待できます。

browser = {};
if (/(Edge\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(Edge\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(chrome\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(chrome\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(firefox\/[0-9]{2})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(firefox\/[0-9]{2})/i)[0].split("/")[1]);
} else if (/(MSIE\ [0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(MSIE\ [0-9]{1})/i)[0].split(" ")[0];
    browser.version = parseInt(navigator.userAgent.match(/(MSIE\ [0-9]+)/i)[0].split(" ")[1]);
} else if (/(Opera\/[0-9]{1})/i.test(navigator.userAgent)) {
    browser.agent = navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[0];
    browser.version = parseInt(navigator.userAgent.match(/(Opera\/[0-9]{1})/i)[0].split("/")[1]);
} else if (/(Trident\/[7]{1})/i.test(navigator.userAgent)) {
    browser.agent = "MSIE";
    browser.version = 11;
} else {
    browser.agent = false;
    browser.version = false;
}

if (/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "Windows";

    switch (parseFloat(navigator.userAgent.match(/(Windows\ NT\ [0-9]{1}\.[0-9]{1})/)[0].split(" ")[2])) {
        case 6.0:
            browser.osversion = "Vista";
            break;
        case 6.1:
            browser.osversion = "7";
            break;
        case 6.2:
            browser.osversion = "8";
            break;
        default:
            browser.osversion = false;
    }
} else if (/(OS\ X\ [0-9]{2}\.[0-9]{1})/.test(navigator.userAgent)) {
    browser.os = "OS X";
    browser.osversion = navigator.userAgent.match(/(OS\ X\ [0-9]{2}\.[0-9]{1})/)[0].split(" ")[2];
} else if (/(Linux)/.test(navigator.userAgent)) {
    browser.os = "Linux";
    browser.osversion = false;
}

if (browser.agent === "MSIE" && browser.version <= 9) {
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "IE9 is not supported. You are using an UNSUPPORTED version of Internet Explorer.";
    newDiv.setAttribute("style", "background-color:yellow;padding:18px;");
    document.body.insertBefore(newDiv, document.body.firstChild);
} else { //TODO: Remove for Prod only added to show some flexibility and testing 
    var newDiv = document.createElement("div");
    newDiv.innerHTML = "<b>" + browser.agent + "</b> is <i>so</i> supported. You are using version: " + browser.version + ".";
    newDiv.setAttribute("style", "background-color:cyan;padding:12px;");
    document.body.insertBefore(newDiv, document.body.firstChild);
}
2
Joe Johnston

条件付きコンパイルと条件付きコメントを組み合わせて使用​​できます

ここで、これがどのように機能するかの簡単な概要を示します。

  1. 常にバーを表示する
  2. JavaScriptでフラグを設定します。 IEMinor=false
  3. IE <= 9の場合、スクリプトタグと条件付きコメントを使用して、フラグをtrueに設定します。
  4. 条件付きコンパイルを使用して、@_jscript_version > 9（実際には不要）およびIEMinor===false
<div id="bar"><center>Not Supported</center></div>
<script>
  var IEMinor = false;
</script>
<!-- [if lte IE 9] -->
<script>var IEMinor = true</script>
<!-- <![endif] -->
<script>
  /*@cc_on @*/
  /*@if (@_jscript_version > 9)
     if (!IEMinor)
       document.getElementById("bar").style.display = "none";
  /*@end @*/
</script>

スクリプトタイプを追加するのが面倒でした...

JSBin の例は、IE 10+（untested））にバーを表示しません。他の場合に表示します。

注：スクリーンショットとまったく同じようにはしませんでした。その部分を動作させる必要があります

編集：IE IE <10に対してテストするためにbrowsermodeを使用すると、動作するようです
Edit2：IE9の変更を許可するために、IE9の写真から考えたフープもサポートされていませんlte IE 9からlt IE 9および@_jscript_version > 9から>= 9

2
Moritz Roessler

単純な条件付きHTMLが好きです。 （常にシンプルな方が良いようです。）

別のより包括的なJavaScriptアラートは、次の場所にあります。 http://www.browser-update.org

2
Heres2u

実際、SharePointには（OPが言及しているように）組み込み変数browserisがあります。グローバルウィンドウスコープで使用できます。 OPの質問に答える：

  1. ブラウザはIEではありません。
  • browseris.ieを使用します
  1. ブラウザはIEですが、バージョン8以前です
  • browseris.ie8downを使用します

（SP2013オンプレミスでテスト済み）

0
mctl87