How to Check User Browser is Supported or Not in jQuery

Websolutionstuff | Nov-13-2020 | Categories : Laravel PHP jQuery Bootstrap

In this article, we will see how to check user browser is supported or not in jquery. Some time latest features are not supported in many browsers like internet explorer, safari, google chrome, etc. So, in this post, we will show you how to detect the user browser. We will get user agents of chrome, safari, and internet explorer using javascript.

So, let's see detect the browser using jquery, and check if the browser supports javascript.

Detect Chrome browser

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. 

let chromeAgent = userAgentString.indexOf("Chrome") > -1;

 

Detect Internet Explorer browser

The userAgent of the Internet Explorer browser is “MSIE” or “rv:”. these values are passed in the indexOf() method to detect this value in the userAgentString and the result of both them are used with the OR operator.

let IExplorerAgent = userAgentString.indexOf("MSIE") > -1 ||  
                     userAgentString.indexOf("rv:") > -1; 

 

 

Detect Firefox browser

The user-agent of the Firefox browser is “Firefox”. This value is passed to the indexOf() method to detect this value in the user-agent string. 

let firefoxAgent = userAgentString.indexOf("Firefox") > -1;

 

Detect Safari browser

The user-agent of the Safari browser is “Safari”. This value is passed to the 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 Safari 
let safariAgent = userAgentString.indexOf("Safari") > -1; 
  
// Discard Safari since it also matches Chrome 
if ((chromeAgent) && (safariAgent)) safariAgent = false; 

 

Detect Opera browser

 The user-agent of the Opera browser is “OP”. This value is passed to the 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 Opera 
let operaAgent = userAgentString.indexOf("OP") > -1; 
  
// Discard Chrome since it also matches Opera         
if ((chromeAgent) && (operaAgent)) chromeAgent = false;

 

Example:

In this example, we will see user browser is supported or not using jquery. Also, the display message of user browser is supported or not in jquery.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>How To Check User Browser is Supported or Not in jQuery ?</title>
	<link rel="stylesheet" href="">
	<link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
    crossorigin="anonymous">	
</head>
<body>	
	<div class="modal fade" id="BrowserModel" tabindex="-1" role="dialog" aria-labelledby="demoModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="demoModalLabel">Warning - Browser not supported !</h5>
						<button type="button" class="close" data-dismiss="modal" aria- 
	                    label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
				</div>
				<div class="modal-body">
						<b>Your Browser is Not Supported our Website !!</b><br>
						This is Example of Browser Compatibility.
				</div>
				<div class="checkbox modal-body">							
					<input type="checkbox" name="understand_checkbox" class="styled" value="checked" id="understand_checkbox">  I understand term and condition, but still want to continue.
				  </div>
				<div class="modal-footer">
					<button type="button" value="proceed" id="proceed" name="proceed" data-dismiss="modal" class="btn btn-info" disabled>Proceed</button>		
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
    
    let userAgentString =  navigator.userAgent; 
    
    let chromeAgent =  userAgentString.indexOf("Chrome") > -1; 
  
    let IExplorerAgent =  userAgentString.indexOf("MSIE") > -1 ||  
    userAgentString.indexOf("rv:") > -1; 
  
    let firefoxAgent =  userAgentString.indexOf("Firefox") > -1; 
  
    let safariAgent =  userAgentString.indexOf("Safari") > -1; 
                
    if ((chromeAgent) && (safariAgent))  
        safariAgent = false; 
        
    let operaAgent =  userAgentString.indexOf("OP") > -1; 
          
    if ((chromeAgent) && (operaAgent))  
        chromeAgent = false;

    
    if(firefoxAgent || safariAgent)
    {
      	console.log("chrome: "+chromeAgent);
      	console.log("firefox: "+firefoxAgent);
      	console.log("safari: "+safariAgent);
	  	$("#BrowserModel").modal('hide');
    }else{
      	console.log("Default show");
      	$("#BrowserModel").modal('show');
    }

    $('#understand_checkbox').click(function(){    
      if($(this).is(':checked')){        
          $('#proceed').attr("disabled", false);

          $("#proceed"). click(function(){
            var str = $("#understand_checkbox").val();
            if (typeof(Storage) !== "undefined") {
              var is_browser_checked = str;
              localStorage.setItem('is_browser_checked', is_browser_checked);
            }
          });
      } else{        
          $('#proceed').attr("disabled", true);
      }
    });   
    
    var data = localStorage.getItem('is_browser_checked');
    if(data == "checked")
    {
      $("#BrowserModel").modal('hide');
    }
});
</script>

 

 

Output:

check_user_browser_is_supported_or_not_in_jquery

 


You might also like:

Recommended Post
Featured Post
How To Install Vue 3 In Laravel 9 With Vite
How To Install Vue 3 In Larave...

In this article, we will see how to install Vue 3 in laravel 9 with vite. In the previous article, we will install...

Read More

Oct-10-2022

How To Use OpenAI In Laravel 8/9
How To Use OpenAI In Laravel 8...

In this article, we will explore the integration of OpenAI into Laravel versions 8, 9, and 10. Our focus will be on unde...

Read More

Feb-06-2023

Laravel 9 Image Upload In Summernote Editor
Laravel 9 Image Upload In Summ...

In this article, we will see laravel 9 image upload in summernote editor. there are many editor available in l...

Read More

Mar-24-2022

7+ Laravel Tips: Optimize Database Queries (2024)
7+ Laravel Tips: Optimize Data...

Hey there, fellow developers! If you've been navigating the intricate world of Laravel, you know that optimizing dat...

Read More

Jan-03-2024