javascript - 历史 API 空状态

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 的历史操作。

The security model for file:// URLs is broken beyond repair. Rather than complicate the browser with special cases for file:// URLs, we've chosen to disable some features for file:// URLs by making a class of security checks fail. Unfortunately, pushState is one of those features. I'd recommend not using file:// URLs in your application.

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

找不到 Firefox 的引用，但 IIRC 它们的行为与 Chrome 的相同。