2013-03-24 83 views
1

我正在測試jquery.pjax.js並發現問題。
在我最低的測試項目,如下面奇怪的現象發生了:PJAX和Firefox後退按鈕問題

  1. 訪問的index.php在fireflx
  2. 點擊pjax鏈接:地址欄和頁面內容被改變
  3. 點擊Firefox的後退按鈕:位置欄已更改,但內容仍爲

在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

+0

我面臨着完全相同的問題與jQuery 1.9.1和jquery.pjax.js – Baaju 2013-03-27 10:11:23

+0

感謝您的回覆, Baaju。請測試此:http://stackoverflow.com/questions/15597625/pjax-and-firefox-back-button-issue/15657057#answer-15657057 – karasunouta 2013-03-27 10:55:49

回答

0

我可能已經發現自己的解決方案。 ..

之前:

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

後:

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

現在firefox後退按鈕看起來工作正常。
我不知道爲什麼。
他們的實際行爲看起來不同,雖然幾個文字說,兩個寫作形式的意義是完全相同的...