根据浏览器添加不同的HTML

Question

我在我的 web 应用程序中使用 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>