Question

我想在支持浏览器时使用window.history.pushState()功能。不幸的是我在Firefox上收到错误：

TypeError：history.pushState不是函数

如何避免这种情况？

Answer 1

虽然我没有在JavaScript中测试它，但我知道在其他语言中try-catch比简单的if-catch更耗费资源...

使用：

if(history.pushState) {
    history.pushState({"id":100}, document.title, location.href);
}

请记住，当您单击后退按钮时，除非您实施window.onpopstate，否则实际上不会发生任何事情。您需要传递获取内容所需的数据：

if(history.pushState && history.replaceState) {
    //push current id, title and url
    history.pushState({"id":100}, document.title, location.href);

    //push new information
    history.pushState({"id":101}, "new title", "/new-url/");

    //this executes when you use the back button
    window.onpopstate = function(e) {
        alert(e.state.id);
        //perhaps use an ajax call to update content based on the e.state.id
    };
}

Answer 2

[try-catch]标签意味着你已经知道了答案......（有什么更具体的吗？）另一种可能性是检查if ( history.pushState ) history.pushState( {}, document.title, location.href );

Answer 3

历史记录API确实存在填充程序。 History.js使用HTML4的hashchange事件和文档片段标识符来模拟旧浏览器中的历史API。如果现代浏览器使用其中一个哈希URL，则它使用replaceState来安静地更正URL。

如果您不担心它不能在旧版浏览器中工作而您只是想使用它而不会抛出错误，我会这样做......

window.history && window.history.pushState && window.history.pushState("", "", url);

在尝试使用它之前，它会检查历史记录和pushstate函数是否存在。

我怎样才能'安全'使用window.history.pushState

3 个答案: