httpsでjQueryが動かないときの対処法【一発で解決】

どうも、スエヒロです。

 

httpでは動いていたjQueryが、httpsに変えた途端に動かなくなってしまったので、その対処法をシェアします。

 

httpでは動くjQuery

僕のポートフォリオサイトを例に解説していきます。

 

http(保護されていない通信)のときは、ご覧のように、ヘッダーにVegasというjQueryプラグインを使ったスライドが表示されていました。

 

httpsにすると動かなくなるjQuery

しかし、httpsに変えた途端にjQueryだけが動かなくなってしまいました。

 

 

検証ツールを開いたところ、jQueryがhttpsではブロックされているとのこと。

 

jQuery読み込みURLを変更する【対処法】

httpでjQueryが読み込まれない問題を解決するためには、<script>のjQuery読みこみURLを少し変更します。

 

元々、jQuery読み込みのURLはhttp

 

これのhttpの部分をhttps、もしくは無し(//~)にすれば解決します

 

httpのjQueryを読み込んだ場合は、httpのページのみでしか動作しません。

しかし、https, もしくは無し(//~)でjQueryを読み込めば、http, httpsどちらのページでもjQueryが動作します。

 

まとめ

httpsでjQueryが動作しないときの対処法について解説しました。

 

jQuery読み込みのURLは常に、httpsもしくは無し(//~)にするようにしておきましょう。