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.
filter_none
brightness_4
// Detect Chrome
let 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.
filter_none
brightness_4
// Detect Internet Explorer
let 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.
filter_none
brightness_4
// Detect Firefox
let 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.
filter_none
brightness_4
// Detect Safari
let safariAgent = userAgentString.indexOf("Safari") > -1;
// Discard Safari since it also matches Chrome
if ((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.
filter_none
brightness_4
// Detect Opera
let operaAgent = userAgentString.indexOf("OP") > -1;
// Discard Chrome since it also matches Opera
if ((chromeAgent) && (operaAgent)) chromeAgent = false;
Example:
filter_none
edit
play_arrow
brightness_4
<!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>
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.
filter_none
brightness_4
// Detect Chrome
let 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.
filter_none
brightness_4
// Detect Internet Explorer
let 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.
filter_none
brightness_4
// Detect Firefox
let 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.
filter_none
brightness_4
// Detect Safari
let safariAgent = userAgentString.indexOf("Safari") > -1;
// Discard Safari since it also matches Chrome
if ((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.
filter_none
brightness_4
// Detect Opera
let operaAgent = userAgentString.indexOf("OP") > -1;
// Discard Chrome since it also matches Opera
if ((chromeAgent) && (operaAgent)) chromeAgent = false;
Example:
filter_none
edit
play_arrow
brightness_4
<!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>
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.