How do I modify the URL without reloading the page

Question

Is there a way I can modify the URL of the current page without reloading the page   I would like to access the portion before the   hash if possible   I only need to change the portion after the domain  so it s not like I m violating cross-domain policies    window location href    www mysite com page2 php       Sadly this reloads

User · Answer

You can add anchor tags  I use this on my site so that I can track with Google Analytics what people are visiting on the page   I just add an anchor tag and then the part of the page I want to track   var trackCode          urlencode    myDiv   text     window location href    http   www piano-chords net    trackCode  pageTracker  trackPageview trackCode

User · Answer

Any changes of the loction  either window location or document location  will cause a request on that new URL  if you   re not just changing the URL fragment  If you change the URL  you change the URL   Use server-side URL rewrite techniques like Apache   s mod rewrite if you don   t like the URLs you are currently using

User · Answer

Your new url  let newUrlIS    window location origin     user profile management    In a sense  calling pushState   is similar to setting window location    quot  foo quot   in that both will also create and activate another history entry associated with the current document  But pushState   has a few advantages  history pushState     null  newUrlIS

User · Answer

This code works for me  I used it into my application in ajax  history pushState   foo   bar           bank     Once a page load into an ID using ajax  It does change the browser url automatically without reloading the page  This is ajax function bellow  function showData          ajax         type   quot POST quot         url   quot Bank php quot          data             success  function html                        quot  viewpage quot   html html  show               quot  viewpage quot   css  quot margin-left quot   quot 0px quot                         Example  From any page or controller like  quot Dashboard quot   When I click on the bank  it loads bank list using the ajax code without reloading the page  At this time  browser URL will not be changed  history pushState   foo   bar           bank     But when I use this code into the ajax  it change the browser url without reloading the page  This is the full ajax code here in the bellow  function showData              ajax             type   quot POST quot             url   quot Bank php quot              data                 success  function html                            quot  viewpage quot   html html  show                   quot  viewpage quot   css  quot margin-left quot   quot 0px quot                history pushState   foo   bar           bank

User · Answer

As pointed out by Thomas Stjernegaard Jeppesen  you could use History js to modify URL parameters whilst the user navigates through your Ajax links and apps    Almost an year has passed since that answer  and History js grew and became more stable and cross-browser  Now it can be used to manage history states in HTML5-compliant as well as in many HTML4-only browsers  In this demo You can see an example of how it works  as well as being able to try its functionalities and limits    Should you need any help in how to use and implement this library  i suggest you to take a look at the source code of the demo page  you will see it s very easy to do   Finally  for a comprehensive explanation of what can be the issues about using hashes  and hashbangs   check out this link by Benjamin Lupton

User · Answer

This can now be done in Chrome  Safari  Firefox 4   and Internet nbsp Explorer nbsp 10pp4    See this question s answer for more information  Updating address bar with new URL without hash or reloading the page  Example    function processAjaxData response  urlPath        document getElementById  content   innerHTML   response html       document title   response pageTitle       window history pushState   html  response html  pageTitle  response pageTitle      urlPath        You can then use window onpopstate to detect the back forward button navigation   window onpopstate   function e       if e state           document getElementById  content   innerHTML   e state html          document title   e state pageTitle               For a more in-depth look at manipulating browser history  see this MDN article

User · Answer

In modern browsers and HTML5  there is a method called pushState on window history  That will change the URL and push it to the history without loading the page   You can use it like this  it will take 3 parameters  1  state object 2  title and a URL    window history pushState  page   another     another page    example html      This will change the URL  but not reload the page  Also  it doesn t check if the page exist  so if you do some JavaScript code which be reacting to the URL  you can work with them like this   Also there is history replaceState   which does exactly the same thing  except it will modify the current history instead of creating a new one   Also you can create a function to check if history pushState exist  then carry on with the rest like this   function goTo page  title  url      if   undefined      typeof history pushState        history pushState  page  page   title  url       else       window location assign url          goTo  another page    example    example html      Also you can change the   for  lt HTML5 browsers  which won t reload the page  That s the way Angular uses to do SPA according to hashtag     Changing   is quite easy  doing like   window location hash    example     And you can detect it like this   window onhashchange   function        console log   changed   window location hash

User · Answer

If what you re trying to do is allow users to bookmark share pages  and you don t need it to be exactly the right URL  and you re not using hash anchors for anything else  then you can do this in two parts  you use the location hash discussed above  and then implement a check on the home page  to look for a URL with a hash anchor in it  and redirect you to the subsequent result   For instance   1  User is on www site com section page 4  2  User does some action which changes the URL to www site com   section page 6  with the hash   Say you ve loaded the correct content for page 6 into the page  so apart from the hash the user is not too disturbed   3  User passes this URL on to someone else  or bookmarks it  4  Someone else  or the same user at a later date  goes to www site com   section page 6  5  Code on www site com  redirects the user to www site com section page 6  using something like this    if  window location hash length  gt  0       window location   window location hash substring 1       Hope that makes sense  It s a useful approach for some situations

User · Answer

Below is the function to change the URL without reloading the page  It is only supported for HTML5     function ChangeUrl page  url            if  typeof  history pushState      undefined                 var obj    Page  page  Url  url               history pushState obj  obj Page  obj Url             else               window location href    homePage                  alert  Browser does not support HTML5                        ChangeUrl  Page1    homePage

User · Answer

Use history pushState   from the HTML 5 History API   Refer to the HTML5 History API for more details

User · Answer

Before HTML5 we can use   parent location hash    hello     and   window location replace  http www example com      This method will reload your page  but HTML5 introduced the history pushState page  caption  replace url  that should not reload your page

User · Answer

You can also use HTML5 replaceState if you want to change the url but don t want to add the entry to the browser history   if  window history replaceState         prevents browser from storing history with each change     window history replaceState statedata  title  url       This would  break  the back button functionality  This may be required in some instances such as an image gallery  where you want the back button to return back to the gallery index page instead of moving back through each and every image you viewed  whilst giving each image its own unique url

User · Answer

NOTE  If you are working with an HTML5 browser then you should ignore this answer  This is now possible as can be seen in the other answers   There is no way to modify the URL in the browser without reloading the page  The URL represents what the last loaded page was  If you change it  document location  then it will reload the page   One obvious reason being  you write a site on www mysite com that looks like a bank login page  Then you change the browser URL bar to say www mybank com  The user will be totally unaware that they are really looking at www mysite com

User · Answer

You can use this beautiful and simple function to so so anywhere on your application  function changeurl url  title        var new url         url      window history pushState  data   title  new url           You can not only edit URL but you can update title along with it  Quite helpful everyone

User · Answer

parent location hash    hello

User · Answer

This is all you will need to navigate without reload  x000D   x000D     add setting without reload  location hash    setting       if url change with hash do somthing window addEventListener  hashchange        gt        console log  url hash changed             if url change do somthing  dont detect changes with hash    window addEventListener  locationchange   function          console log  url changed               remove  setting without reload   history back    x000D   x000D   x000D

User · Answer

Here is my solution  newUrl is your new URL which you want to replace with the current one    history pushState     null  newUrl

User · Answer

The HTML5 replaceState is the answer  as already mentioned by Vivart and geo1701  However it is not supported in all browsers versions  History js wraps HTML5 state features and provides additional support for HTML4 browsers

User · Answer

HTML5 introduced the history pushState   and history replaceState   methods  which allow you to add and modify history entries  respectively  window history pushState  page2    Title     page2 php     Read more about this from here

[javascript] How do I modify the URL without reloading the page?

Examples related to javascript

Examples related to html

Examples related to url

Examples related to url-rewriting

Examples related to friendly-url