Internet Explorer の "互換表示" を制御する。

さて、IE の「互換表示」。こんなのは使う人に弄らせるのではなくて、ブラウザが裏でこっそりと自動的にやるのがスマートだわなぁ…と思うのですが、まぁそれは良い。

JavaScriptでブラウザ別/バージョン別に処理を変えたい時などに、この「互換モード」が悪さをして、意図した振り分けが出来なかったりするので、その対処法をメモメモ。

一口に「互換モード」といっても、これがふたつの事柄を内包しているのでややこしい。

ひとつはブラウザモード。もうひとつはドキュメントモード。

ブラウザモード：
要は、外部に向けての "自称" が指定されます。
実際には自分は「Internet Explorer 9」であるにも関わらず、外に向けて「私は IE 8 です」とか「IE 7です」とか、身分を詐称する訳ですな。

JavaScript では、navigator.userAgent を参照すれば、そのブラウザが自称している名前とバージョンを知ることができます。

IE 8 / IE 9 で「互換表示」をオンにすると、

　　　Mozilla/4.0 (compatible; MSIE 7.0; .........

…というユーザエージェントが指定されているのが確認できる筈。

ドキュメントモード：
Internet Explorerの内部で、どのバージョンのIEの機能を使ってページをレンダリングするかを決定します。

JavaScript では、document.documentMode を参照することで、現在使われているレンダリングモードの種類を知ることができます。

「互換モード」オンの場合、たとえば

　　7

などという数字が返ってきます。

オフの場合は、

　　IE 9 ならば「9」、IE 8 ならば「8」

が返ります。

で、ブラウザの自称を、こちら側（ページ作成側）が弄ることはもちろん出来ないのだけれど、どのドキュメントモードで表示して貰いたいかを、こちら側から強制することは出来る。

例えば、
閲覧者が IE の互換表示をオンにしている。でも作成者は、このページを最新のモード(IE 8であれば IE 8 の最新機能を使って、IE 9 であれば IE 9 の以下同文)で表示させたい。
なんて時は、ページの header 部分に
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
という metaタグを書いておけば良いのです。

他にも、DOCTYPE宣言 だとか、httpヘッダをカスタマイズすることでも色々出来るみたいですが、ひとまずそれは割愛。

で、JavaScript では、
  • スクリプトを走らせるページに上記 metaタグ を設定した上で、
  • IE からのアクセスであるかどうかをユーザエージェント( navigtor.userAgent )から判定して、
  • もし IE からであれば、ユーザエージェントのバージョン番号ではなく、ドキュメントモード( document.documentMode )の値を参照する。
…ということにしておけば、ページ閲覧者が「互換モード」で IE を使用していても、IEの "自称バージョン番号" に惑わされる事無く、正しく IE の "ほんとのバージョン" を取得できるわけですな。


互換表示 / ブラウザモード / ドキュメントモード に関しては、MicroSoft の解説文書、

　　→ Internet Explorer 9｜旧バージョンの IE との互換性と検証のポイント（PDF直リンク注意）

が判りやすい。

カテゴリ:

タグ: