37
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

jQuery2.X系の安心・安全な読み込み方法

Last updated at Posted at 2014-01-31

jQueryは2.X系からIE8以前のレガシーブラウザのサポートを廃止して高速化・軽量化を実現しました。
でもIEの旧バージョンを見捨てれなくて2.X系の利用に踏み切れれない事がよくありますね。
そんな時のために、安心・安全にjQuery2.X系を使用するたぶんベストな方法です。

※最近(2014/1/31現在)jQuery2.1と1.11のリリースがあったので、最新版を使っています。

<!--[if lt IE 9]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery-2.1.0.min.js"><\/script>')</script>
<!--<![endif]-->

条件付きコメントでIEのバージョン切り分け

条件付きコメントを使用して [if lt IE 9] でIE9未満のブラウザだけ読み込ませるといった切り分けをしています。

条件付きコメント - Wikipedia
http://ja.wikipedia.org/wiki/%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88

プロトコル省略でhttp、httpsどちらにも対応

スクリプトの読み込みは src="//ajax.googleapis.com/〜" のように、http、httpsのプロトコル表記を省略する事で、SSLでアクセス時のセキュリティ警告メッセージを回避します。

HTMLやCSSでのプロトコル表記(http:、https:)の省略について: 小粋空間
http://www.koikikukan.com/archives/2012/05/11-012345.php

フォールバックでGoogleのCDNがダウンした場合に備える

Google Hosted LibrariesのjQueryを利用する場合、万が一にGoogleのCDNが落ちた場合はローカルのjQueryを使うようにします。
window.jQuery || document.write('<script src="/js/jquery-2.1.0.min.js"><\/script>')

jQuery等CDNのダウンに備えたリスクヘッジ - Qiita [キータ]
http://qiita.com/kidachi_/items/5456589a799e5d787923

37
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?