(2012.01.12)更新
↑こっちの方が楽なので↓は使わないことにする。
注)このブログ用テンプレート
- 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