href的那些事

rose 發布于2019-08-01 15:30 / 3146人閱讀

摘要：看個問題此時的值是什么呢帶著這樣的疑問，開始今天的話題的那些事。問題分析為什么會有這個問題呢上周在項目中，會對頁面標簽綁定些事件，會用到內容。總結寫在最后，對于的事情還不完整，歡迎補充補充。

看個問題test,此時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內容不僅僅只能是表現成鏈接，還有很多種用法。

錨點

頭部

這種方式經常用于定位。相信很多人都知道這種用法。

script

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

郵件

發郵件給我

tel電話

打電話給我

sms信息

發信息給我

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

下載文件

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

最近有個需求，考慮通過前端來下載表格數據。
利用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/

GPU云服務器云服務器云服務器那些事那些奇怪的錯誤云計算的股票有那些不備案的網站有那些

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49948.html

瀏覽器端下載那些事

摘要：三瀏覽器方式相信大家對這個對象也不太陌生，它是標準里的一個二進制數據對象，可以與對象配合，進行文件的下載。其實這樣一個簡單的，就可以實現瀏覽器端自己的下載了。一、背景最近寫了一個react的組件，用來做文件導出。環境是ie10+。細一點說，就是 1、讀取form里的數據 2、向服務端發請求，并下載文件；要求拿到請求狀態，如果出錯及時反饋給用戶。第一個需求，我們借用了jquer...

3fuyu 2019-08-19 18:18 評論0 收藏0
關于HTML的那些事

摘要：標準模式的排版和運作模式都是以該瀏覽器支持的最高標準運行。搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重，有利于使閱讀源代碼的人更容易將網站分塊，便于閱讀，維護和理解。 HTML基礎知識 meta標簽 doctyp...

Zachary 2019-08-02 14:22 評論0 收藏0
cookie和session那些事

摘要：服務器生成的用以標識客戶信息的一般被稱為而通過一些手段獲取其它用戶的攻擊就叫劫持設置一個搞掂了 cookie history cookie最初是由網景公司開發的,現在所有主要的瀏覽器都支持它. type cookie分為兩種:會話cookie和持久cookie. 會話cookie是一種臨時的cookie,它記錄用戶的訪問站點的設置偏好.用戶在退出瀏覽器就會被刪除. 持久cookie是存...

xiaoxiaozi 2019-08-20 17:29 評論0 收藏0
cookie和session那些事

摘要：服務器生成的用以標識客戶信息的一般被稱為而通過一些手段獲取其它用戶的攻擊就叫劫持設置一個搞掂了 cookie history cookie最初是由網景公司開發的,現在所有主要的瀏覽器都支持它. type cookie分為兩種:會話cookie和持久cookie. 會話cookie是一種臨時的cookie,它記錄用戶的訪問站點的設置偏好.用戶在退出瀏覽器就會被刪除. 持久cookie是存...

hedzr 2019-08-01 17:01 評論0 收藏0
聊聊BOM的那些事

摘要：如果省略該參數，取默認值該方法的返回值是一個正整數，表示定時器的編號。 BOM BOM的全稱是Browser Object Model，被譯為瀏覽器對象模型BOM提供了獨立于HTML頁面內容，而與瀏覽器相關的一系列對象，主要被用于管理瀏覽器窗口及與瀏覽器窗口之間通信等功能BOM由一系列對象構成，這些對象可以簡單理解為是由各個瀏覽器所提供的 Window對象 BOM中最核心的對象就是Wi...

widuu 2019-08-23 11:48 評論0 收藏0