历史记录API空状态

Question

I am trying to change the URL also (without refreshing the page) after I change my DOM with Ajax.

$("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);
        }
    })
})

But I get an error that says:

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

Your code doesn't include them, but your error suggests you're working with local files. Browsers do not support history operations on local filesystem URLs.

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

Couldn't find a reference for Firefox, but IIRC their behaviour is the same as Chrome's.