但很不幸地，IE7(或IE8/9開相容模式)對location.hash特性支援不夠完整，hash改變時並不會在瀏覽歷史中產生記錄，因此需要透過加入隱藏式iframe等特殊手法來克服，自己處理跨瀏覽器議題太辛苦，有個很好用的jQuery外掛BBQ(不是中秋烤肉巴比Q，是Back Button & Query)可以讓我們輕鬆寫出跨瀏覽器版的AJAX回上頁功能。
<!DOCTYPE html>
<html>
<head>
<title>AJAX GoBack</title>
<script src="Scripts/jquery-1.6.3.js" type="text/javascript"> </script>
<script src="Scripts/jquery.ba-bbq.js" type="text/javascript"> </script>
<script>
$(function () {
$("#s1").show();
$("input.nav-btn").click(function () {
var $btn = $(this);
$btn.parent().hide();
var nav = $btn.data("nav");
$("#" + nav).show();
//將目前的步驟加註在location.hash
$.bbq.pushState({ step: nav });
});
//hash變化時觸發hashchange事件
$(window).bind('hashchange', function (e) {
//由hash取出step參數，決定要顯示哪一個div
var s = e.getState("step") || "s1";
if (!$("#" + s + ":visible").length) {
$("#main > div").hide();
$("#" + s).show();
}
});
});
</script>
<style>
#main div { width: 300px; height: 200px; display: none; padding: 10px; }
#s1 { background-color: #ff7777; }
#s2 { background-color: #77ff77; }
#s3 { background-color: #7777ff; }
</style>
</head>
<body>
<div id="main">
<div id="s1">
STEP1
<input type="button" class="nav-btn" value="Next" data-nav="s2" />
</div>
<div id="s2">
STEP2
<input type="button" class="nav-btn" value="Next" data-nav="s3" />
</div>
<div id="s3">
FINAL
<input type="button" value="Submit" />
</div>
</div>
</body>
</html>
沒有留言:
張貼留言