Question

我在使用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之前使用的另一个页面。

Answer 1

由于您使用的是静态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>

pjax不起作用

1 个答案: