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

Question

我很确定这里有一个非常简单的解决方案，但我似乎想不出最好的方法。我正在使用 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);

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

Answer 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
    }

?>