Change the URL in the browser without loading the new page using JavaScript

Question

How would I have a JavaScript action that may have some effects on the current page but would also change the URL in the browser so if the user hits reload or bookmark  then the new URL is used     It would also be nice if the back button would reload the original URL   I am trying to record JavaScript state in the URL

User · Answer

I would strongly suspect this is not possible, because it would be an incredible security problem if it were. For example, I could make a page which looked like a bank login page, and make the URL in the address bar look just like the real bank!

Perhaps if you explain why you want to do this, folks might be able to suggest alternative approaches...

[Edit in 2011: Since I wrote this answer in 2008, more info has come to light regarding an HTML5 technique that allows the URL to be modified as long as it is from the same origin]

User · Answer

Facebook s photo gallery does this using a  hash in the URL  Here are some example URLs   Before clicking  next     photo php fbid 496429237507 amp set a 218088072507 133423 681812507 amp pid 5887027 amp id 681812507   After clicking  next     photo php fbid 496429237507 amp set a 218088072507 133423 681812507 amp pid 5887027 amp id 681812507   photo php fbid 496435457507 amp set a 218088072507 133423 681812507 amp pid 5887085 amp id 681812507   Note the hash-bang      immediately followed by the new URL

User · Answer

jQuery has a great plugin for changing browsers  URL  called jQuery-pusher  JavaScript pushState and jQuery could be used together  like  history pushState null  null    this  attr  href     Example     a   click function  event          Prevent default click action   event preventDefault               Detect if pushState is available   if history pushState        history pushState null  null    this  attr  href           return false        Using only JavaScript history pushState    which changes the referrer  that gets used in the HTTP header for XMLHttpRequest objects created after you change the state  Example  window history pushState  quot object quot    quot Your New Title quot    quot  new-url quot    The pushState   method  pushState   takes three parameters  a state object  a title  which is currently ignored   and  optionally  a URL  Let s examine each of these three parameters in more detail   state object     The state object is a JavaScript object which is associated with the new history entry created by pushState    Whenever the user navigates to the new state  a popstate event is fired  and the state property of the event contains a copy of the history entry s state object  The state object can be anything that can be serialized  Because Firefox saves state objects to the user s disk so they can be restored after the user restarts her browser  we impose a size limit of 640k characters on the serialized representation of a state object  If you pass a state object whose serialized representation is larger than this to pushState    the method will throw an exception  If you need more space than this  you re encouraged to use sessionStorage and or localStorage   title     Firefox currently ignores this parameter  although it may use it in the future  Passing the empty string here should be safe against future changes to the method  Alternatively  you could pass a short title for the state to which you re moving   URL     The new history entry s URL is given by this parameter  Note that the browser won t attempt to load this URL after a call to pushState    but it might attempt to load the URL later  for instance after the user restarts her browser  The new URL does not need to be absolute  if it s relative  it s resolved relative to the current URL  The new URL must be of the same origin as the current URL  otherwise  pushState   will throw an exception  This parameter is optional  if it isn t specified  it s set to the document s current URL

User · Answer

If you want it to work in browsers that don t support history pushState and history popState yet  the  old  way is to set the fragment identifier  which won t cause a page reload   The basic idea is to set the window location hash property to a value that contains whatever state information you need  then either use the window onhashchange event  or for older browsers that don t support onhashchange  IE  lt  8  Firefox  lt  3 6   periodically check to see if the hash has changed  using setInterval for example  and update the page  You will also need to check the hash value on page load to set up the initial content   If you re using jQuery there s a hashchange plugin that will use whichever method the browser supports  I m sure there are plugins for other libraries as well   One thing to be careful of is colliding with ids on the page  because the browser will scroll to any element with a matching id

User · Answer

I was wondering if it will posible as long as the parent path in the page is same  only something new is appended to it   So like let s say the user is at the page  http   domain com site page html Then the browser can let me do location append   new html and the page becomes  http   domain com site page htmlnew html and the browser does not change it    Or just allow the person to change get parameter  so let s location get   me 1 amp page 1   So original page becomes http   domain com site page html me 1 amp page 1 and it does not refresh    The problem with   is that the data is not cached  at least I don t think so  when hash is changed  So it is like each time a new page is being loaded  whereas back- and forward buttons in a non-Ajax page are able to cache data and do not spend time on re-loading the data   From what I saw  the Yahoo history thing already loads all of the data at once  It does not seem to be doing any Ajax requests  So when a div is used to handle different method overtime  that data is not stored for each history state

User · Answer

There s a jquery plugin  http   www asual com jquery address   I think this is what you need

User · Answer

Browser security settings prevent people from modifying the displayed url directly  You could imagine the phishing vulnerabilities that would cause   Only reliable way to change the url without changing pages is to use an internal link or hash  e g   http   site com page html becomes http   site com page html item1   This technique is often used in hijax AJAX   preserve history     When doing this I ll often just use links for the actions with the hash as the href  then add click events with jquery that use the requested hash to determine and delegate the action    I hope that sets you on the right path

User · Answer

window location href contains the current URL  You can read from it  you can append to it  and you can replace it  which may cause a page reload   If  as it sounds like  you want to record javascript state in the URL so it can be bookmarked  without reloading the page  append it to the current URL after a   and have a piece of javascript triggered by the onload event parse the current URL to see if it contains saved state   If you use a   instead of a    you will force a reload of the page  but since you will parse the saved state on load this may not actually be a problem  and this will make the forward and back buttons work correctly as well

User · Answer

my code is     change address bar function setLocation curLoc       try           history pushState null  null  curLoc           return false        catch e             location hash         curLoc      and action   setLocation  http   example com your-url-here      and example    document  ready function           nav li a   on  click   function            if   this  hasClass  active                 else               setLocation   this  attr  href                           return false                That s all

User · Answer

What is working for me is - history replaceState   function which is as follows -   history replaceState data  Title of page    url-of-the-page       This will not reload page  you can make use of it with event of javascript

User · Answer

There is a Yahoo YUI component  Browser History Manager  which can handle this  http   developer yahoo com yui history

User · Answer

I ve had success with   location hash  myValue     It just adds  myValue to the current URL  If you need to trigger an event on page Load  you can use the same location hash to check for the relevant value  Just remember to remove the   from the value returned by location hash e g   var articleId   window location hash replace

User · Answer

A more simple answer i present   window history pushState null  null    abc     this will add  abc after the domain name in the browser URL  Just copy this code and paste it in the browser console and see the URL changing to  https   stackoverflow com abc

User · Answer

With HTML 5  use the history pushState function  As an example    lt script type  text javascript  gt  var stateObj     foo   bar     function change my url        history pushState stateObj   page 2    bar html      var link   document getElementById  click    link addEventListener  click   change my url  false    lt  script gt    and a href    lt a href     id  click  gt Click to change url to bar html lt  a gt      If you want to change the URL without adding an entry to the back button list  use history replaceState instead

[javascript] Change the URL in the browser without loading the new page using JavaScript

Examples related to javascript

Examples related to url

Examples related to html5-history

Examples related to fragment-identifier

Examples related to hashchange