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

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など