0
\$\begingroup\$

Any suggestions how to make this code better? I'm novice in coding...)) In this code I'm want to show some hint depending of browser type on semi-transparent overlay. I'm detecting browser type (I'm need - Firefox, Chrome, IE 9 and higher), create all nessesary elements, append this elements to a document.body, and attach events. To detect "document.ready" I'm use domready.js

// Perform browsers detection;
    var browser = {};
    (function() {
        browser.firefox = false;
        browser.chrome = false;
        browser.msie = false;

        var nAgt = navigator.userAgent;
        var verOffset;

        if ( (verOffset=nAgt.indexOf("MSIE"))!=-1 ) {
            // For IE we also need to check browser version, because hint will be shown only if version is 9 or higher;
            browser.version = parseInt( nAgt.substring(verOffset+5), 10 );
            if (browser.version >= 9 ) {
                browser.msie = true;
                browser.name = "msie";
                browser.hint = {
                    position: "fixed",
                    display: "none",
                    zIndex: "101",
                    bottom: "50px",
                    left: "35%"
                };
            }
        }
        else if ( (verOffset=nAgt.indexOf("Chrome"))!=-1 ) {
            browser.chrome = true;
            browser.name = "chrome";
            browser.hint = {
                position: "fixed",
                display: "none",
                zIndex: "101",
                bottom: "0",
                left: "0"
            };
        }
        else if ( (verOffset=nAgt.indexOf("Firefox"))!=-1 ) {
            browser.firefox = true;
            browser.name = "firefox";
            browser.hint = {
                position: "fixed",
                display: "none",
                zIndex: "101",
                top: "0",
                right: "10px"
            };
        }
    })();

    domready(function() {
        if (browser.firefox || browser.chrome || browser.msie) {
            // Create "overlay" element
            var overlay = document.createElement("div");
            overlay.setAttribute("id", "hintOverlay");
            var overlayStyles = {
              width: "100%",
              height: "100%",
              background: "gray",
              opacity: "0.75",
              zIndex: "100",
              position: "fixed",
              top: "0",
              left: "0",
              display: "none"
            };
            for(var s in overlayStyles){
                if (overlayStyles.hasOwnProperty(s)) {
                    overlay.style[s] = overlayStyles[s];
                }
            }
            overlay.addEventListener("click", function() {
                this.style.display = "none";
                document.getElementById("hintElem").style.display = "none";
            });
            document.body.appendChild(overlay);

            // Create "hint" element
            var hintElem = document.createElement("img");
            hintElem.setAttribute("src", "images/" + browser.name + ".png");
            hintElem.setAttribute("id", "hintElem");
            for(var s in browser.hint) {
                if (browser.hint.hasOwnProperty(s)) {
                    hintElem.style[s] = browser.hint[s];
                }
            }
            document.body.appendChild(hintElem);

            // Attach click event to all links that have "download" in name
            var links = document.getElementsByTagName("a");
            for(var i = 0; i < links.length; i++) {
                if(links[i].getAttribute("id").indexOf('download') == 0) {
                    links[i].addEventListener("click", function() {
                        document.getElementById("hintOverlay").style.display = "block";
                        document.getElementById("hintElem").style.display = "block";
                    });
                }
            }
        }
    });
\$\endgroup\$
1
\$\begingroup\$

"Browser-sniffing" is bad, usually because the methods used to detect them are usually "spoofable" and unreliable

User Agent string can be spoofed (changed) and can't be relied on. In fact, vendors change UAs to tell websites they are another browser, some for valid purposes. I think it was IE10 who added a "Mozilla" to their UA to tell websites to load non-IE versions of pages, with confidence that the newer IE will render "unhacked"/not modified for IE pages without breaking.

Even if you UA strings are fixed, you can't keep track of the 70+ (I think it was 70+, or something with a 7) different browsers in the wild today. Yes, there are browsers other than the major 5, like mobile browsers, command-line browsers, headless browsers. And don't forget to count the older versions, do still use them.

Recently, developers use feature testing instead, to check if certain features are available in the browser. Modernizr is an example of such frameworks.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.