我的消息真的很不靈通,一直到前兩天才看到這個東西。突然想起之前有看到的這篇,於是自己動手寫看看。果然相當神奇。 原來ajax也能做出上一頁、下一頁的效果。本著好奇的心態追了一下,原來是利用網址的hash做到這種效果。
為方便理解,我這裡用html來實做
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="text" id="text1" />
<input type="button" value="addHash" onclick="add();" />
</body>
</html>
<script type="text/javascript">
function add(){
var hash = location.hash;
if(hash.indexOf("#") > -1)
location.hash = hash + "&t=" + document.getElementById("text1").value;
else
location.hash = "#t=" + document.getElementById("text1").value;
}
</script>
如此一來,每次按下按鈕時,就會多出一個HistoryPoint。至於偵測使用者按下「上一頁」、「下一頁」的動作,則是利用setInterval(),不斷的檢查url。
不過在IE7或IE6上就沒這麼順利了,需要再加一個iframe,利用document.open()、document.close()的方式讓IE去加HistoryPoint。
[參考資料]
http://www.mikage.to/jquery/jquery_history.html
http://msdn.microsoft.com/zh-tw/ee460838.aspx
http://www.netmag.com.tw/member/netmag_article/N081108201.pdf
全站熱搜
留言列表