HTML の a タグの href 属性について知っている人が少ない落とし穴

会社のニーズにより、Xiaocai は現在、iOS と Android の 2 つのバージョンしかありませんが、デフォルトのブラウザ カーネルは Android であるため、ブラウザの互換性の問題を考慮する必要があります。とiosは異なります。

まず互換性の問題について話しましょう。次のような URL があるとします。

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

この URL の後ろに name パラメータがありますが、実際にはパラメータの値にスペースが含まれています。このようなリンクは Android ブラウザで直接アクセスできますが、問題はありません。 iOS ブラウザでアクセスすると、URL が間違っているため、エラーが報告されます。

したがって、encodeURIComponent()メソッドを使用してnameパラメータの値をエンコードし、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>

openURLを呼び出してパラメータを渡すときに、"evil"のhref属性が自動的にデコードされるのに対し、onclick属性はパラメータを保持していることがわかります。無傷。

したがって、Xiaocai は、js を呼び出すために a タグの href 属性を使用することを強くお勧めしません。onclick メソッドは非常に科学的で、非常に安定しており、非常に正確です。href の本来の目的は URL にジャンプすることです。 js の実行には使用しないでください。実際、より良いアプローチはイベントをバインドすることです。これにより、コードが管理しやすくなり、見た目もすっきりします。

以上がHTML の a タグの href 属性について知っている人が少ない落とし穴の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。