您當(dāng)前位置：首頁(yè) > web前端 > htmlcss > 關(guān)于onhashchange事件

關(guān)于onhashchange事件

來(lái)源：程序員人生發(fā)布時(shí)間：2014-05-30 14:13:15 閱讀次數(shù)：4489次

onhashchange 事件是一個(gè)新的事件，改事件在location.hash發(fā)生改變的時(shí)候觸發(fā)。FF3.6a2, IE 8, Chrome 4.0.206.1均支持該事件。該事件在ajax無(wú)刷新頁(yè)面提交中，能帶來(lái)更好的用戶體驗(yàn)。我們知道，在一個(gè)ajax請(qǐng)求中，每次頁(yè)面更新不能更新地址欄，歷史記錄也不能記錄每次更新的痕跡，地址欄左側(cè)的“前進(jìn)”和“后退”按鈕失去了原有的功能。有了Onhashchange事件，我們?cè)赼jax無(wú)刷新頁(yè)面提交的同時(shí)，可以很方便的記錄每次更新的痕跡。IE8的AJAX Navigations利用該事件放大縮小地圖，記錄用戶訪問(wèn)的痕跡，可查看AJAX Map。

我這里并不用ajax提交實(shí)例來(lái)說(shuō)明它如何使用，而是用一個(gè)我們經(jīng)常用到的tab切換來(lái)說(shuō)說(shuō)它的使用方法。在傳統(tǒng)的tab切換中，點(diǎn)擊“前進(jìn)”和“后退”按鈕并不能回到以前的狀態(tài)。以下是測(cè)試的html代碼：

<div class="tabBox" id="hashTab">
<ul class="tabTit">
<li><a href="#item1">item1</a></li>
<li><a href="#item2">item2</a></li>
<li><a href="#item3">item3</a></li>
<li class="last"><a href="#item4">item4</a></li>
</ul>
<div class="tabCon">
<div class="item" id="item1">
這里是第一個(gè)選項(xiàng)
</div>
<div class="item hide" id="item2">
這里是第二個(gè)選項(xiàng)
</div>
<div class="item hide" id="item3">
這里是第三個(gè)選項(xiàng)
</div>
<div class="item hide" id="item4">
這里是第四個(gè)選項(xiàng)
</div>
</div>
</div>

Css代碼不再列出，詳情可以參考示例頁(yè)。接下來(lái)我們開(kāi)始構(gòu)建tab切換效果的函數(shù)，利用jQuery，可以很容易的構(gòu)建我們需要的函數(shù)。當(dāng)然，你也可以使用jQuery自身的tab切換插件。

var current = "#item1";
var title = document.title;
function tabSwitch(obj,current){
$(".tabTit li").removeClass("current");
$(current).closest("li").addClass("current");
$(".tabCon .item").hide();
$(obj).show();
window.location.hash = obj;
document.title = title + " | " + obj.split("#")[1];
$("#currentObj").html("當(dāng)前被點(diǎn)擊的對(duì)象為：" + obj + "");
}

上面的代碼中，變量current記錄當(dāng)前被點(diǎn)擊的對(duì)象，title記錄頁(yè)面的title，以便每次，點(diǎn)擊時(shí)更新頁(yè)面的title。每次點(diǎn)擊時(shí)，將每次點(diǎn)擊的對(duì)象記錄在hash之中。至于觸發(fā)事件，不過(guò)是對(duì)比當(dāng)前hash與window.location.hash，并將新的hash存儲(chǔ)到window.location.hash之中。

function HashChangeHandler(){
var hash = window.location.hash;
if (hash != current){
current = hash;
tabSwitch(hash,$("a[href='" + hash +"']"));
}
}

最后，在body標(biāo)簽上綁定onhashchange事件：

最后，讓我們看看最終效果。

當(dāng)然，onhashchange事件是一個(gè)最新的事件，IE6、IE7等并不支持該事件，如果要在這些瀏覽器中保持良好的用戶體驗(yàn)，就得另辟蹊徑。 YUI’s History component 和 Really Simple History 都采用了 setInterval 的方式都采用setInterval 的方式來(lái)定時(shí)比較，待有改變時(shí)觸發(fā)。這種方法并不足取。網(wǎng)上的另一篇文章《Emulating onhashchange without setInterval》提到一種無(wú)需定時(shí)的跨瀏覽器解決方案，可茲借鑒。Dojo有一個(gè)hash.js也可以解決同樣的問(wèn)題，可查看http://retchless.com/hash/hash.html#color=blue。另外，jQuery.address.1.1.js插件可以很方便的讀取和修改hash，還是以上面的html代碼為基礎(chǔ)，在頁(yè)面中引入jQuery和jQuery.address.1.1.js。

Tab切換函數(shù)保持不變，添加以下代碼：

$.address.init(function(event) {
if(event.value == "/"){
$(".tabTit a:first").trigger("click");
};
}).change(function(event) {
var tab = (event.value).split("/")[1];
var selection = $('a[rel=address:' +tab + ']');
var obj = selection.attr('href');
$.address.title($.address.title().split(' | ')[0] + ' | ' + selection.text());
tabSwitch(obj,selection);
});

查看最終效果

技術(shù)的每一次發(fā)展更新總會(huì)帶來(lái)少許遺憾，這些遺憾卻給了我們更多思考的空間，在我們努力尋求解決方案的同時(shí)，更大的促進(jìn)了技術(shù)的發(fā)展。Ajax雖然能實(shí)現(xiàn)無(wú)刷新提交頁(yè)面，但是卻破壞了用戶體驗(yàn)。但是onhashchange事件的出現(xiàn)可以彌補(bǔ)剛方法的不足，提升了用戶體驗(yàn)，期待其他瀏覽器能很好的支持該事件。

原文：http://www.denisdeng.com/?p=689

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 淺析電子商務(wù)網(wǎng)站創(chuàng)建獨(dú)特產(chǎn)品頁(yè)面的策略

下一篇 互聯(lián)網(wǎng)網(wǎng)站運(yùn)營(yíng)和網(wǎng)站價(jià)值觀的所在價(jià)值

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

關(guān)于onhashchange事件