我正在测试 jquery.pjax.js 并注意到一个问题。
在我的最小测试项目中,发生了如下奇怪的行为:
- 在 fireflx 中访问 index.php
- 单击 pjax 链接:位置栏和页面内容已更改
- 单击 Firefox 的后退按钮:位置栏已更改但内容仍然存在
这种行为在 GoogleChrome 中不会发生。
我想知道如何解决这个问题。
我的测试项目是: http:
//karasunouta.com/php_test/pjax/
http://karasunouta.com/files/pjax.zip
索引.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