使用 History API 时，我应该如何处理返回到加载的初始页面答案

【问题标题】：How should I handle going back to the initial page loaded when using History API使用 History API 时，我应该如何处理返回到加载的初始页面
【发布时间】：2023-03-17 08:14:02
【问题描述】：

我很确定这里有一个非常简单的解决方案，但我似乎想不出最好的方法。我正在使用 History.js，它利用了 History API。假设我从以下页面开始：

<div ="header">
  Header
</div>
<div id="content">
  Content
</div>
<div id="footer">
  Footer
</div>

我处理 AJAX 调用的方式是用新的 html 替换 #content 的内容。因此，例如，我加载了“内容 2”的文本。这一切都很好，直到用户导航回他们在我网站上点击的第一页，因为它试图加载完整的第一页（包括#header和#footer，所以我最终得到：

<div ="header">
  Header
</div>
<div id="content">
  <div ="header">
    Header
  </div>
  <div id="content">
    Content
  </div>
  <div id="footer">
    Footer
  </div>
</div>
<div id="footer">
  Footer
</div>

我知道有更好的方法来构建我的页面以避免这个问题，但我似乎无法弄清楚它是什么。这是我正在使用的代码：

(function(window,undefined){
    var
    History = window.History,
    State = History.getState();

    History.Adapter.bind(window,'statechange',function(){
    var State = History.getState();
    $.ajax({
        url: History.getState().url,
        cache: false
    }).done(function( html ) {
        $("#content").html(html);
    });
    });
})(window);

关于处理这个问题的正确方法有什么想法吗？

【问题讨论】：

标签： javascript ajax api history.js

【解决方案1】：

<?php

    $is_ajax = isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' );

    if ( $is_ajax ) {
      // Give the content
    } else {
      // Give a full page
    }

?>

【讨论】：

完美。谢谢sn-p！