Change Browser URL Without Refreshing Page Using jQuery And HTML5

Datetime:2016-08-23 03:01:50          Topic: jQuery  HTML5           Share

Tags:-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 .

See 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.





About List