Search code examples
javascriptalertbrowser-detection

How to tell user to open page in Chrome with Browser Detect


I want to add a message that tells users to open the page in chrome if they're not in that browser. How can the below be adjusted to use document.write() instead of alert(), and also exclude writing the message if they're already in chrome? I found the below browser detect code here: https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator

var sBrowser, sUsrAg = navigator.userAgent;

if (sUsrAg.indexOf("Chrome") > -1) {
    sBrowser = "Google Chrome";
} else if (sUsrAg.indexOf("Safari") > -1) {
    sBrowser = "Apple Safari";
} else if (sUsrAg.indexOf("Opera") > -1) {
    sBrowser = "Opera";
} else if (sUsrAg.indexOf("Firefox") > -1) {
    sBrowser = "Mozilla Firefox";
} else if (sUsrAg.indexOf("MSIE") > -1) {
    sBrowser = "Microsoft Internet Explorer";
}

alert("You are using: " + sBrowser);

Solution

  • A simple solution would be to not assign any value to sBrowser if the user is using chrome, and then check for undefined.

    var sBrowser, sUsrAg = navigator.userAgent;
    
    if (sUsrAg.indexOf("Safari") > -1) {
      sBrowser = "Apple Safari";
    } else if (sUsrAg.indexOf("Opera") > -1) {
      sBrowser = "Opera";
    } else if (sUsrAg.indexOf("Firefox") > -1) {
      sBrowser = "Mozilla Firefox";
    } else if (sUsrAg.indexOf("MSIE") > -1) {
      sBrowser = "Microsoft Internet Explorer";
    }
    
    if (sBrowser != null) {
      document.write("You are using " + sBrowser + ". Use Chrome instead"); // or whatever
    }
    

    A problem with this approach is that you have to account for every single browser in existence. Just check for chrome, and then tell everyone else to use it. You lose the ability to tell them what browser they're using but that seems unimportant here.

    var sUsrAg = navigator.userAgent,
      usingChrome = sUsrAg.indexOf("Chrome") > -1;
    
    if (!usingChrome) {
      document.write("You are not using Chrome. Switch to blah blah blah"); // or whatever
    }