html中對于a標簽href屬性中的一個很少人知道的坑
發表時間:2024-05-13 來源:明輝站整理相關軟件相關文章人氣:
[摘要]由于公司需要,小菜最近在搞app web開發,目前只有ios和android版本,雖然僅此兩個版本,但是依然要考慮瀏覽器兼容性問題,因為android和ios默認瀏覽器內核是不一樣的。 先說說兼容性問題是什么。假如有這樣一個URL: http://www.kpdown.c...
由于公司需要,小菜最近在搞app web開發,目前只有ios和android版本,雖然僅此兩個版本,但是依然要考慮瀏覽器兼容性問題,因為android和ios默認瀏覽器內核是不一樣的。
先說說兼容性問題是什么。假如有這樣一個URL:
http://www.kpdown.com/search?name=Ben Nadel
此URL后邊有一個name參數,只不過參數的值竟然帶了空格,這樣的鏈接,直接用android瀏覽器訪問,是沒有問題的,但用ios的瀏覽器訪問,這就是一個錯誤的URL,會報錯的!
所以,我們會想到編碼,name參數的值,可以用encodeURIComponent()方法進行編碼,然后再拼接到URL上,這樣就安全了(encodeURIComponent是js原生方法,直接用即可)。
然后,我們可以這樣利用超鏈接:
<a href="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');" >查詢</a>
利用openURL這個js方法進行頁面跳轉(假設有一個openURL方法,其中不涉及任何解碼操作)。
這段代碼在android中運行正常,但到了ios中,依然報錯,的確是編碼了,為什么還是不行呢?
請看如下代碼:
<a href="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');">測試href</a>
<a href="javascript:;" onclick="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');">測試onclick</a>
<script>
function openURL(url){
/*
* 測試href --print--> http://www.kpdown.com/search?name=Ben Nadel
* 測試onclick --print--> http://www.kpdown.com/search?name=Ben%20Nadel
*/
console.log(url);
}
</script>
由此可見:“萬惡”的href屬性,在調用openURL傳參時自動解碼,而onclick屬性則保持參數原封不動。
因此,小菜強烈不推薦使用a標簽的href屬性調用js,onclick方法非常的科學,非常的穩定,非常的正確,href的本意就是用來跳轉URL,就不要用它來執行js啦。其實更好的做法是綁定事件,那樣代碼更好管理,看起來也整潔。
以上就是html中關于a標簽href屬性中的一個很少人知道的坑的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。