Introduction:
Here I will explain how to check if browser supports history.pushState HTML5 history function or not in JavaScript and jQuery. Generally we will use pushState function in HTML5 to change browser url without refresh or reloading page in jQuery and JavaScript.
Description:
In previous articles I explained jQuery remove() and empty() function example, jQuery check whether div element is empty or not, disable mouse right click using jQuery and JavaScript, jQuery add multiple markers to google map from database, jQuery check file size before upload in asp.net and many articles relating to jQuery, JSON, JavaScript and asp.net. Now I will explain how to check if browser supports history.pushState function of HTML5 in JavaScript and jQuery.
In previous articles I explained jQuery remove() and empty() function example, jQuery check whether div element is empty or not, disable mouse right click using jQuery and JavaScript, jQuery add multiple markers to google map from database, jQuery check file size before upload in asp.net and many articles relating to jQuery, JSON, JavaScript and asp.net. Now I will explain how to check if browser supports history.pushState function of HTML5 in JavaScript and jQuery.
Syntax
for HTML5 pushState function
|
To check if browser supports or not history.pushState function we will write the code like as shown below
If you want to check it in complete example write the code like as shown below
|
If you want to check it in complete example write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Change Browser URL
without reloading page in jQuery</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#samplemenu1').click(function () {
RefreshPageUrl('Menu1', 'Menu1.html');
})
$('#samplemenu2').click(function () {
RefreshPageUrl('Menu2', 'Menu2.html');
})
$('#samplemenu3').click(function () {
RefreshPageUrl('Menu3', 'Menu3.html');
})
})
function RefreshPageUrl(title,
url) {
if (history.pushState) {
var pageobj = { PageTitle:
title, PageUrl: url };
history.pushState(pageobj, title, url);
} else {
alert("Your Browser will not
Support HTML5");
}
}
</script>
</head>
<body>
<form id="form1"
runat="server">
<div>
<input type="button"
value="Menu1"
id="samplemenu1"/>
<input type="button"
value="Menu2"
id="samplemenu2"
/>
<input type="button"
value="Menu3"
id="samplemenu3"
/>
</div>
</form>
</body>
</html>
|
Demo
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.