html中a標籤href屬性的一個坑

標籤：android   style   blog   http   color   io   os   使用   java   

     由於公司需要，小菜最近在搞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中，依然報錯，的確是編碼了，為什麼還是不行呢？

     請看如下代碼：

 1 <a href="javascript:openURL(‘http://www.kpdown.com/search?name=Ben%20Nadel‘);">測試href</a> 2 <a href="javascript:;" onclick="javascript:openURL(‘http://www.kpdown.com/search?name=Ben%20Nadel‘);">測試onclick</a> 3  4 <script> 5   function openURL(url){ 6     /* 7     * 測試href --print--> http://www.kpdown.com/search?name=Ben Nadel 8     * 測試onclick --print--> http://www.kpdown.com/search?name=Ben%20Nadel 9     */10     console.log(url);11   }12 </script>

 

     由此可見：“萬惡”的href屬性，在調用openURL傳參時自動解碼，而onclick屬性則保持參數原封不動。

     因此，小菜強烈不推薦使用a標籤的href屬性調用js，onclick方法非常的科學，非常的穩定，非常的正確，href的本意就是用來跳轉URL，就不要用它來執行js啦。其實更好的做法是綁定事件，那樣代碼更好管理，看起來也整潔。

     本文所講貌似是很小的一件事，但如果沒有意識到是href的問題，就得浪費大量不必要的時間，希望讀者能夠有所借鑒~~~

 

html中a標籤href屬性的一個坑