PJAX和Firefox后退按钮问题

时间:2013-03-24 11:00:35

标签: php javascript jquery ajax pjax

我正在测试jquery.pjax.js并发现了一个问题 在我的最小测试项目中,发生如下的奇怪行为:

  1. 访问fireflx中的index.php
  2. 点击pjax链接:位置栏和页面内容已更改
  3. 点击Firefox的后退按钮:位置栏已更改,但内容仍然存在
  4. GoogleChrome中不会发生此行为 我想知道如何解决这个问题。

    我的测试项目是:
    http://karasunouta.com/php_test/pjax/
    http://karasunouta.com/files/pjax.zip

    的index.php

    <?php
        $page = 1;
        if (isset($_GET['page'])) {
            $page = $_GET['page'];
        }
    
        $isPjax = false;
        if (!empty($_SERVER['HTTP_X_PJAX'])) {
            $isPjax = true;
        }
    
        if (!$isPjax):
    ?>
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <title>page<?php echo $page; ?></title>
                <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
                <script type="text/javascript" src="js/jquery.pjax.js"></script>
                <script type="text/javascript">
                    $(function(){
                        // link
                        $(document).pjax('a.pjax', '#main');
    
                        // form
                        $(document).on('submit', 'form', function(event) {
                            $.pjax.submit(event, '#main')
                        })
                    });
                </script>
            </head>
            <body>
                <h1>pjax test</h1>
                <ul class="links">
                    <li><a href="?page=1" class="pjax">page1</a></li>
                    <li><a href="?page=2" class="pjax">page2</a></li>
                    <li><a href="?page=3" class="pjax">page3</a></li>
                </ul>
                <form>
                    Page:<input name="page" type="text" value="1">
                    <input type="submit">
                </form>
                <div id="main" style="border: 3px double gray">
    <?php endif; ?>
                    <?php include("page/{$page}.html") ?>
    <?php if (!$isPjax): ?>
                </div>
            </body>
        </html>
    <?php endif; ?>
    

    页/ 1.HTML

    page1 contents
    

    页/ 2.HTML

    page2 contents
    

    页/ 3.html

    page3 contents
    

    JS / jQuery的1.9.1.min.js
    JS / jquery.pjax.js

1 个答案:

答案 0 :(得分:0)

我本可以找到解决方案......

之前:

$(function(){
    // apply pjax
});

后:

$(document).ready(function() {
    // apply pjax
});

现在firefox后退按钮看起来很好用 我不确定原因。 它们的实际行为看起来不同,尽管有几篇文章说两种书写形式的含义完全相同......