Introduction:
Here I will explain how to change browser url without reloading or refreshing page using HTML5 history api in JavaScript and jQuery. By using pushState function in HTML5 history API we can change browser url without reload or refresh 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 change browser url without reloading or refreshing page using HTML5 history api pushState function 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 change browser url without reloading or refreshing page using HTML5 history api pushState function in JavaScript and jQuery.
Syntax
for HTML5 pushState function
|
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) {
history.pushState(null, 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.