Question

在我用Ajax更改DOM之后，我也在尝试更改URL（不刷新页面）。

$("nav li").click(function(e) {
    e.preventDefault();
    var url;
    var targetLocation = this.parentNode.attributes.href.value;
    switch (targetLocation) {
    case "index.html": url = "http://localhost:8080/home"; break;
    case "app.html": url = "http://localhost:8080/api"; break;
    case "contact.html": url = "http://localhost:8080/contact"; break;
    }

    $.ajax({
        type: "GET",
        dataType: "text",
        url: url,
        context: document.body,
        success: function(data) {
            $("div").text(data);
            history.pushState("", "", targetLocation);
        }
    })
})

但是我收到一条错误消息：

Uncaught DOMException: failed to execute "pushState" on "History": A history state object with URL "file:///C:/test/app.html" cannot be created in a document with origin "null" and URL "file:///C:/test/index.html".

Answer 1

您的代码不包含它们，但是您的错误表明您正在使用本地文件。浏览器不支持对本地文件系统URL的历史记录操作。

file：// URL的安全模型已无法修复。我们没有使File：// URL的特殊情况复杂化浏览器，而是通过使一类安全检查失败来选择禁用File：// URL的某些功能。不幸的是，pushState是这些功能之一。我建议您在应用程序中不要使用file：//网址。

https://bugs.chromium.org/p/chromium/issues/detail?id=301210

找不到Firefox的参考，但IIRC的行为与Chrome相同。

历史记录API空状态

1 个答案: