如何在 IE (>10) 和 Edge 中推送浏览器的历史记录？

Question

使用 window.history.pushState 可以将状态推送到浏览器的历史记录中。

示例：

<!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>

点击 foo 和 bar 按钮后，相应的条目将出现在浏览器的历史记录中。这适用于 Firefox、Chrome 和 Safari。然而，在 IE (>10) 和 Edge 中却没有，尽管它们正式支持它。有办法实现吗？

Does Internet Explorer support pushState and replaceState? 处的答案没有用，因为它们只解释了 IE<10 不支持 pushState 的问题。

编辑

除了不更新历史之外，pushState 在 IE 和 Edge 中似乎工作正常，即更新 URL，可以来回导航，"back and forth drop down list" 相应更新.

编辑 2

我刚读完https://msdn.microsoft.com/en-us/library/ms535864(v=vs.85).aspx。 "Remarks" 下写着

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

所以也许 pushState 我所追求的部分在 IE 和 Edge 中不受支持？

Answer 1

IE10 及更高版本支持 pushState 和 replaceState，并且您的示例代码在两者中均有效。

但是，您可能会触发兼容模式并使用较低版本的 IE 进行渲染。（您的示例代码再次这样做并使用不支持历史记录的 IE7 呈现 api）

您可以通过按 F12 调出开发人员工具并查看黑条右侧列出的 IE 版本来检查。

要阻止它这样做，请将其添加到您的 <head>:

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

Answer 2

IE/Edge 似乎出于某种原因不配合 - 我想这并不奇怪。

更改历史记录的唯一方法似乎是通过 window.location.reload()、history.go(0) 或 window.location.href=window.location.href.

添加重新加载页面

https://codepen.io/pen 好像是那样做的。

这有点烦人，因为人们还想保持网站的当前状态。也许可以检查用户浏览器是否是 IE，然后才进行烦人的重新加载。其他浏览器似乎也能正常运行。

如何在 IE (>10) 和 Edge 中推送浏览器的历史记录？

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

javascript

internet-explorer

microsoft-edge

pushstate