監聽 hash change 事件方法 @ ITseer – 資訊知識分享 | 程式技術討論

監聽 hash change 事件方法

奧革士 (Augus)發表於5/31/2012 11:57:00 上午 JavaScript , jQuery No comments

http://blog.weirong.li/wp-content/uploads/2016/09/9572d6e7-a240-4bdf-a2fa-7ed570989844

首先來說明為什麼要去監聽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;

本文簡單介紹了三個監聽hash改變事件的方法,hashchage事件現在被應用在許多single page 網頁上;我將會在下一篇文章中實作HashChange在實際上的應用

此条目发表在Uncategorized分类目录,贴了, 标签。将固定链接加入收藏夹。