根據瀏覽器添加不同的HTML

Question

我在我的webApp中使用Slider但它在IE7中崩潰，所以我想在IE7中停止滑塊。 這是ASPX代碼

<div id="divIE7">
    <section class="masterbanner cycle-slideshow" data-cycle-fx="tileSlide" data-cycle-slides="> div.slideShowItem" data-cycle-auto-height="calc" data-cycle-log="false" data-cycle-pause-on-hover="true" data-cycle-manual-speed="0">
                    <asp:Literal runat="server" ID="lSlideShow" />
                    <div class="cycle-pager"></div>
                </section>
</div>

我必須檢查它的IE7，然后我的ASPX應該

<div id="divNotIE7">
     <section class="masterbanner cycle-slideshow" data-cycle-fx="tileSlide" data-cycle-auto-height="calc" data-cycle-log="false" data-cycle-pause-on-hover="true" data-cycle-manual-speed="0">
                    <asp:Literal runat="server" ID="lSlideShowIE7" />
                    <div class="cycle-pager"></div>
                </section>
</div>

我嘗試這個腳本，但問題仍然存在。

$(document).ready(function () {
            var divIE7 = document.getElementById('divIE7');
            var divOther = document.getElementById('divNotIE7');
            if (CheckBrowserIE7()) {
                //$('divNotIE7').not('#content').remove();
                divIE7.style.display = 'none';
                divOther.style.display = 'block';;
            }
            else {
                divIE7.style.display = 'block';
                divOther.style.display = 'none';
                //$('divIE7').not('#content').remove();

            }
        });

Answer 1

您可以從后面的代碼中檢測IE7瀏覽器。

<asp:Panel runat="server" ID="IE7Panel" Visible="False">
    <section class="masterbanner cycle-slideshow" 
        data-cycle-fx="tileSlide" 
        data-cycle-slides="> div.slideShowItem" 
        data-cycle-auto-height="calc" 
        data-cycle-log="false" 
        data-cycle-pause-on-hover="true" 
        data-cycle-manual-speed="0">
        <asp:Literal runat="server" ID="lSlideShow" />
        <div class="cycle-pager"></div>
    </section>
</asp:Panel>
<asp:Panel runat="server" ID="NotIE7Panel" Visible="False">
    <section class="masterbanner cycle-slideshow" 
        data-cycle-fx="tileSlide" 
        data-cycle-auto-height="calc" 
        data-cycle-log="false" 
        data-cycle-pause-on-hover="true" 
        data-cycle-manual-speed="0">
        <asp:Literal runat="server" ID="lSlideShowIE7" />
        <div class="cycle-pager"></div>
    </section>
</asp:Panel>

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.Browser.Browser == "IE" && 
        Request.Browser.MajorVersion < 8)
    {
        IE7Panel.Visible = true;                
    }
    else
    {
        NotIE7Panel.Visible = true;
    }
}

JavaScript的

我只有Kendo UI Web ，它是GPL v3下的開源軟件。

在jsfiddle演示

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        if (kendo.support.browser.msie && kendo.support.browser.version == 7) {
            alert('This is IE 7.');
        } else {
            alert('This is other browser.');
        }
    });
</script>

Answer 2

您可以通過javascript輕松檢測IE版本

   // This function returns Internet Explorer's major version number,
   // or 0 for others. It works by finding the "MSIE " string and
   // extracting the version number following the space, up to the decimal
   // point, ignoring the minor version number
   <SCRIPT LANGUAGE="JavaSCRIPT">
   function msieversion()
   {
      var ua = window.navigator.userAgent
      var msie = ua.indexOf ( "MSIE " )

      if ( msie > 0 )      // If Internet Explorer, return version number
         return parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
      else                 // If another browser, return 0
         return 0

   }
   </SCRIPT>