Question

我希望此代码仅显示来自IE8及更低版本的过时浏览器。目前它还显示了IE9的消息，我想排除它。我确实尝试从代码的较低部分删除IE9部分代码，但没有运气。

我从以下代码获得了代码：https://github.com/burocratik/outdated-browser

＆＃13;

/*!--------------------------------------------------------------------
JAVASCRIPT "Outdated Browser"
Version:    1.1.0 - 2014
author:     Burocratik
website:    http://www.burocratik.com
* @preserve
-----------------------------------------------------------------------*/
var outdatedBrowser = function(options) {

    //Variable definition (before ajax)
    var outdated = document.getElementById("outdated");

    // Default settings
    this.defaultOpts = {
        bgColor: '#f25648',
        color: '#ffffff',
        lowerThan: 'transform',
        languagePath: '../outdatedbrowser/lang/en.html'
    }

    if (options) {
        //assign css3 property to IE browser version
        if(options.lowerThan == 'IE8' || options.lowerThan == 'borderSpacing') {
            options.lowerThan = 'borderSpacing';
        } else if (options.lowerThan == 'IE9' || options.lowerThan == 'boxShadow') {
            options.lowerThan = 'boxShadow';
        } else if (options.lowerThan == 'IE10' || options.lowerThan == 'transform' || options.lowerThan == '' || typeof options.lowerThan === "undefined") {
            options.lowerThan = 'transform';
        } else if (options.lowerThan == 'IE11' || options.lowerThan == 'borderImage') {
            options.lowerThan = 'borderImage';
        }
        //all properties
        this.defaultOpts.bgColor = options.bgColor;
        this.defaultOpts.color = options.color;
        this.defaultOpts.lowerThan = options.lowerThan;
        this.defaultOpts.languagePath = options.languagePath;

        bkgColor = this.defaultOpts.bgColor;
        txtColor = this.defaultOpts.color;
        cssProp = this.defaultOpts.lowerThan;
        languagePath = this.defaultOpts.languagePath;
    } else {
        bkgColor = this.defaultOpts.bgColor;
        txtColor = this.defaultOpts.color;
        cssProp = this.defaultOpts.lowerThan;
        languagePath = this.defaultOpts.languagePath;
    };//end if options


    //Define opacity and fadeIn/fadeOut functions
    var done = true;

    function function_opacity(opacity_value) {
        outdated.style.opacity = opacity_value / 100;
        outdated.style.filter = 'alpha(opacity=' + opacity_value + ')';
    }

    // function function_fade_out(opacity_value) {
    //     function_opacity(opacity_value);
    //     if (opacity_value == 1) {
    //         outdated.style.display = 'none';
    //         done = true;
    //     }
    // }

    function function_fade_in(opacity_value) {
        function_opacity(opacity_value);
        if (opacity_value == 1) {
            outdated.style.display = 'block';
        }
        if (opacity_value == 100) {
            done = true;
        }
    }

    //check if element has a particular class
    // function hasClass(element, cls) {
    //     return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    // }

    var supports = (function() {
       var div = document.createElement('div'),
          vendors = 'Khtml Ms O Moz Webkit'.split(' '),
          len = vendors.length;

       return function(prop) {
          if ( prop in div.style ) return true;

          prop = prop.replace(/^[a-z]/, function(val) {
             return val.toUpperCase();
          });

          while(len--) {
             if ( vendors[len] + prop in div.style ) {
                return true;
             }
          }
          return false;
       };
    })();

    //if browser does not supports css3 property (transform=default), if does > exit all this
    if ( !supports(''+ cssProp +'') ) {
        if (done && outdated.style.opacity !== '1') {
            done = false;
            for (var i = 1; i <= 100; i++) {
                setTimeout((function (x) {
                    return function () {
                        function_fade_in(x);
                    };
                })(i), i * 8);
            }
        }
    }else{
        return;
    };//end if

    //Check AJAX Options: if languagePath == '' > use no Ajax way, html is needed inside <div id="outdated">
    if( languagePath === ' ' || languagePath.length == 0 ){
        startStylesAndEvents();
    }else{
        grabFile(languagePath);
    }

    //events and colors
    function startStylesAndEvents(){
        var btnClose = document.getElementById("btnCloseUpdateBrowser");
        var btnUpdate = document.getElementById("btnUpdateBrowser");

        //check settings attributes
        outdated.style.backgroundColor = bkgColor;
        //way too hard to put !important on IE6
        outdated.style.color = txtColor;
        outdated.children[0].style.color = txtColor;
        outdated.children[1].style.color = txtColor;

        //check settings attributes
        btnUpdate.style.color = txtColor;
        // btnUpdate.style.borderColor = txtColor;
        if (btnUpdate.style.borderColor) btnUpdate.style.borderColor = txtColor;
        btnClose.style.color = txtColor;

        //close button
        btnClose.onmousedown = function() {
            outdated.style.display = 'none';
            return false;
        };

        //Override the update button color to match the background color
        btnUpdate.onmouseover = function() {
            this.style.color = bkgColor;
            this.style.backgroundColor = txtColor;
        };
        btnUpdate.onmouseout = function() {
            this.style.color = txtColor;
            this.style.backgroundColor = bkgColor;
        };
    }//end styles and events


    // IF AJAX with request ERROR > insert english default
    var ajaxEnglishDefault = '<h6>Your browser is out-of-date!</h6>'
        + '<p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update my browser now </a></p>'
        + '<p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>';


    //** AJAX FUNCTIONS - Bulletproof Ajax by Jeremy Keith **
    function getHTTPObject() {
      var xhr = false;
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
        try {
          xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
          try {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } catch(e) {
            xhr = false;
          }
        }
      }
      return xhr;
    };//end function

    function grabFile(file) {
        var request = getHTTPObject();
            if (request) {
                request.onreadystatechange = function() {
                displayResponse(request);
            };
                request.open("GET", file, true);
                request.send(null);
            }
        return false;
    };//end grabFile

    function displayResponse(request) {
        var insertContentHere = document.getElementById("outdated");
        if (request.readyState == 4) {
            if (request.status == 200 || request.status == 304) {
                insertContentHere.innerHTML = request.responseText;
            }else{
                insertContentHere.innerHTML = ajaxEnglishDefault;
            }
            startStylesAndEvents();
        }
      return false;
    };//end displayResponse

////////END of outdatedBrowser function
};

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Outdated Browser</title>
    <meta name="description" content="A time saving tool for developers. It detects outdated browsers and advises users to upgrade to a new version.">
    <!-- Styles -->
    <link rel="stylesheet" href="../outdatedbrowser/outdatedbrowser.min.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style type="text/css">
        body {
            font-family: 'Open Sans', sans-serif; text-align: center;
            background-color: #fafafa; color: #0a0a0a; line-height: 1.5em;
        }
        h1{font-size: 2.6em; line-height: 2em;}
        h3, h4{line-height: 1em; margin: 2.5em 0 -.4em 0; text-transform: uppercase;}
        h3 span, h4 span{text-transform: none;}
        p{padding-bottom: 1em;}
        p.designBy{position: absolute; bottom: 0; right: 1em; font-size: .8em;}
        a {color: #0a0a0a;}
        ul{list-style-type: none; padding: 0;}
	
    </style>
</head>

<body>
    <!-- ============= YOUR CONTENT ============= -->
    <h1><a href="index.html">Outdated Browser</a></h1>
    <p>Remember: If you can't see the message, it's a good thing! You are using a modern browser :D</p>
    <h3>DEFAULT properties but using jQuery (must support IE6+)</h3>
    <p>bgColor: '#f25648', color: '#ffffff', lowerThan: 'transform'  (&lt;IE10), languagePath: 'your_path/outdatedbrowser/lang/en.html'</p>
    <h3>What does it look like? <span>(it may differ in your tests) </span></h3>
    <ul>
        <li><a href="http://buro.pt/Whwf">IE7 - VISTA</a></li>
    </ul>
    <p class="designBy">by <a href="http://www.burocratik.com">Bürocratik</a></p>

    <!-- ============= Outdated Browser ============= -->
    <div id="outdated"></div>

    <!-- javascript includes -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="../outdatedbrowser/outdatedbrowser.js"></script>

    <!-- plugin call -->
    <script>
        //USING jQuery
        $(document).ready(function() {
            outdatedBrowser({
                bgColor: '#f25648',
                color: '#ffffff',
                lowerThan: 'transform',
                languagePath: '../outdatedbrowser/lang/en.html'
            })
        })
		
		console.log(outdatedBrowser);
    </script>

    </script>
</body>
</html>

＆＃13;

过时的浏览器 - 仅显示来自IE8及更低版本的横幅。目前包括IE9

0 个答案: