Change Browser URL Without Refreshing Page Using jQuery And HTML5
Last Updated : Apr 15, 2022
In this tutorial we will show you how to change browser URL without refreshing page using jQuery and HTML5.
You have seen in many dynamic website when you request new page they dont redirect you to
new page they simply change the URL and get that page using Ajax to save time and bandwidth that's what we were going to do in this tutorial.
You may also like create short urls using php.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Change Browser URL It Takes Only Two Steps:-
- Make a HTML file and define markup and scripting
- Make a CSS file and define styling
Step 1. Make a HTML file and define markup and scripting
We make a HTML file and save it with a name change_url.html
<html> <head> <link rel="stylesheet" type="text/css" href="url_style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function changeurl(url) { var new_url="/Your URL/"+url; window.history.pushState("data","Title",new_url); document.title=url; } </script> </head> <body> <div id="wrapper"> <div id="url_link"> <p id="url_label">Click On Languages To Change URL</p> <li onclick="changeurl('PHP');">PHP</li> <li onclick="changeurl('HTML');">HTML</li> <li onclick="changeurl('CSS');">CSS</li> <li onclick="changeurl('JavaScript');">JavaScript</li> <li onclick="changeurl('jQuery');">jQuery</li> </div> </div> </body> </html>
In this step we create five sample links to change the browser URL by calling changeurl()
function.
In changeurl() function we simply get the url and append with our present url and then change the url using window.history.pushState function and then we change webpage title to our query string value.
You may also like redirect webpage after delay using JavaScript.
Step 2. Make a CSS file and define styling
We make a CSS file and save it with a name url_style.css
body { margin:0 auto; padding:0px; text-align:center; width:100%; font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif; background-color:#CECEF6; } #wrapper { margin:0 auto; padding:0px; text-align:center; width:995px; } #wrapper h1 { margin-top:50px; font-size:45px; color:#5858FA; } #wrapper h1 p { font-size:16px; } #url_link { width:500px; margin-left:230px; margin-top:50px; } #url_link p { color:#5858FA; font-weight:bold; font-size:17px; } #url_link li { list-style-type:none; display:inline-block; width:100px; height:40px; line-height:40px; margin:10px; border:2px solid #5858FA; cursor:pointer; color:#5858FA; font-weight:bold; }
That's all, this is how to change browser url without refreshing page using jQuery and HTML5. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery