日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年4月27日日曜日

noscriptタグのinnerHTMLは他タグのinnerHTMLと異なる!!(Firefox/IE/Chrome比較)

以前、「<noscript>タグの innerHTML とほかのタグの innerHTML では取得結果が異なることに気が付きました」という内容でChromeにおける実行結果を示しました。

Chrome:noscriptタグのinnerHTMLは他タグのinnerHTMLと異なる!!


ではChromeではなく、他のブラウザではどうなんだろうということで、IEとFirefoxでも動作を検証してみました。



検証環境

OS : Windows 7 Professional 64bit

Firefox : バージョン : 22.0
IE : バージョン : 11.0.9600.16659
Chrome : バージョン 34.0.1847.116 m


検証用コード

<noscript>タグ、<div>タグそれぞれの内部に以下の内容を記載しています。

<b>本来表示したい内容</b><br />

&lt;b&gt;本来表示したい内容&lt;/b&gt<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 />
&lt;b&gt;本来表示したい内容&lt;/b&gt<br />
<img src="test.png" alt="test image" width="100" height="100" /><br />

</noscript>

<div id="id_div">

<b>本来表示したい内容</b><br />
&lt;b&gt;本来表示したい内容&lt;/b&gt<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 />

&lt;b&gt;本来表示したい内容&lt;/b&gt<br />

<img src="test.png" alt="test image" width="100" height="100" /><br />





textContent





<b>本来表示したい内容</b><br />

&lt;b&gt;本来表示したい内容&lt;/b&gt<br />

<img src="test.png" alt="test image" width="100" height="100" /><br />





div

innerHTML





<b>本来表示したい内容</b><br>

&lt;b&gt;本来表示したい内容&lt;/b&gt;<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





&lt;b&gt;本来表示したい内容&lt;/b&gt;&lt;br /&gt;

&amp;lt;b&amp;gt;本来表示したい内容&amp;lt;/b&amp;gt&lt;br /&gt;

&lt;img src="test.png" alt="test image" width="100" height="100" /&gt;&lt;br /&gt;





innerText

 <b>本来表示したい内容</b><br /> &lt;b&gt;本来表示したい内容&lt;/b&gt<br /> <img src="test.png" alt="test image" width="100" height="100" /><br />

div

innerHTML





<b>本来表示したい内容</b><br>

&lt;b&gt;本来表示したい内容&lt;/b&gt;<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

&lt;b&gt;本来表示したい内容&lt;/b&gt;&lt;br /&gt; &amp;lt;b&amp;gt;本来表示したい内容&amp;lt;/b&amp;gt&lt;br /&gt; &lt;img src="test.png" alt="test image" width="100" height="100" /&gt;&lt;br /&gt; noscript_inner.html:29
<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:32
<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:37
本来表示したい内容 <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/






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...