{"id":2264,"date":"2017-03-25T17:37:22","date_gmt":"2017-03-25T12:07:22","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=2264"},"modified":"2018-10-29T16:31:34","modified_gmt":"2018-10-29T11:01:34","slug":"modify-url-without-reloading-page","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/modify-url-without-reloading-page\/","title":{"rendered":"How to Modify the URL without reloading the page"},"content":{"rendered":"<h2 id=\"problem\"><span style=\"color: #993300;\"><label class=\"label label-warning\">PROBLEM:<\/label><\/span><\/h2>\n<p>How to Modify the <a href=\"https:\/\/www.wikitechy.com\/tutorials\/javascript\/get-current-url-in-javascript\" target=\"_blank\" rel=\"noopener\">URL<\/a> without reloading the page?<\/p>\n<h3 id=\"solution-1\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 1:<\/label><\/span><\/h3>\n<ul>\n<li>Updating address bar with <strong>new URL<\/strong> without hash or reloading the page<\/li>\n<\/ul>\n<h4 id=\"example\"><strong><span style=\"color: #808000;\">Example:<\/span><\/strong><\/h4>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%20function%20processAjaxData(response%2C%20urlPath)%0A%7B%0A%20%20%20%20%20document.getElementById(%22content%22).innerHTML%20%3D%20response.html%3B%0A%20%20%20%20%20document.title%20%3D%20response.pageTitle%3B%0A%20%20%20%20%20window.history.pushState(%7B%22html%22%3Aresponse.html%2C%22pageTitle%22%3Aresponse.pageTitle%7D%2C%22%22%2C%20urlPath)%3B%0A%20%7D%0A%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>we can then use <b>window.onpopstate<\/b> to detect the back\/forward button navigation<b>:<\/b><\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;window.onpopstate%20%3D%20function(e)%0A%7B%0A%20%20%20%20if(e.state)%0A%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22content%22).innerHTML%20%3D%20e.state.html%3B%0A%20%20%20%20%20%20%20%20document.title%20%3D%20e.state.pageTitle%3B%0A%20%20%20%20%7D%0A%7D%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>This works in<strong> Chrome, Safari, FF4+, and IE10pp4+<\/strong>!<\/li>\n<\/ul>\n<h3 id=\"solution-2\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 2:<\/label><\/span><\/h3>\n<p>We can do this to modify the url,<\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;window.history.pushState(%22object%20or%20string%22%2C%20%22Title%22%2C%20%22%2Fnew-url%22)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>use <strong>history.pushState<\/strong> like this:<\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;history.pushState(null%2C%20null%2C%20&#8217;%2Fen%2Fstep2&#8242;)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<h3 id=\"solution-3\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 3:<\/label><\/span><\/h3>\n<ul>\n<li>The problem can be solved by implementing the History API, especially by using the <strong>pushState()<\/strong> method.<\/li>\n<li>We are recommend reading about it in <strong>MDN<\/strong>.<\/li>\n<li>There&#8217;s also an all-in-one solution called <b>History.js<\/b>, it will be implemented\u00a0 in x-browser easily (It will fallback to URL hashes # if the browser doesn&#8217;t support it).<\/li>\n<\/ul>\n<h4 id=\"heres-an-example\"><span style=\"color: #800080;\"><strong>Here&#8217;s an example:<\/strong><\/span><\/h4>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;history.pushState(&#8216;%20&#8217;%2C%20&#8217;New%20Page%20Title&#8217;%2C%20newHREF)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<h3 id=\"solution-4\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 4:<\/label><\/span><\/h3>\n<p><span style=\"color: #808000;\"><b>Change Browser URL without reloading using JavaScript<\/b><\/span><\/p>\n<ul>\n<li>The <a href=\"https:\/\/www.wikitechy.com\/html\/rollover-image-effect-in-html\" target=\"_blank\" rel=\"noopener\">HTML Markup<\/a> consists of 3 buttons which make a call to a function <strong>ChangeUrl.<\/strong><\/li>\n<li>This function accepts the page Title and URL as parameters.<\/li>\n<li>It first checks whether<a href=\"https:\/\/www.wikitechy.com\/technology\/5-best-browsers-windows\/\" target=\"_blank\" rel=\"noopener\"> browser<\/a> supports <strong>HTML5<\/strong> and then a State object containing the page Title and URL is created and is passed to the <b>HTML5 History pushState<\/b> method along with the page Title and URL as the other two parameters.<\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20ChangeUrl(title%2C%20url)%20%0A%7B%0A%20%20%20%20if%20(typeof%20(history.pushState)%20!%3D%20%22undefined%22)%0A%20%7B%0A%20%20%20%20%20%20%20%20var%20obj%20%3D%20%7B%20Title%3A%20title%2C%20Url%3A%20url%20%7D%3B%0A%20%20%20%20%20%20%20%20history.pushState(obj%2C%20obj.Title%2C%20obj.Url)%3B%0A%7D%0A%20else%0A%20%7B%0A%20%20%20%20%20%20%20%20alert(%22Browser%20does%20not%20support%20HTML5.%22)%3B%0A%20%20%20%20%7D%0A%7D%0A%3C%2Fscript%3E%0A%3Cinput%20type%3D%22button%22%20value%3D%22Page1%22%20onclick%3D%22ChangeUrl(&#8216;Page1&#8217;%2C%20&#8217;Page1.htm&#8217;)%3B%22%20%2F%3E%0A%3Cinput%20type%3D%22button%22%20value%3D%22Page2%22%20onclick%3D%22ChangeUrl(&#8216;Page2&#8217;%2C%20&#8217;Page2.htm&#8217;)%3B%22%20%2F%3E%0A%3Cinput%20type%3D%22button%22%20value%3D%22Page3%22%20onclick%3D%22ChangeUrl(&#8216;Page3&#8217;%2C%20&#8217;Page3.htm&#8217;)%3B%22%20%2F%3E%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<h3 id=\"solution-5\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 5:<\/label><\/span><\/h3>\n<p>The following example adds a query parameter to the URL without refreshing the page but only works on <strong>modern HTML5 browsers.<\/strong><\/p>\n<h4 id=\"index-html\"><span style=\"color: #800080;\"><b>index.html<\/b><\/span><\/h4>\n[pastacode lang=&#8221;markup&#8221; manual=&#8221;%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Ctitle%3EAdd%20query%20parameter%20to%20the%20url%20without%20reload%3C%2Ftitle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%20%20%3Cbutton%20onclick%3D%22updateURL()%3B%22%3EUpdate%3C%2Fbutton%3E%0A%20%20%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20function%20updateURL()%20%7B%0A%20%20%20%20%20%20if%20(history.pushState)%20%7B%0A%20%20%20%20%20%20%20%20%20%20var%20newurl%20%3D%20window.location.protocol%20%2B%20%22%2F%2F%22%20%2B%20window.location.host%20%2B%20window.location.pathname%20%2B%20&#8217;%3Fpara%3Dhello&#8217;%3B%0A%20%20%20%20%20%20%20%20%20%20window.history.pushState(%7Bpath%3Anewurl%7D%2C&#8221;%2Cnewurl)%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%3C%2Fscript%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A&#8221; message=&#8221;html code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<h3 id=\"solution-6\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 6:<\/label><\/span><\/h3>\n<p><span style=\"color: #808000;\"><b>We can use the following:<\/b><\/span><\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%24(&#8216;a&#8217;).click(function()%0A%7B%0Avar%20value%20%3D%20%24(this).attr(&#8216;id&#8217;)%3B%0Awindow.location.hash%20%3D%20value%3B%20%2F%2F%20it%20appends%20id%20to%20url%20without%20refresh%0A%7D)%3B%0A%0A%0A%24(window).bind(&#8216;hashchange&#8217;%20function()%20%0A%7B%0A%20%20%20%20var%20newhash%20%3D%20window.location.hash.substring(1)%20%2F%2F%20it%20gets%20id%20of%20clicked%20element%0A%20%20%20%20%2F%2F%20use%20load%20function%20of%20jquery%20to%20do%20the%20necessary&#8230;%0A%7D)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<h3 id=\"solution-7\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 7:<\/label><\/span><\/h3>\n<ul>\n<li>Changing only what&#8217;s after <strong>hash &#8211; old browsers<\/strong><\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;document.location.hash%20%3D%20&#8217;lookAtMeNow&#8217;%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>Changing<strong> full URL<\/strong> (the domain must be the same as original!) <a href=\"https:\/\/www.wikitechy.com\/technology\/enable-reader-mode-chrome-android\/\" target=\"_blank\" rel=\"noopener\">Chrome<\/a>, <a href=\"https:\/\/www.wikitechy.com\/technology\/10-cool-firefox-hidden-settings\/\" target=\"_blank\" rel=\"noopener\">Firefox<\/a>, IE10+<\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;history.pushState(&#8216;data%20to%20be%20passed&#8217;%2C%20&#8217;Title%20of%20the%20page&#8217;%2C%20&#8217;http%3A%2F%2Fwikitechy.com%2Ftest&#8217;)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>The above will add a new entry to the history so we can press Back button to go to the previous state. To change the <strong>URL<\/strong> in place without adding a new entry to history use.<\/li>\n<\/ul>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;history.replaceState(&#8216;data%20to%20be%20passed&#8217;%2C%20&#8217;Title%20of%20the%20page&#8217;%2C%20&#8217;http%3A%2F%2Fwikitechy.com%2Ftest&#8217;)%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\n<h3 id=\"solution-8\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 8:<\/label><\/span><\/h3>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;parent.location.hash%20%3D%20%E2%80%9Cwikitechy%22%3B%0A&#8221; message=&#8221;JAVASCRIPT CODE&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<h3 id=\"solution-9\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 9:<\/label><\/span><\/h3>\n<p>Below is the function to change the <strong>URL<\/strong> without reloading the page. It only support for <strong>HTML5<\/strong><\/p>\n[pastacode lang=&#8221;javascript&#8221; manual=&#8221;%20%20function%20ChangeUrl(page%2C%20url)%20%0A%7B%0A%20%20%20%20%20%20%20%20if%20(typeof%20(history.pushState)%20!%3D%20%22undefined%22)%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20obj%20%3D%20%7BPage%3A%20page%2C%20Url%3A%20url%7D%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20history.pushState(obj%2C%20obj.Page%2C%20obj.Url)%3B%0A%20%7D%0A%20else%0A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20window.location.href%20%3D%20%22homePage%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20alert(%22Browser%20does%20not%20support%20HTML5.%22)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20ChangeUrl(&#8216;Page1&#8217;%2C%20&#8217;homePage&#8217;)%3B%0A&#8221; message=&#8221;JAVASCRIPT CODE&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: How to Modify the URL without reloading the page? SOLUTION 1: Updating address bar with new URL without hash or reloading the page Example: [pastacode lang=&#8221;javascript&#8221; manual=&#8221;%20function%20processAjaxData(response%2C%20urlPath)%0A%7B%0A%20%20%20%20%20document.getElementById(%22content%22).innerHTML%20%3D%20response.html%3B%0A%20%20%20%20%20document.title%20%3D%20response.pageTitle%3B%0A%20%20%20%20%20window.history.pushState(%7B%22html%22%3Aresponse.html%2C%22pageTitle%22%3Aresponse.pageTitle%7D%2C%22%22%2C%20urlPath)%3B%0A%20%7D%0A%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/] we can then use window.onpopstate to detect the back\/forward button navigation: [pastacode lang=&#8221;javascript&#8221; manual=&#8221;window.onpopstate%20%3D%20function(e)%0A%7B%0A%20%20%20%20if(e.state)%0A%7B%0A%20%20%20%20%20%20%20%20document.getElementById(%22content%22).innerHTML%20%3D%20e.state.html%3B%0A%20%20%20%20%20%20%20%20document.title%20%3D%20e.state.pageTitle%3B%0A%20%20%20%20%7D%0A%7D%3B%0A&#8221; message=&#8221;javascript code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/] This works in Chrome, Safari, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,275],"tags":[4909,4902,4907,4914,4910,4912,4913,4905,4900,4898,4904,4908,4911,4901,4903,4906,4915,4899],"class_list":["post-2264","post","type-post","status-publish","format-standard","hentry","category-html","category-javascript","tag-change-browser-url-without-page-reloading-with-ajax","tag-change-browser-url-without-reloading-refreshing-page","tag-change-the-url-in-address-bar-without-refreshing-the-page","tag-change-url-jquery","tag-change-url-without-reloading-angularjs","tag-change-url-without-reloading-page-php","tag-changing-the-browser-url-without-refreshing-page","tag-html5-changing-the-browser-url-without-refreshing-page","tag-javascript-how-to-dynamically-change-url-without-reloading","tag-javascript-modify-the-url-without-reloading-the-page","tag-javascript-add-query-parameter-to-current-url-without-reload","tag-javascript-change-url-in-address-bar","tag-javascript-change-url-without-redirect","tag-jquery-change-url-without-refresh-the-page","tag-jquery-change-browser-url-without-reloading-refreshing-page","tag-jquery-how-do-you-change-the-address-bar-url-without-reloading","tag-pushstate-jquery","tag-updating-address-bar-with-new-url-without-hash-or-reloading-the-page"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2264","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=2264"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2264\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=2264"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=2264"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=2264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}