程式狂想筆記

一個攻城師奮鬥史

0%

超連結href=#和href=javascript:void(0)差別 & href和src不一樣的地方

之前很常看到網頁做不做跳頁超連結都用href="#"
也有看過更早的程式用javascript:void(0);
但也沒有深入這兩個的差別
當然知道#有錨點功能,但說真的也不知道這樣用會有什麼缺點
神奇的 html 錨點,讓你的網頁在內部自由的跳轉 - 每日頭條
之前有看過一篇在 Angular 套版時應注意多層次選單超連結的使用 | The Will Will Web
今天就小記一下,不然怕之忘了很難找

href,javascript:void(0),javascript:;

我們一般比較常見的寫法有幾種:

  • 直接使用 # 當作超連結
    這種技巧對於靜態版型還可行,許多網頁設計師也很習慣這樣寫,但是當使用者點擊連結後,卻會在目前網址後方加上一個 # 符號。一來,我個人相當不喜歡這種作法,因為網址會發生改變;二來,這種寫法會讓 SPA (單一頁面應用程式) 的路由發生異常,所以應該避免。
  • 使用特殊的 javascript:void(0) 當作超連結
    這種寫法通常是前端工程師以及對 UX 特別要求的設計師愛用,原因無他,就是網址列不會出現怪怪的 # 符號。這種寫法同時也對 SPA 網頁應用程式相當友善,所以推薦使用。但唯一的缺點,就是比 # 多打太多字了!
  • 使用特殊的 javascript:; 當作超連結
    這種寫法跟 javascript:void(0) 如出一轍,但硬是少打了 6 個字元,如果學會他,你這輩子可能有機會打超過 1000 次這種連結,就可以少打 6000 個按鍵,不無小補啦。

以上來自:在 Angular 套版時應注意多層次選單超連結的使用 | The Will Will Web

src href

這之前也有看過類似文章
但今天忘了,剛好又看到有人討論這個問題
當出學 HTML 也是用記得,沒有想到這個問題

六角學院 - 學員社團
html - Difference between SRC and HREF - Stack Overflow

另外依據文內資訊,在載入頁面時,此兩者個運作行為會有差別。
具體而言,瀏覽器會依據 html 的內容依序載入元素,由於 src 本身即為元素之一,因此瀏覽器會等 src 的內容完整抓取之後才繼續載入後續元素。然而 href 只是連結,瀏覽器並不會去載入 href 的任何內容。
這就是爲什麼 CSS 是用 href,但是 javascript 卻是用 src