html コードとその結果を iframe に onload で表示するときの javascript

(2012.01.12)更新

• Blogger で JavaScript(4) - script type="text/html" を iframe へ変換

↑こっちの方が楽なので↓は使わないことにする。

注)このブログ用テンプレート

• dl>(dt,dd) を 2個対にして、div の中に入れる
• HTML コードは dl.source>dd>pre>code の中に書く
• 結果表示の iframe は dl.iframe>dd>iframe
• dl.source と dl.iframe は、どちらが先でもよい

Template Code

<dl class="source">
  <dt>source</dt>
  <dd><pre><code>「&」「<」「>」をエスケープした HTML 文書</code></pre></dd>
</dl>
<dl class="iframe">
  <dt>iframe</dt>
  <dd><iframe src="about:blank" frameborder="0"
    onload="
var iframe = event.target || event.srcElement;
if (iframe.loaded) return; else iframe.loaded=true;
var doc = iframe.contentDocument || iframe.contentWindow.document;
var section = iframe.parentNode.parentNode.parentNode;

var nodes = section.getElementsByTagName('dl');
var source = null;
for (var i=0; i<nodes.length; i++) {
  var classname = nodes[i].getAttribute('class') || nodes[i].className;
  if (classname=='source') {
    source = nodes[i]; 
    break;
  }
}

var code = source.getElementsByTagName('code').item(0);
doc.open();
doc.write(code.firstChild.data);
doc.close();
    "></iframe>
  </dd>
</dl>

確認

Windows XP Service Pack 3 上の下記ブラウザ

• Firefox 8.0
• Google Chrome 15.0.874.121
• Internet Explorer 7