If you want to know in which browser your website is opened by the users, then you can learn to detect browsers using javascript
This script will only give you the information about the name of the browser either your website is opened in mobile or desktop browser. So that you can easily calculate the number of different types of browsers that are used to open your website.
Contents
Javascript Detect Browser
Now, Let’s start to detect different kinds of browsers like chrome, safari, Mozilla Firebox & Microsoft Edge using javascript from the next step.
Learn also –
Detect Internet Connection using JavaScript
Detect AdBlocker using JavaScript
JavaScript Password Strength Checker
Create HTML div to display Browser Name
First of all, You have to Create an HTML div to display the browser name after detecting it using javascript. So, You can use the following HTML code within the <body></body> tag.
<p>You are using <b id="browserName"></b> browser</p>
I have created the above code that contains a paragraph tag and a bold tag <b> has id=”browseName”. So that the browser name can be displayed within the bold tag by accessing its id.
Detect Web Browser using JavaScript
Now, Just use this javascript code in your website to detect web browsers. But before using it, you should know its some important points –
I have created a custom function detectBrowser() that is called within the load event to execute it just loading the web page. Also, you can call this function according to your project requirement.
detectBrowser() – This function returns the name of the current web browser that is used to open an website.
<script>
window.addEventListener('load', function(event){
let displayBrowserName= document.getElementById('browserName');
displayBrowserName.innerHTML=detectBrowser();
});
function detectBrowser(){
let userAgent = navigator.userAgent;
let browserName;
let edgeRegExp= /edg/i;
let firefoxRegExp= /firefox|fxios/i;
let operaRegExp= /opr\//i;
let chromeRegExp= /chrome|chromium|crios/i;
let safariRegExp= /safari/i;
if(edgeRegExp.test(userAgent)){
browserName = "Edge";
}else if(firefoxRegExp.test(userAgent)){
browserName= "firefox";
}else if (operaRegExp.test(userAgent)) {
browserName="opera";
}else if (chromeRegExp.test(userAgent)) {
browserName="chrome";
}else if (safariRegExp.test(userAgent)) {
browserName="safari";
}else{
browserName="Browser Not found";
}
return browserName;
}
</script>Test it Yourself on different Browser
After Implementing the previous steps, you can test the JavaScript Browser Detector script by opening in the different kinds of web browsers like Chrome, Mozilla Firefox, Opera, Safari & Edge etc.
Leave a Reply