ローカルやデモ環境で問題なく動作確認したファイルを本番環境にアップしたら、javascriptが動かない…こんな経験ないでしょうか？
その本番環境が「https（SSL）」で通信している場合は、スクリプトの記述方法に原因があるかもしれません。今回は、https通信下でjavascriptが動かなくなった場合の原因と対応方法を紹介します。
https通信下でjavascriptが動かない原因
「https」によるSSL暗号通信下では、安全のため「http」通信の読み込みをブロックすることがあります。つまり、Webページ内で「http」通信をしていると上手く動作しないということです。
https通信下でjavascriptが動かなくなる時の原因のほとんどは、jQueryをGoogleなどのCDNから呼び出している場合だと思います。
<script src="http://ajax.
googleapis.com/ajax/libs/jquery/
1.9.1/jquery.min.js"></script>ヘッダなどにこのような記述がされていないでしょうか。
https通信下でjQueryを動かす方法
解決方法は3つあります。
1つ目は、jQuery本体をダウンロードして自分のサーバーで動かす方法。CDNを使う必要性が特にない場合は、この方法でいいと思います。
2つ目は、URLをhttpsに変更する方法。
<script src="https://ajax.
googleapis.com/ajax/libs/jquery/
1.9.1/jquery.min.js"></script>3つ目は、プロトコルを指定しない方法。
<script src="//ajax.
googleapis.com/ajax/libs/jquery/
1.9.1/jquery.min.js"></script>どのやり方でも大丈夫ですが、3つ目の方法が一番汎用性が高いのでおすすめです。この記述方法はjavascriptに限らず、CSSや画像のパスの指定にも使えるので、覚えておくと便利です。
ただし、プロトコルを指定しないとローカル環境で動かない場合もあるのでご注意。
近年はSSL対応の有無がSEO対策にもつながることもあり、採用しているWebページもどんどん増えていますね。もし、SSLに移行して動作がおかしくなった場合は、どこかでhttp通信をしていないか確認してみましょう。
Related Posts
