読者です 読者をやめる 読者になる 読者になる

ほげほげ(仮)

仮死状態

Chromeでローカルファイルをiframeで表示したときの注意

JavaScript


ローカルファイルのHTMLをiframeで表示したとき、Chromeだけ挙動が違ったので、書いておきます


次のようなファイルが同一ディレクトリにある場合

・Test.html

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
    var i = document.getElementsByTagName('iframe')[0];
    if(i.contentDocument) {
        alert(i.contentWindow.document.getElementsByTagName('body')[0].innerHTML);
    } else {
        alert('取得できない');
    }
}
</script>
</head>
<body>
    <input type="button" value="TEST" onclick="test()">
    <iframe src="dummy.html">
</body>
</html>


・dummy.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
IFRAME
</body>
</html>


これをローカルファイルとしてブラウザから起動して試してみます
(アドレスバーがfile://〜)

Chrome
f:id:STAR_ZERO:20100710214442p:image


Firefox
f:id:STAR_ZERO:20100710214443p:image


Safari
f:id:STAR_ZERO:20100710214444p:image


Opera
f:id:STAR_ZERO:20100710214445p:image


・IE8
f:id:STAR_ZERO:20100710214446p:image


結果としてはChromeだけiframe内の値を取得できませんでした


どうやらChromeはローカルファイルは別ドメインと判定するようです


いつもChromeでローカルファイルのJavaScriptを試しているので、ドはまりしました


ちなみにコレをApacheサーバーで実行したらChromeも問題なく動きました


ローカルファイルをChromeでテストするときは要注意ですね


もしかしたら既出のことかもしれませんが、オレのメモということで