Using history.pushstate in IE9

Question

Since window.history.pushState is not aviliable for HTML 4 browsers like IE9 , I have looked for history.js, a jQuery library that simulates the pushState behavior.

The problem is , when using pushState, the end of the url is duplicated

For example,

History.pushState(null,null,window.location.pathname + '?page=1');

returns,

http://www.development.com/test.html#test.html?page=1

How do I avoid this problem? Thank you kindly.

Update (On 2012 / 1 /22) , Question for bounty:

                if (pageNo == 1){
                    //window.history.pushState({"html":currURL,"pageTitle":''},"", window.location.pathname + '?page=1'); For chrome and FX only
                    //History.replaceState(null,null,'')
                    //History.pushState(null,null,'?issue=' + currPageIssueNo + '&page=1');
                }   
                else if (pageNo != 1 || pageNo == 1 && linkPageNo > 1  ) {
                    History.pushState(null,null,'?issue=' + currPageIssueNo + '&page=' + pageNo);
                    //window.history.pushState({"html":currURL,"pageTitle":''},"", newURL);   For chrome and FX only
                }

I am still encounter the problem , if it is the first page

http://localhost/development/flipV5.html?issue=20121220&page=1

When i go to second page in IE9 , it has url :

http://localhost/development/flipV5.html?issue=20121220&page=1#flipV5.html?issue=20121220&page=2

Which i would like to achieve is

http://localhost/development/flipV5.html?issue=20121220&page=2

If it is impossible for HTML 4 browser, please at least achieve

http://localhost/development/flipV5.html/#?issue=20121220&page=2

thanks for kindly help

Answer 1

Your code does exactly what you'd expect it to.

window.location.pathname + '?page=1'

Prints out the location pathname (test.html), and appends ?page=1

Remove window.location.pathname and it should work.

Answer 2

You need to set up a client-side redirect for IE. Assuming the user lands at this page:

http://localhost/development/flipV5.html?issue=20121220&page=1

They need to be sent to

http://localhost/development/flipV5.html#?issue=20121220&page=1

The reason is that IE <= 9 doesn't let you modify anything before the hash, without sending the user to a new page. It's an old security feature preventing changing the URL to facebook.com, when you're really on spambook.com. Recently, people have realized that that's overkill.

The redirect looks like this:

<!--[if LTE IE 9]>
<script type="text/javascript">
if (location.search) 
    location.href = location.pathname + "#" + location.search;
</script>
<![endif]-->

You can now push states, and they won't show up in both the search and the hash (that's after the ? and # respectively)

Answer 3

Just remove window.location.pathname from History.pushState

History.pushState(null,null,'?page=1');

Answer 4

Maybe try:

History.replaceState(null,null,'?issue=' + currPageIssueNo + '&page=' + pageNo);