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

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

2014年4月27日日曜日

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

<noscript>タグの中身を取得する JavaScript を書いていて気が付いたことです。

<noscript>タグの innerHTMLほかのタグの innerHTML では取得結果が異なることに気が付きました。




検証コード

<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 で取得して、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);



     console.log("innerText");

     console.log(document.getElementById("id_noscript").innerText);



     console.log("div");



     console.log("innerHTML");

     console.log(document.getElementById("id_div").innerHTML);



     console.log("innerText");

     console.log(document.getElementById("id_div").innerText);



//-->

</script>





</body>

</html>


実行結果

コンソール出力

console.log() で出力した Chrome の JavaScript コンソールの内容です。

&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>タグの中身から<>に囲まれた部分を削除し、&でエスケープされた文字をアンエスケープした内容が取得された。


<noscript>の中身を JavaScript で取得するようなコードを書くことはあまりないとは思いますが、このような動作をするということは頭に置いておいた方がよさそうです。


この比較をFirefox/IE/Chrome間で行ってみました。





関連記事

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

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