ネットサービスとかGoogleとか豆知識とか。

Index > Javascript > JavaScriptやCSSをURLで読み込む際の「http:」は省略できる
Javascript
2012年01月10日 14:33

JavaScriptやCSSをURLで読み込む際の「http:」は省略できる

  • このエントリーをはてなブックマークに追加
  • ... PV
スポンサード リンク

JavaScriptやCSSで外部ファイルをURLで読み込む時に書く「src="http://..."」や「href="http://..."」の「http:」の部分は省略できるらしいです。

Twitterのツイートボタン用の貼付けコードの JavaScript の書き方が以下のように変わっていて気づきました。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}
}(document,"script","twitter-wjs");</script>

↑ この「js.src="//platform.twitter.com/widgets.js";」のところ。

プロトコルの「http:」の部分が省略され、「//」から始まっています。

これは、ツイートボタンを設置するサイトが http のサイトなら http:// で、https のサイトなら https:// でスクリプトが自動的に読み込まれるようにするための書き方だそうです。

FacebookプラグインのJavaScriptも、確認するとそうなっていました。

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=(省略)";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Google AnalyticsのコードはSSLかそうでないかでサブドメインまで変わるため、プロトコルまで指定されています。

 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

ちなみにローカルファイルを「file:///」で開いたページで、「//」始まりのJavaScriptが指定されていると、「file://...」のURLでJavaScriptを読み込もうとするのでエラーになります。注意しておきましょう。

また、未確認ですがStack Overflowによると、IE7とIE8でこの書き方をしてCSSを読み込もうとした場合2回リクエストされるという問題があるそうです。

【参考】
» SSLページでブラウザにセキュリティ警告メッセージを出させないコツ « DRYOUT プログラマー社員のブログ
» javascript - Is it valid to replace http:// with // in a <script src="http://...">? - Stack Overflow
» 5a Missing schema double download | High Performance Web Sites