Search code examples
javascriptjquerybrowser-history

JavaScript: Navigate to a new URL without replacing the current page in the history (not window.location)


I know how to use window.location. The problem is that, (at least in FF) it erases the page you are on from the history. e.g., I'm on page A, I navigate to B and window.location is used to send me to C. If on page C, I click back, I end up at A, not B.

Is there some other way to navigate to another page without erasing the current page from the history?

EDIT: This wont happen if you run the code in Firebug.

Here is a super simple page (yes I know the code is ugly, it's not the real code) that shows the problem:

<html>
<head><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"> </script>
<body>  
<div class="foo"></div>
<a href="javascript:$('.foo').html('<scri'+'pt type=&quot;text/javascript&quot;>window.location = &quot;c.html&quot;</s'+'cript>');">b</a>

EDIT2: jQuery is the problem and setTimeout is the answer. I've added my solution below just in case someone else runs into this weird edge case.

EDIT3: This example is simplified to make it easier to test. In the real case, the click handler makes an Ajax call that returns the HTML, so we can't simplify the whole thing by just writing window.location = whatever. The code comes from the server, embedded in the HTML.


Solution

  • setTimeout is the answer.

    $(div).html('<script...> setTimeout(function() { window.location = url; },10); </script>');
    

    Doesn't have this problem. It must have something to do with the way jQuery executes inline scripts (by creating a script tag in the head element).