A pitfall that few people know about the href attribute of the a tag in HTML

Due to company needs, Xiaocai has been engaged in app web development recently. Currently, there are only ios and android versions. Although there are only these two versions, browser compatibility issues still need to be considered, because the default browser kernels of android and ios are different. of.

Let’s first talk about the compatibility issue. Suppose there is such a URL:

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

There is a name parameter behind this URL, but the value of the parameter actually contains spaces. There is no problem in accessing such a link directly with the Android browser, but using ios When accessed by a browser, this is a wrong URL and an error will be reported!

Therefore, we will think of encoding. The value of the name parameter can be encoded using the encodeURIComponent() method, and then spliced ​​to the URL. This is safe (encodeURIComponent is a js native method, directly use That’s it).

Then, we can use hyperlinks like this:

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

Use the openURL js method to jump to the page (assuming there is an openURL method, which does not involve any decoding operation).

This code runs normally in android, but when it comes to ios, it still reports an error. It is indeed encoded. Why does it still not work?

Please look at the following code:

<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>

It can be seen that the #href attribute of "Wan Yu" is calling openURL It is automatically decoded when passing parameters, while the onclick attribute keeps the parameters intact. Therefore, Xiaocai strongly does not recommend using the href attribute of the a tag to call js. The onclick method is very scientific, very stable, and very correct. The original intention of href is to jump to the URL, so don’t Use it to execute js. In fact, a better approach is to bind events, so that the code is easier to manage and looks neat.

The above is the detailed content of A pitfall that few people know about the href attribute of the a tag in HTML. For more information, please follow other related articles on the PHP Chinese website!