html中對(duì)于a標(biāo)簽href屬性中的一個(gè)很少人知道的坑

先說(shuō)說(shuō)兼容性問(wèn)題是什么。假如有這樣一個(gè)URL：

          http://www.kpdown.com/search?name=Ben Nadel

此URL后邊有一個(gè)name參數(shù)，只不過(guò)參數(shù)的值竟然帶了空格，這樣的鏈接，直接用android瀏覽器訪問(wèn)，是沒(méi)有問(wèn)題的，但用ios的瀏覽器訪問(wèn)，這就是一個(gè)錯(cuò)誤的URL，會(huì)報(bào)錯(cuò)的！

所以，我們會(huì)想到編碼，name參數(shù)的值，可以用encodeURIComponent()方法進(jìn)行編碼，然后再拼接到URL上，這樣就安全了（encodeURIComponent是js原生方法，直接用即可）。

然后，我們可以這樣利用超鏈接：

           <a href="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');" >查詢</a>

利用openURL這個(gè)js方法進(jìn)行頁(yè)面跳轉(zhuǎn)（假設(shè)有一個(gè)openURL方法，其中不涉及任何解碼操作）。

這段代碼在android中運(yùn)行正常，但到了ios中，依然報(bào)錯(cuò)，的確是編碼了，為什么還是不行呢？

請(qǐng)看如下代碼：

<a href="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');">測(cè)試href</a>
<a href="javascript:;" onclick="javascript:openURL('http://www.kpdown.com/search?name=Ben%20Nadel');">測(cè)試onclick</a>

<script>
  function openURL(url){
    /*
    * 測(cè)試href --print--> http://www.kpdown.com/search?name=Ben Nadel
    * 測(cè)試onclick --print--> http://www.kpdown.com/search?name=Ben%20Nadel
    */
    console.log(url);
  }
</script>

由此可見(jiàn)：“萬(wàn)惡”的href屬性，在調(diào)用openURL傳參時(shí)自動(dòng)解碼，而onclick屬性則保持參數(shù)原封不動(dòng)。

因此，小菜強(qiáng)烈不推薦使用a標(biāo)簽的href屬性調(diào)用js，onclick方法非常的科學(xué)，非常的穩(wěn)定，非常的正確，href的本意就是用來(lái)跳轉(zhuǎn)URL，就不要用它來(lái)執(zhí)行js啦。其實(shí)更好的做法是綁定事件，那樣代碼更好管理，看起來(lái)也整潔。

以上就是html中關(guān)于a標(biāo)簽href屬性中的一個(gè)很少人知道的坑的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！