前言
首先來說明為什麼要去監聽hash改變這個動機好了，現在有許多的應用都取向於單一頁面而不是過去的多個頁面，好處有很多，最明顯的好處就是只需要使用ajax的方式去改變要改變的區塊就好，不用整個page重新reload，最經典的例子就是gmail;如果要實作這樣的功能做常見的方式就是透過改變window.location.hash這個屬性來達成，瀏覽器hash屬性改變時並不會讓當前的頁面去reload，我們定義不同的hash位址定位不同的功能頁面，例如
www.itseer.com/#main : 首頁
www.itseer.com/#contact : 聯絡頁面
www.itseer.com/#author : 作者頁面
藉由監聽hash值得改變，動態的去載入或更換畫面需要update的部分。
方法一 : 使用javascript onhashchange事件
我們可以對window的onhashchange綁定事件，但是onhashchange事件在ie7 ie9雖然存在，但是這個事件卻不會被觸發，所以需要對ie瀏覽器使用不同的解法，這邊的提供解法是每100毫秒檢查一次hash是否有沒有改變，若改變就觸發要做的事情，這樣有點浪費效能的嫌疑。
if (("onhashchange" in window) && !($.browser.msie)) {
window.onhashchange = function () {
alert(window.location.hash);
}
// Or $(window).bind( 'hashchange',function(e) {
// alert(window.location.hash);
// });
}
else {
var prevHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != prevHash) {
storedHash = window.location.hash;
alert(window.location.hash);
}
}, 100);
}
方法二 : 使用jQuery.on(“hashchange” function(){})
這個做法是最簡單的，但是在firefox與safari存在一些bug，這個事件是不會被觸發的，如果要解決這樣的問題可以將方法一與二並用，但這樣太麻煩了…。
$(window).bind('hashchange', function() {
.. work ..
});
方法三 : 使用jquery-hashchange plugin
網址 :
https://github.com/cowboy/jquery-hashchange
瀏覽器支援 :
Internet Explorer 6-8, Firefox 2-4, Chrome 5-6, Safari 3.2-5, Opera 9.6-10.60, iPhone 3.1, Android 1.6-2.2, BlackBerry 4.6-5.
使用方法 :
$(function(){
// Bind an event to window.onhashchange that, when the hash changes, gets the
// hash and adds the class "selected" to any matching nav link.
$(window).hashchange( function(){
var hash = location.hash;
alert(hash);
})
// Since the event is only triggered when the hash changes, we need to trigger
// the event now, to handle the hash the page may have loaded with.
$(window).hashchange();
});
$.fn.hashchange帶有參數使用來綁定事件處理function，
若不帶參數則表示你要手動直接觸發hashchage事件。
如果你必須在IE6/7上使用，那就必須而外設定domain屬性給這個plugin，如下
jQuery.fn.hashchange.domain = document.domain;
沒有留言:
張貼留言