由於公司需要,小菜最近在搞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中文網其他相關文章!