Chrome:noscriptタグのinnerHTMLは他タグのinnerHTMLと異なる!!
ではChromeではなく、他のブラウザではどうなんだろうということで、IEとFirefoxでも動作を検証してみました。
検証環境
OS : Windows 7 Professional 64bitFirefox : バージョン : 22.0
IE : バージョン : 11.0.9600.16659
Chrome : バージョン 34.0.1847.116 m
検証用コード
<noscript>タグ、<div>タグそれぞれの内部に以下の内容を記載しています。
<b>本来表示したい内容</b><br /> <b>本来表示したい内容</b><br /> <img src="test.png" alt="test image" width="100" height="100" /><br />
その内容を JavaScript を使用して、innerHTML と innerText(FirefoxはtextContent(*1)) で取得して、console.log()でログ出力しています。
<html>
<head>
<title>test page</title>
</head>
<body>
<h1>TEST.</h1>
<noscript id="id_noscript">
<b>本来表示したい内容</b><br />
<b>本来表示したい内容</b><br />
<img src="test.png" alt="test image" width="100" height="100" /><br />
</noscript>
<div id="id_div">
<b>本来表示したい内容</b><br />
<b>本来表示したい内容</b><br />
<img src="test.png" alt="test image" width="100" height="100" /><br />
</div>
<script type="text/javascript">
<!--
console.log("noscript");
console.log("innerHTML");
console.log(document.getElementById("id_noscript").innerHTML);
if (document.getElementById("id_noscript").innerText !== void 0) {
console.log("innerText");
console.log(document.getElementById("id_noscript").innerText);
} else {
console.log("textContent");
console.log(document.getElementById("id_noscript").textContent);
}
console.log("div");
console.log("innerHTML");
console.log(document.getElementById("id_div").innerHTML);
if (document.getElementById("id_div").innerText !== void 0) {
console.log("innerText");
console.log(document.getElementById("id_div").innerText);
} else {
console.log("textContent");
console.log(document.getElementById("id_div").textContent);
}
//-->
</script>
</body>
</html>
実行結果
console.log() で出力した Chrome の JavaScript コンソールの内容です。Firefox
noscript innerHTML <b>本来表示したい内容</b><br /> <b>本来表示したい内容</b><br /> <img src="test.png" alt="test image" width="100" height="100" /><br /> textContent <b>本来表示したい内容</b><br /> <b>本来表示したい内容</b><br /> <img src="test.png" alt="test image" width="100" height="100" /><br /> div innerHTML <b>本来表示したい内容</b><br> <b>本来表示したい内容</b><br> <img src="test.png" alt="test image" height="100" width="100"><br> textContent 本来表示したい内容 <b>本来表示したい内容</b>
<noscript>タグ
innerHTML : <noscript>タグの中身がそのまま取得された。
innerText : <noscript>タグの中身がそのまま取得された。
<div>タグ
innerHTML : <div>タグの中身がそのまま取得された。
innerText : <div>タグの中身から<>に囲まれた部分を削除し、&でエスケープされた文字をアンエスケープした内容が取得された。
IE
noscript innerHTML <b>本来表示したい内容</b><br /> &lt;b&gt;本来表示したい内容&lt;/b&gt<br /> <img src="test.png" alt="test image" width="100" height="100" /><br /> innerText <b>本来表示したい内容</b><br /> <b>本来表示したい内容</b><br /> <img src="test.png" alt="test image" width="100" height="100" /><br /> div innerHTML <b>本来表示したい内容</b><br> <b>本来表示したい内容</b><br> <img width="100" height="100" alt="test image" src="test.png"><br> innerText 本来表示したい内容 <b>本来表示したい内容</b>
<noscript>タグ
innerHTML : <noscript>タグの中身を&でエスケープした内容が取得された。
innerText : <noscript>タグの中身がそのまま取得された。
<div>タグ
innerHTML : <div>タグの中身がそのまま取得された。
innerText : <div>タグの中身から<>に囲まれた部分を削除し、&でエスケープされた文字をアンエスケープした内容が取得された。
Chrome
noscript noscript_inner.html:26
innerHTML noscript_inner.html:28
<b>本来表示したい内容</b><br />
&lt;b&gt;本来表示したい内容&lt;/b&gt<br />
<img src="test.png" alt="test image" width="100" height="100" /><br />
noscript_inner.html:29
innerText noscript_inner.html:31
<b>本来表示したい内容</b><br />
<b>本来表示したい内容</b><br />
<img src="test.png" alt="test image" width="100" height="100" /><br />
noscript_inner.html:32
innerHTML noscript_inner.html:36
<b>本来表示したい内容</b><br>
<b>本来表示したい内容</b><br>
<img src="test.png" alt="test image" width="100" height="100"><br>
noscript_inner.html:37
innerText noscript_inner.html:39
本来表示したい内容
<b>本来表示したい内容</b>
noscript_inner.html:40
<noscript>タグ
innerHTML : <noscript>タグの中身を&でエスケープした内容が取得された。
innerText : <noscript>タグの中身がそのまま取得された。
<div>タグ
innerHTML : <div>タグの中身がそのまま取得された。
innerText : <div>タグの中身から<>に囲まれた部分を削除し、&でエスケープされた文字をアンエスケープした内容が取得された。
比較検証
chrome, IE, Firefox の結果を比較すると、完全に動作が異なる点を発見しました。
<noscript>タグのinnerHTMLです。
IEとChromeでは、<noscript>タグの中身を&でエスケープした内容が取得されたのに対し、Firefoxでは、<noscript>タグの中身がそのまま取得されました。
他の部分には主立った違いは見出せませんでした。
diff Firefox - IE - Chrome
まとめ
<noscript>タグのinnerHTMLは、IE・ChromeとFirefoxでは取得された結果が異なりました。もし<noscript>タグのinnerHTMLを取得する機会があればこの違いは考慮しなければなりません。
参考文献
*1:FireFoxではinnerTextが使えないらしい | Seven Words
http://seven-words.info/2013/01/19/227/
コメントを投稿
コメント投稿機能について