轉自: http://www.itokit.com/web/13/2008/11/11634.html
超鏈接的href 和onclick引發的思考.
1、在Baidu空間中的發現
空間是一個功能簡潔的Blog,但是它提供操作是比較方便的,一些常用的功能都使用模擬窗口作為界面,而不是要頁面跳轉或者新開窗口。& f* P- W- {0 r) f# s
我從HTML代碼里面找到了創建分類的鏈接代碼:
E% F
<a href=”/heero0w/creat/category/” target=”_blank” onClick=”openaddcat(’/heero0w/creat/category/’);return false;” tabindex=”-1″>增加新分類</a>:
這是一種非常健壯的代碼結構,onclick里面的javascript代碼執行后返回了false,相當于鏈接功能被屏蔽。但是,當 javascript被禁用或者onclick里面的代碼執行出錯時,鏈接功能還是正常的。當網速很慢導致openaddcat函數的代碼還未被讀取時,單擊鏈接就會彈出了一個新頁面。因此,用戶點擊這個鏈接之后就不會出現什么都沒發生的情況,提高了用戶體驗
2、用同樣的思路進行SEO優化
某些網站的列表頁使用了AJAX進行分頁,即換頁的時候只刷新列表的部分,而不是整頁刷新。代碼可能是
<a href=”###” onclick=”jumpPage(2)”>第二頁</a>
這種方式向來有一種缺點:SEO非常糟糕。搜索引擎基本上是不認識Javascript代碼的,所以它搜不到除了第一頁之后的內容。按照上面的思路,我們需要給href加上一個有意義的鏈接,讓搜索引擎可以搜到該頁。改進如下:<a href=”?page=2″ onclick=”jumpPage(2);return false;”>第二頁</a>'
當然,這樣寫的前提是做兩份頁面,一份是AJAX分頁時的處理請求的頁面,另一份是常規分頁頁面。
3、改進
上面的鏈接代碼不符合HTML與Javascript分離的原則,而且在openaddcat未被讀取時按下鏈接的時候會導致瀏覽器報錯(雖然功能正常),改進的方法是后期動態添加事件。HTML修改如下:
<a href=”/heero0w/creat/category/” id=”newCate” target=”_blank” tabindex=”-1″>增加新分類</a>
在頁面底部寫上添加事件的腳本:[code]var newCate = document.getElementById(”newCate”);
var createCategory = function(e) {
openaddcat(’/heero0w/creat/category/');
e = e || event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
return false;
};
if (newCate.addEventListener) {
newCate.addEventListener(”click”, createCategory, false);
} else if (newCate.attachEvent) {
newCate.attachEvent(”onclick”, createCategory);!
}[/code]