2009/08/06

到底是 <a href="#" onClick="..."> 還是 <a href="javascript: ...">


常在網頁看到這樣的 HTML ︰ <a href="#" onclick="handler()" >Link</a> 。
也就是點下連結不會連往另外一頁,而是跑去執行名叫 handler 的 JavaScript 函式。
但是寫 href="#" 會有兩個後遺症︰
  1. 網址列的最後面會多一個 # 。
  2. 網頁的捲軸會移到最上面。
可以用以下方式代替,解決上述問題 :

<a href="javascript: return false;" onclick="handler()">

或是更簡單的格式 :

<a href="javascript: handler(); return false;">



/////////////////// 瀏覽器的差異 ///////////////////

還有一個問題,就是回到上頁,常常看到這種寫法 :
<a href="#" onclick="history.back()">

這種寫法的執行結果,在 Firefox 和 IE 完全不同

IE 會如 "預期" 跳回剛才瀏覽的上一頁
但是 Firefox 卻還是停留在原本這頁,這是怎麼回事呢?

經過測試發現,原來這是 firefox 對 <a href="#"> 這個連結動作,也把他當成是瀏覽記錄的一部分了

所以 <a href="#" onclick="history.back()"> 對 firefox 來說,就是執行兩個動作:
  1. 先跳到網頁的最上方 (這算一個瀏覽紀錄)
  2. history.back() 回到上一個瀏覽記錄,也就是 href="#" ....... (無言)
而 IE 的作法就不同,當 href="#", onclick="history.back() 兩個東西寫在一起的時候
他不把 <a href="#"> 這個連結動作當成是歷史紀錄,但還是會執行它,所以 IE 的動作就如下:
  1. 先跳到網頁的最上方
  2. history.back() 回到上一個瀏覽頁面
可以用以下的程式,分別在 IE (版本7) 和 firefox (3.5) 底下跑看看,結果有什麼不同

<div><a href="#anchor" onclick="javascript: history.go(-1)">回上頁</a></div>
<div><a href="javascript: return false;" onclick="javascript: history.go(-1)">回上頁</a></div>
<div><a href="javascript: history.go(-1)">回上頁</a></div>

/////////////////// 結論 ///////////////////

如果要把回上頁的功能,寫在 <a> 標籤內
或者說,如果想在 <a> 標籤內加上 javascript
建議用 <a href="javascript: xxxx "> 這種格式


參考網址 : Vexed's Blog

沒有留言:

張貼留言