IE9 iframeを用いたサイトのドキュメントモード

| コメントをどうぞ

IE9においてiframeを用いたサイトを構築する場合、フレーム内のドキュメントモードに注意する必要があります

iframe Handling (英語)によると、IE9 では、iframe 内のドキュメント モードはトップ レベルの Web ページのドキュメント モードで決まります。トップ レベルの Web ページが IE9 標準モードでない場合、iframe内のサブドキュメントはどのような指定をしても IE9の標準モードではレンダリングできません。

例えば以下の様なコンテンツを作成したとします。

■ index.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>

<!-- ドキュメントモードにIE8標準モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=8">

<title>index</title>
<script type="text/javascript">
window.onload = function(){
var mode = document.documentMode;
document.body.innerHTML = "Document mode: " + mode;
};
</script>
</head>

<body>
<iframe id="ifrm" src="contents.html" />
</body>
</html>

■ contents.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>

<!-- ドキュメントモードにIE9標準モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>contents</title>
<script type="text/javascript">
window.onload = function(){
var mode = document.documentMode;
document.body.innerHTML = "Document mode: " + mode;
}
</script>
</head>

<body>
</body>
</html>

上記の例ではindex.html内にiframeを配置し、その中にcontents.htmlを表示するような指定となっています。contents.htmlはmetaタグの指定によりIE9標準モードでのレンダリングを行うよう指定していますが、トップレベルであるindex.htmlはmetaタグの指定によりIE8標準モードでのレンダリングとなっています。このような状態でindex.htmlをIE9で表示すると、contetns.htmlはmetaタグの指定に関わらず、IE8標準モードでレンダリングされることになります。

このようにiframe内のコンテンツがコンテンツ制作者の意図しないドキュメントモードでレンダリングされないようにするため、サイト内にiframeを用いる場合はトップレベルのドキュメントモードをIE9標準モードとする必要があります。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>