href的那些事

看個問題<a href="">test</a>,此時href的值是什麼呢？帶着這樣的疑問，開始今天的話題‘href的那些事’。

問題分析

爲何會有這個問題呢？
上週在項目中，msui會對頁面a標籤綁定些事件，會用到href內容。href=""這麼寫，就會一直報錯。由於瀏覽器此時獲取到的href的值當前頁面絕對路徑。此時就會致使msui內部一直報錯。

href的定義

w3c的定義

The href attribute on a and area elements must have a value that is a valid URL potentially surrounded by spaces.
Note：The href attribute on a and area elements is not required; when those elements do not have href attributes they do not create hyperlinks.

翻譯過來大概的意思：

a和area標籤上的href屬性，必須是一個有效的RUI地址
a和area標籤不必定有href屬性，沒有href就不會觸發超連接的特色

RUL

w3c的定義

A string is a valid non-empty URL if it is a valid URL but it is not the empty string.
A string is a valid URL potentially surrounded by spaces if, after stripping leading and trailing whitespace from it, it is a valid URL.
A string is a valid non-empty URL potentially surrounded by spaces if, after stripping leading and trailing whitespace from it, it is a valid non-empty URL.

挺拗口的，翻譯不出來了！

能夠理解其中一點就是一個合法的URL不能爲空。看來這個URL能夠單獨作個專題學習了。

解決問題

從href和URL上的定義就能很好的解決最開始的問題了。href=""這種寫法是不合理的，瀏覽器自身會對此狀況作些兼容，默認是頁面的絕對地址了。

繼續深挖href

href內容不單單隻能是表現成連接，還有不少種用法。

錨點

<a href="#top">頭部</a>

這種方式常常用於定位。相信不少人都知道這種用法。

script

<a href="javascript:;"></a>

我相信不少頁面上有大量的這種代碼。用href來執行腳本。

郵件

<a href="mailto:838871837@qq.com">發郵件給我</a>

tel電話

<a href="tel:xxxxxx">打電話給我</a>

sms信息

<a href="sms:xxxxxx">發信息給我</a>

除此以外，還支持ftp,file等。

下載文件

最後還有個技巧就是利用href來下載文件，這個是html5新增的。

<a href="資源地址" download="下載的文件名"></a>

最近有個需求，考慮經過前端來下載表格數據。
利用href和download屬性。

這裏只要將URL表現成數據格式"data:text/csv;charset=utf-8,\ufeff"+表格數據。這個等完成以後，再寫個詳細點的教程。

總結

寫在最後，對於href的事情還不完整，歡迎補充補充。

原文地址http://xiaoqiang730730.github.io/2016/07/17/href%E9%82%A3%E4%BA%9B%E4%BA%8B/