javascript - Using history.pushstate in IE9 - Stack Overflow

admin管理员组

文章数量:1291532

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,

.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

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./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

• javascript
• jquery
• html
• internet-explorer-9
• pushstate

Share Improve this question Follow edited Mar 3, 2013 at 16:29 Josh Unger 7,17377 gold badges3737 silver badges5555 bronze badges asked Jan 15, 2013 at 17:05 user782104user782104 13.6k6060 gold badges178178 silver badges315315 bronze badges 5

• 'test.html' , ideally, should be development./test.htm;?page=1 is perfect, but it seems not possible – user782104 Commented Jan 15, 2013 at 17:12
• This is the demo balupton.github./history.js/demo/?state=4 – user782104 Commented Jan 15, 2013 at 17:14
• Try it as balupton.github./history.js/demo/#?state=4 – Musa Commented Jan 15, 2013 at 17:19
• Since IE9 doesn't support pushState, it's emulated by using onhashchange. That means it's (probably) supposed to add the #test.html to the URL. – gen_Eric Commented Jan 15, 2013 at 17:20
• thanks, would you mind look at updated question? – user782104 Commented Jan 15, 2013 at 17:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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.

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., when you're really on spambook.. 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)

Just remove window.location.pathname from History.pushState

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

Maybe try:

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

本文标签： javascriptUsing historypushstate in IE9Stack Overflow