How to detect the user browser ( Safari, Chrome, IE, Firefox and Opera ) using JavaScript ?
The browser on which the current page is opening can be checked using JavaScript.
The userAgent property of the navigator object is used to return the user-agent header string sent by the browser. This user-agent string contains information about the browser by including certain keywords that may be tested for their presence.
The presence of a specific user-string can be detected using the indexOf() method. The indexOf() method is used to return the first occurrence of the specified string value in a string. If the value does not come up in the string, “-1” is returned.
The user-agent string of the browser is accessed using the navigator.userAgent property and then stored in a variable. The presence of the strings of a browser in this user-agent string is detected one by one.
- Detecting the Chrome browser: The user-agent of the Chrome browser is “Chrome”. This value is passed to indexOf() method to detect this value in the user-agent string.
As the indexOf() method would return a value that is greater than “-1” to denote a successful search, the “greater-than” operator is used to return a boolean value on whether the search was successful or not. This is done for all the following tests.
// Detect Chromelet chromeAgent = userAgentString.indexOf("Chrome") > -1; - Detecting the Internet Explorer browser: The user-agent of the Internet Explorer browser is “MSIE” or “rv:”. Both these values are passed to the indexOf() method to detect this value in the user-agent string and the result of both them are used with the OR operator.
// Detect Internet Explorerlet IExplorerAgent = userAgentString.indexOf("MSIE") > -1 ||userAgentString.indexOf("rv:") > -1; - Detecting the Firefox browser: The user-agent of the Firefox browser is “Firefox”. This value is passed to indexOf() method to detect this value in the user-agent string.
// Detect Firefoxlet firefoxAgent = userAgentString.indexOf("Firefox") > -1; - Detecting the Safari browser: The user-agent of the Safari browser is “Safari”. This value is passed to indexOf() method to detect this value in the user-agent string.
One additional check is required in the case of the Safari browser as the user-agent of the Chrome browser also includes the Safari browser’s user-agent. If both the user-agents of Chrome and Safari are in the user-agent, it means that the browser is Chrome, and hence the Safari browser value is discarded.
// Detect Safarilet safariAgent = userAgentString.indexOf("Safari") > -1;// Discard Safari since it also matches Chromeif((chromeAgent) && (safariAgent)) safariAgent =false; - Detecting the Opera browser: The user-agent of the Opera browser is “OP”. This value is passed to indexOf() method to detect this value in the user-agent string.
One additional check is also required in the case of this browser as the user-agent of the Opera browser also includes the Chrome browser’s user-agent. If both the user-agents of Chrome and Opera are in the user-agent, it means that the browser is Opera, and hence the Chrome browser value is discarded.
// Detect Operalet operaAgent = userAgentString.indexOf("OP") > -1;// Discard Chrome since it also matches Operaif((chromeAgent) && (operaAgent)) chromeAgent =false;
Example:
<!DOCTYPE html> <html> <head> <title> How to detect Safari, Chrome, IE, Firefox and Opera browser using JavaScript? </title> </head> <body> <h1 style="color: green">GeeksforGeeks</h1> <b> How to detect Safari, Chrome, IE, Firefox and Opera browser using JavaScript? </b> <p> Click on the button to detect the current browser </p> <p> Is Safari? <span class="output-safari"></span> </p> <p> Is Chrome? <span class="output-chrome"></span> </p> <p> Is Internet Explorer? <span class="output-ie"></span> </p> <p> Is Firefox? <span class="output-firefox"></span> </p> <p> Is Opera browser? <span class="output-opera"></span> </p> <button onclick="checkBrowser()"> Detect browser </button> <script> function checkBrowser() { // Get the user-agent string let userAgentString = navigator.userAgent; // Detect Chrome let chromeAgent = userAgentString.indexOf("Chrome") > -1; // Detect Internet Explorer let IExplorerAgent = userAgentString.indexOf("MSIE") > -1 || userAgentString.indexOf("rv:") > -1; // Detect Firefox let firefoxAgent = userAgentString.indexOf("Firefox") > -1; // Detect Safari let safariAgent = userAgentString.indexOf("Safari") > -1; // Discard Safari since it also matches Chrome if ((chromeAgent) && (safariAgent)) safariAgent = false; // Detect Opera let operaAgent = userAgentString.indexOf("OP") > -1; // Discard Chrome since it also matches Opera if ((chromeAgent) && (operaAgent)) chromeAgent = false; document.querySelector(".output-safari").textContent = safariAgent; document.querySelector(".output-chrome").textContent = chromeAgent; document.querySelector(".output-ie").textContent = IExplorerAgent; document.querySelector(".output-opera").textContent = operaAgent; document.querySelector(".output-firefox").textContent = firefoxAgent; } </script> </body> </html> |
Output:
- Output on the Chrome browser:
- Output on the Firefox browser:
- Output on the Opera browser:
Please Login to comment...