✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Change Browser URL Without Refreshing Page Using jQuery And HTML5

Last Updated : Apr 15, 2022

IN - jQuery HTML5 CSS

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.

Change Browser URL Without Refreshing Page Using jQuery And HTML5

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Change Browser URL It Takes Only Two Steps:-

  1. Make a HTML file and define markup and scripting
  2. 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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials