DQNEO日記

今日も明日も上昇気流

いい加減、<script src="http://..　と書くのはやめましょう

外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 
<script src="http://example.com/js/jquery.js"></script>

理由

あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。



ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。
上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。

結論

JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省略して"//example.com"と書きましょう。
<script src="//example.com/js/jquery.js"></script>
こうすれば、HTTPのときはhttp, HTTPSのときはhttps、という具合に自動で切り替わってくれるので大変便利です。

このテクニックは知ってる人には当たり前のことですが、意外と知らない人が多いのはないでしょうか。
たぶんこのテクニックに名前がついてないのが原因かなと思います。誰かよい命名をしてくれたらいいですね :)

補足１

「相対パスで書け」というご指摘をいただいたので補足。

当たり前ですが、自サイトのJSファイルを読み込むときは相対パスで書けばよいです。 
<script src="/js/hoge.js"></script>
私の主張は、"http:"のようなプロトコルを書く場合は省略できるし省略しようということです。
(舌足らずで誤解を招いてしまいすみませんでした。)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Google公式サイト(Google Hosted Libraries - Developer's Guide)でもこの書き方が提示されています。

補足２



ご教授ありがとうございます！！
カテゴリ: JavaScript