jQuery检测浏览器IE9及以下版本并抛出一个模式进行升级

时间:2013-10-24 09:34:42

标签: javascript jquery html css internet-explorer

我希望能够使用jQuery检测IE9或更少(或者如果有更好的方法?)。如果浏览器版本是IE9或更低,那么我想加载一个模式,并选择升级到Chrome,FF等。

我已经读过$ .browser不再工作,所以只是想知道实现我想要的最好的方法是什么:

$(document).ready(function(){

   /* Get browser */
   $.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());

   /* Detect Chrome */
   if($.browser.chrome){
      /* Do something for Chrome at this point */
      alert("You are using Chrome!");

      /* Finally, if it is Chrome then jQuery thinks it's 
       Safari so we have to tell it isn't */
       $.browser.safari = false;
  }

  /* Detect Safari */
  if($.browser.safari){
      /* Do something for Safari */
      alert("You are using Safari!");
  }

});

5 个答案:

答案 0 :(得分:16)

var browser = {
        isIe: function () {
            return navigator.appVersion.indexOf("MSIE") != -1;
        },
        navigator: navigator.appVersion,
        getVersion: function() {
            var version = 999; // we assume a sane browser
            if (navigator.appVersion.indexOf("MSIE") != -1)
                // bah, IE again, lets downgrade version number
                version = parseFloat(navigator.appVersion.split("MSIE")[1]);
            return version;
        }
    };

if (browser.isIe() && browser.getVersion() <= 9) {

    console.log("You are currently using Internet Explorer" + browser.getVersion() + " or are viewing the site in Compatibility View, please upgrade for a better user experience.")
}

答案 1 :(得分:11)

不要使用jQuery来检测IE版本。改为使用条件评论。

为什么呢?好吧,想想你为什么要首先瞄准这些旧版本。这可能是因为它们不支持您需要的某些JS / CSS功能。那么你真的想要维护自己的JS代码,你肯定会在这些旧版本中运行吗?如果你走这条路,那么你需要开始考虑你编写的检测代码是否可以在IE6或5或4中工作......痛苦!

请尝试以下方法:

  1. 将您的模态/横幅元素添加到HTML中。
  2. 在主css文件中,使用display:none隐藏此元素。这可确保最新版本的IE和非IE浏览器不会看到它。
  3. 创建一个仅显示此元素的IE css或js文件。
  4. 将此文件包含在针对您想要的IE版本的条件注释中。
  5. 下面的示例使用CSS进行简单的显示,但如果您愿意,可以使用JS轻松替换它。只是不要让它太复杂,否则它可能很容易在IE早期版本中破解。

    #index.html
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <!--[if lte IE 9]>
          <link rel="stylesheet" type="text/css" href="ie-only.css">
        <![endif]-->
      </head>
      <body>
        <div class="ie-only">Go upgrade your browser!</div>
      </body>
    </html>
    
    #main.css
    .ie-only { display: none }
    
    #ie-only.css
    .ie-only { display: block }
    

    这是一个有用的conditional comments reference

答案 2 :(得分:3)

var isIE9OrBelow = function()
{
   return /MSIE\s/.test(navigator.userAgent) && parseFloat(navigator.appVersion.split("MSIE")[1]) < 10;
}

答案 3 :(得分:0)

$.browser()将在jquery version 1.9中删除,使用脚本中的代码

(function($) {

    var matched, browser;

    // Use of jQuery.browser is frowned upon.
    // More details: http://api.jquery.com/jQuery.browser
    // jQuery.uaMatch maintained for back-compat
    jQuery.uaMatch = function( ua ) {
        ua = ua.toLowerCase();

        var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
            /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
            /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
            /(msie) ([\w.]+)/.exec( ua ) ||
            ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
            [];

        return {
            browser: match[ 1 ] || "",
            version: match[ 2 ] || "0"
        };
    };
    // Don't clobber any existing jQuery.browser in case it's different
    if ( !jQuery.browser ) {
        matched = jQuery.uaMatch( navigator.userAgent );
        browser = {};

        if ( matched.browser ) {
            browser[ matched.browser ] = true;
            browser.version = matched.version;
        }

    // Chrome is Webkit, but Webkit is also Safari.
        if ( browser.chrome ) {
            browser.webkit = true;
        } else if ( browser.webkit ) {
            browser.safari = true;
        }
        jQuery.browser = browser;
    }
})(jQuery);

答案 4 :(得分:0)

Sitepoint调整:

Option Explicit


Private Sub TreeView1_DblClick()
    Dim nodSelected As MSComctlLib.Node
    Set nodSelected = TreeView1.SelectedItem
    If nodSelected.Text <> "root" Then
        TreeView1.StartLabelEdit
    End If
End Sub

Private Sub UserForm_Initialize()

    TreeView1.Style = tvwTreelinesPlusMinusText
    TreeView1.LabelEdit = tvwManual

    'Add some nodes to the TreeView
    Dim nodRoot As MSComctlLib.Node
    Set nodRoot = TreeView1.Nodes.Add(Key:="root", Text:="root")

    '
    Dim nodChildren(1 To 2) As MSComctlLib.Node
    Set nodChildren(1) = TreeView1.Nodes.Add(nodRoot, tvwChild, "child 1", "child 1")
    Set nodChildren(2) = TreeView1.Nodes.Add(nodRoot, tvwChild, "child 2", "child 2")

    Dim nodGrandChildren(1 To 3) As MSComctlLib.Node
    Set nodGrandChildren(1) = TreeView1.Nodes.Add(nodChildren(1), tvwChild, "grandchild 1", "grandchild 1")
    Set nodGrandChildren(2) = TreeView1.Nodes.Add(nodChildren(2), tvwChild, "grandchild 2", "grandchild 2")
    Set nodGrandChildren(3) = TreeView1.Nodes.Add(nodChildren(2), tvwChild, "grandchild 3", "grandchild 3")

End Sub

Private Sub TreeView1_AfterLabelEdit(Cancel As Integer, NewString As String)
    ' Make sure that we have a value in the Label
    If Len(NewString) < 1 Then
        ' The Label is empty
        MsgBox "Error! You must enter a value"
        Cancel = True
    Else
        MsgBox "You successfully edited label to " & NewString
    End If
End Sub