HTTPSだとURLが#のハイパーリンクでJavaScriptが実行されない問題の対処

問題が起きた環境

HTML

<a href="#" id="hoge">POSTするリンク</a>
<form action="wafoo" method="post" id="fuga">
  <input type="hidden" name="foo" value="bar" />
</form>

JavaScript

$("#hoge").click(function(){
  $("#fuga").submit();
});

期待する動作

ハイパーリンクのクリックでhiddenフィールドがPOSTされる

発生している問題

httpで表示させた状態

POSTされる(POSTリクエストが発生する)

httpsで表示させた場合

POSTされず、httpに切り替わる(GETリクエストが発生する)

原因

httpsで表示した際、ブラウザが自動的にハイパーリンクのURLを書き換え、そのURLに対するGETリクエストが実行されてしまう為。

href=”#” → href=”http://ドメイン/#”

対処方法

ハイパーリンクの動作を無効にする

方法1

JavaScriptの処理の最後にreturn false;を追加

方法2

hrefの”#”を”javascript:void(0);”に変更

 

タイトルとURLをコピーしました