close

我的消息真的很不靈通，一直到前兩天才看到這個東西。突然想起之前有看到的這篇，於是自己動手寫看看。果然相當神奇。 原來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

arrow
arrow
    全站熱搜

    AnferneeHardaway 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄