ネットサービスの開発に役立ちそうな話題を中心にお届けします。
F.Ko-Jiの「一秒後は未来」 > Javascript

サブカテゴリー: jQuery

2012年01月10日 14:33

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

2011年08月20日 18:39

FacebookコメントプラグインのアクションもGoogle Analyticsで集計してみよう

2011年07月06日 11:13

new google.maps.infoWindow()は当然undefinedである

2011年04月26日 14:49

enchant.jsゲーム対決 第2弾 いいね!が多いほうが勝ち!

2011年04月21日 14:27

enchant.jsでつくったゲーム対決 @taguchi vs @fkoji いいね!が多いほうが勝ち!

2011年04月20日 16:18

enchant.jsで「クマたたきゲーム」をつくってみたよ

2011年03月09日 01:59

jQueryで動的に作ったradioボタンがIE6とIE7で動作しない場合の対処

2011年02月22日 09:36

JavaScriptの構文エラーやコーディング規約上の問題をチェックしてくれる「JSHint」が便利そう

2011年02月14日 13:17

JavaScriptでtextareaにフォーカスした際にカーソルが先頭に来てしまう場合の対処

2010年12月26日 15:10

URLの一覧からツイート数を取得するツールをつくってみました

2010年08月23日 00:05

Seleniumでif文的なテストをstoreEvalを使って書いてみる

2010年08月05日 13:12

ページを移動する前にJavaScriptで確認ダイアログを表示する

2010年05月30日 14:39

jQueryとTopsy APIを使ってそのページを言及したツイートを表示するスクリプトを作った

2010年04月15日 17:39

TwifluにTwitterの @anywhere を設置してHovercardsを表示できるようにした

2009年09月04日 15:54

Gadget Party裏話「ブログパーツのJSONPを静的ファイル化して負荷に耐える」

2009年07月04日 18:24

Firefox 3.5の位置情報通知機能の仕組みとサンプル

2009年07月01日 22:57

Google Maps APIで地図画像が読み込まれていないブロックの色を指定する

2009年04月23日 12:38

Google Analytics APIのJavaScriptライブラリを使ってみた(データ取得編)

2009年04月22日 19:06

Google Analytics APIのJavaScriptライブラリを使ってみた(準備/認証編)

2009年01月14日 21:36

GoogleがホスティングしてるjQueryなどのJavaScriptライブラリを使う方法