如何使用 history.pushState 更改 url 以使用 jQuery Ajax 创建页面转换？答案

【问题标题】：How to change the url with history.pushState to create a page transition with jQuery Ajax?如何使用 history.pushState 更改 url 以使用 jQuery Ajax 创建页面转换？
【发布时间】：2019-01-06 09:46:17
【问题描述】：

我正在尝试使用 window.history.pushState() 来实现无缝页面转换，以更改地址栏中的 url。我关注了这个tutorial，但是pushState抛出了以下错误：Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL [link] cannot be created in a document with origin 'null' and URL

有谁知道如何解决这个问题。我想要实现的是，获取被点击按钮的href并将url例如从：http://www.example.com/index.html更改为http://www.example.com/about.html。

$('.button').on('click', function(e) {
        e.preventDefault();

        var href = $(this).attr('href');
        window.history.pushState(null, null, href); 

        $.ajax({
            url: href,
            success: function(data) {
                // Do animation and change content
            }
        });
    });

【问题讨论】：

标签： javascript jquery transition

【解决方案1】：

如果您尝试从 http://www.example.com/index.html 更改 URL，您将不会收到该错误消息。

null 来源是页面上的一个来源，其 URL 以 file: 开头。

您需要在来源不是null 的页面中运行JS。即在具有 HTTP(S) URL 的 Web 服务器上。

【讨论】：