CODEWITHSUNDEEP
javascriptinternet-explorermicrosoft-edgepushstate
Daniel
Daniel

Reputation: 3691

How to push to browser's history in IE (>10) and Edge?

With window.history.pushState it is possible to push a state to the browser's history.

Example:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="foo" onclick="setHistory('foo');">
<input type="button" value="bar" onclick="setHistory('bar');">
<script>
function setHistory(string) {
    document.title = string;
    window.history.pushState(
            'object or string', 
            '', 
            string+'.html'
        );
}
</script>
</body>
</html>

After clicking on the foo and bar button the responding entries will appear in the browser's history. This works in Firefox, Chrome, and Safari. However, not in IE (>10) and Edge even though they officially support it. Is there a way to achieve this?

The answers at Does Internet Explorer support pushState and replaceState? are not useful since they explain the problem only with IE<10 where pushState is not supported.

Edit

Apart from not updating the history, pushState seems works otherwise fine in IE and Edge, i.e. updates the URL, can navigate back and forth, the "back and forth drop down list" is updated accordingly.

Edit 2

I just read https://msdn.microsoft.com/en-us/library/ms535864(v=vs.85).aspx. Under "Remarks" it states

"For security reasons, the history object does not expose the actual URLs in the browser history."

So maybe the part of pushState I am after just isn't supported in IE and Edge?

Upvotes: 2

Views: 3748

Answers (2)

Daniel
Daniel

Reputation: 3691

IE/Edge seems not to play along for some reason - not surprising I guess.

The only way to change the history seems to be an added reload of the page via window.location.reload(), history.go(0), or window.location.href=window.location.href.

https://codepen.io/pen seems to do it that way.

This is a bit annoying since one would also like to keep the current state of the website. Maybe one could check whether the users browser is IE and only then do annoying reload. Other browsers seem to play along just fine.

Upvotes: 0

JamesT
JamesT

Reputation: 3028

IE10 and above do support pushState and replaceState and your example code works in both.

However you might be triggering compatibility mode and rendering using a lower version of IE. (Again your sample code does so and renders using IE7 which doesn't support history api)

Compatibility mode

You can check this by pressing F12 to bring up the developer tools and seeing what version of IE is listed on the right of the black bar.

To stop it doing that, add this to your <head>:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

enter image description here

Upvotes: 1

Related Questions