首頁  >  文章  >  web前端  >  html中關於a標籤href屬性中的一個很少人知道的坑

html中關於a標籤href屬性中的一個很少人知道的坑

黄舟
黄舟原創
2017-07-27 13:39:422110瀏覽

     由於公司需要,小菜最近在搞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(&#39;http://www.kpdown.com/search?name=Ben%20Nadel&#39;);" >查询</a>

     利用openURL這個js方法進行頁面跳躍(假設有一個openURL方法,其中不涉及任何解碼操作)。

     這段程式碼在android運作正常,但到了ios中,依然報錯,的確是編碼了,為什麼還是不行?

     請看以下程式碼:

<a href="javascript:openURL(&#39;http://www.kpdown.com/search?name=Ben%20Nadel&#39;);">测试href</a>
<a href="javascript:;" onclick="javascript:openURL(&#39;http://www.kpdown.com/search?name=Ben%20Nadel&#39;);">测试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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn