✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

Change Browser URL Without Refreshing Page Using jQuery And HTML5

Last Updated : Jul 1, 2023

IN - jQuery HTML5 CSS | Written & Updated By - Riya

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.

I hope this tutorial on change browser url without page reloading helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪