F.Ko-Jiの「一秒後は未来」

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

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

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