0

我对 pjax 有问题。

我在https://github.com/defunkt/jquery-pjax下载了最新的 pjax

然后我编码为演示，但它不起作用。main.html

<!DOCTYPE html>
<html>
<head>
    <title>main.html</title>
    <script type="text/javascript" src="../js/jquery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery/plugin/jquery.pjax.js"></script>
    <script>
        $(function(){
            $(window.document).pjax('a', '#pjax-container')
        });
    </script>
</head>
<body>
    <h1>My Site</h1>
    <div class="container" id="pjax-container">
        Go to <a href="MyHtml.html">next page</a>.
    </div>
</body>
</html>

和 MyHtml.html 如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyHtml.html</title>
  </head>
  <body>
    This is my HTML page. <br>
  </body>
</html>

当我点击链接时，它直接转发到 MyHtml.html。我的代码有问题吗？

我可以确定 pjax 已经工作了，当我单击 main.html 的后退按钮时，它会返回到我在 main.html 之前使用的另一个页面。

4

1 回答 1

11

由于您使用的是静态 HTML 页面，因此您将需要该fragment选项。您的 pjax 配置应该是：

$(function() {
    $(document).pjax('a', '#pjax-container', { 
        fragment: '#pjax-container', 
        timeout: 3000 
    });
});

此外，您的所有页面都需要具有相似的标记，只有内容#pjax-container不同。的内容#pjax-container应该是页面之间唯一改变的东西。您的MyHtml.html页面可能应该是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>MyHtml.html</title>
    <script type="text/javascript" src="../js/jquery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery/plugin/jquery.pjax.js"></script>
    <script>
    $(function() {
      $(document).pjax('a', '#pjax-container', { 
        fragment: '#pjax-container', 
        timeout: 3000 
      });
    });
    </script>
  </head>
  <body>
    <h1>My Site</h1>
    <div id="pjax-container">
      This is my HTML page. <br />
      Go to the <a href="main.html">main page</a>
    </div>
  </body>
</html>
于 2013-04-02T22:49:55.003 回答