21

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

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

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

(スクリーンショットは説明のためのものであることに注意してください。IE 9は私のサイトでサポートされています。)

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

http://jreject.turnwheel.com/

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

スクリーンショットのように見せるために、必要に応じて CSS を含めてください。

4

10 に答える 10

13

その質問は興味深いと思いました。だから私は自分のためにスクリプトを作成しましたが、他の誰かがそれから利益を得ることができるかもしれません. そのため、回答として投稿しました。ブラウザーと 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;
}
于 2013-09-11T13:28:29.110 に答える
13

HTML

IE 9 以前 (IE 4 までだと思います) は、HTML の条件付きコメントを使用して識別できます。

@Jostが指摘したように、次のように、IE 8 以前の IE ユーザーに警告するために使用できます。

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

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

jQuery

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

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

一般的なブラウザ検出

ブラウザの検出が難しいことに注意してください。新しいブラウザは常に登場しているため、警告メッセージの根拠となる前提と同様に、ブラウザ サポート プラグインは急速に時代遅れになる可能性があります。jQuery のブラウザー検出は、最も一貫して維持されており、最終的にはあきらめました。

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

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

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

于 2013-09-11T12:10:47.743 に答える
2

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

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

  1. バーを常に表示する
  2. JavaScript でフラグを設定します。IEMinor=false
  3. script タグと条件付きコメントを使用して、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>

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

これは、IE 10+ (未テスト)でバーを表示しないJSBinの例です。そして、他の場合にそれを示します。

注: スクリーンショットとまったく同じようにはしていません。その部分が機能するはずです。

編集: IE のbrowsermodeを使用して IE<10 に対してテストするようです
lte IE 9lt IE 9@_jscript_version > 9>= 9

于 2013-09-11T12:27:27.560 に答える
2

ブラウザ エンジンが 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 が文字列の変更を決定した場合、IE 11 の最終バージョンまたは将来のバージョンでスニッフィングが機能しなくなる可能性がありuserAgentます。

于 2013-09-11T12:34:02.393 に答える
0

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

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

(SP2013 オンプレミスでテスト済み)

于 2018-01-14T11:14:15.243 に答える