Question

我最近看到很多网站允许您在不重新加载页面的情况下导航到不同的页面（看似）。例如：

https://www.protest.eu/shop/category/men/

我知道我可以通过替换内容和更改网址来通过AJAX实现，但这有缺点。主要是，如果您尝试跟踪网页访问次数，他们将无法显示以这种方式导航到的网页...因为您实际上并未访问该网页。

有没有更好的方法来实现这一目标？

Answer 1

我知道我可以通过AJAX
来做到这一点

你就是这样做的。

如果您尝试跟踪网页访问次数，则不会显示以这种方式导航到的网页

如何解决这个问题取决于您用来跟踪网页访问次数。

例如，如果您使用的是Google Analytics，那么您可以执行以下操作：

function ajaxLoadHandler() {
    var content = this.responseText;
    var url = "/bar.html";
    update_content_with(content);
    history.pushState({ raw_content: content }, "page 2", url);
    ga('send', {
        hitType: 'pageview',
        page: url
    });
}

Answer 2

此方法称为SPA（单页面应用程序）。您之前提到的回调可以通过一些Js方法和事件监听器来处理（histrory.pushstate，onpopstate ... ref：https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate。）

一些JS框架（如React，Backbone，CanJS，SpineJS，BatmanJS，EmberJS，AngularJS等）有助于实现SPA sloution。这些框架提供了路由模块以实现浏览器历史功能，这些也提供了视图，模型，控制器，集合WTC。您可以选择适合您业务需求的框架之一。

更改页面而不重新加载页眉/页脚？

2 个答案: