PJAX和Firefox的后退按钮问题

本文介绍了PJAX和Firefox的后退按钮问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我测试jquery.pjax.js，发现一个问题。
在我最低的测试项目，奇怪的行为，如下面情况发生：

I'm testing jquery.pjax.js and noticed a problem.
In my minimum test project, strange behavior like below happens:

在fireflx
单击一个pjax链接：地址栏和页面内容被改变
点击Firefox的后退按钮：地址栏更改，但内容仍然

Access to index.php in fireflx
Click a pjax link: location bar and page contents are changed
Click Firefox's back button: location bar is changed but contents remain

此行为不会发生在GoogleChrome。
我想知道如何解决这个问题。

This behavior doesn't happen in GoogleChrome.
I want to know how to solve this.

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

My test project is:
http://karasunouta.com/php_test/pjax/
http://karasunouta.com/files/pjax.zip

的index.php

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

page/1.html

page1 contents

页/ 2.HTML

page/2.html

page2 contents

页/ 3.html

page/3.html

page3 contents

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

js/jquery-1.9.1.min.js
js/jquery.pjax.js

推荐答案

我已经找到了解决方案，通过自己...

I could have found a solution by myself...

在

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

在

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

现在Firefox的后退按钮看起来做工精细。
我不知道为什么。
他们的实际行为看起来不一样，虽然一些文章说，这两名书写形式的含义是完全一样...

Now firefox back button looks working fine.
I'm not sure about reason why.
Actual behaviors of them looks different though several texts says the two writing form meanings are exactly same...

这篇关于PJAX和Firefox的后退按钮问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！