{"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=\u201djavascript\u201d manual=\u201d%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\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201djavascript\u201d manual=\u201dwindow.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\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201djavascript\u201d manual=\u201dwindow.history.pushState(%22object%20or%20string%22%2C%20%22Title%22%2C%20%22%2Fnew-url%22)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>use <strong>history.pushState<\/strong> like this:<\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201dhistory.pushState(null%2C%20null%2C%20\u2019%2Fen%2Fstep2\u2032)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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\u2019s 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\u2019t support it).<\/li>\n<\/ul>\n<h4 id=\"heres-an-example\"><span style=\"color: #800080;\"><strong>Here\u2019s an example:<\/strong><\/span><\/h4>\n[pastacode lang=\u201djavascript\u201d manual=\u201dhistory.pushState(\u2018%20\u2019%2C%20\u2019New%20Page%20Title\u2019%2C%20newHREF)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201djavascript\u201d manual=\u201d%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(\u2018Page1\u2019%2C%20\u2019Page1.htm\u2019)%3B%22%20%2F%3E%0A%3Cinput%20type%3D%22button%22%20value%3D%22Page2%22%20onclick%3D%22ChangeUrl(\u2018Page2\u2019%2C%20\u2019Page2.htm\u2019)%3B%22%20%2F%3E%0A%3Cinput%20type%3D%22button%22%20value%3D%22Page3%22%20onclick%3D%22ChangeUrl(\u2018Page3\u2019%2C%20\u2019Page3.htm\u2019)%3B%22%20%2F%3E%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201dmarkup\u201d manual=\u201d%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\u2019%3Fpara%3Dhello\u2019%3B%0A%20%20%20%20%20%20%20%20%20%20window.history.pushState(%7Bpath%3Anewurl%7D%2C\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\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=\u201djavascript\u201d manual=\u201d%24(\u2018a\u2019).click(function()%0A%7B%0Avar%20value%20%3D%20%24(this).attr(\u2018id\u2019)%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(\u2018hashchange\u2019%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\u2026%0A%7D)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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\u2019s after <strong>hash \u2013 old browsers<\/strong><\/li>\n<\/ul>\n[pastacode lang=\u201djavascript\u201d manual=\u201ddocument.location.hash%20%3D%20\u2019lookAtMeNow\u2019%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201djavascript\u201d manual=\u201dhistory.pushState(\u2018data%20to%20be%20passed\u2019%2C%20\u2019Title%20of%20the%20page\u2019%2C%20\u2019http%3A%2F%2Fwikitechy.com%2Ftest\u2019)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201djavascript\u201d manual=\u201dhistory.replaceState(\u2018data%20to%20be%20passed\u2019%2C%20\u2019Title%20of%20the%20page\u2019%2C%20\u2019http%3A%2F%2Fwikitechy.com%2Ftest\u2019)%3B%0A\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h3 id=\"solution-8\"><span style=\"color: #339966;\"><label class=\"label label-info\">SOLUTION 8:<\/label><\/span><\/h3>\n[pastacode lang=\u201djavascript\u201d manual=\u201dparent.location.hash%20%3D%20%E2%80%9Cwikitechy%22%3B%0A\u201d message=\u201dJAVASCRIPT CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201djavascript\u201d manual=\u201d%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(\u2018Page1\u2019%2C%20\u2019homePage\u2019)%3B%0A\u201d message=\u201dJAVASCRIPT CODE\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\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=\u201djavascript\u201d manual=\u201d%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\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] we can then use window.onpopstate to detect the back\/forward button navigation: [pastacode lang=\u201djavascript\u201d manual=\u201dwindow.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\u201d message=\u201djavascript code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] 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}]}}