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

(2012.02.06)更新

• .createElement() した div を .inertBefore() しないで、直接 div.innerHTML = "<iframe ..." して iframe を DOM Tree へ .insertBefore()
  ※ IE6 だとうまくいかなかったような気がするけれど無視。
• title 属性を json 形式で iframe の属性に展開するようにコードを追加
  title="'id':'test', 'style':'display:block;width:100%;'" と書けば
  <iframe id="test" style="display:block;width:100%;" のように .setAttribute() される
• iframe コンテンツの height を iframe の height に設定することでスクロールバーが出ないようにコードを追加

JavaScript Source

<script></script>

(2012.01.17)更新

• Global 変数を使わないように関数化
• return で深くなったブロック階層を解消

JavaScript Source

<script></script>

(2012.01.12)

JavaScript Source

<script type="text/javascript">
    var nodes = document.getElementsByTagName("script");
    for (var i=0; i<nodes.length; i++) {
      var script = nodes.item(i);
      if (script.getAttribute("type") == "text/html") {
        var div = document.createElement("div");
        script.parentNode.insertBefore(div, script);
        div.innerHTML = '<iframe frameborder="0"></iframe>'; // for IE7,IE8
        var iframe = div.firstChild;
        if (iframe) {
          script.parentNode.replaceChild(iframe, div);
          var doc = iframe.contentDocument || iframe.contentWindow.document;
          if (doc) {
            doc.open();
            doc.write(script.innerHTML);
            doc.close();
          }
        }
      }
    }
</script>

HTML Source

<script type="text/html">
</script><!-- type="text/html" -->

Result

確認

OS

Windows XP Professional Service Pack 3

Web Brower

Internet Explorer 8

Firefox 9.0.1

Blogger で JavaScript(3) - <![CDATA[ の代わりに script type="text/plain"

タグやソースコードの中の <, &, > をエスケープするのは大変だし、HTMLソースの見通しが悪くなるので、JavaScript で何とかしてみる。

JavaScript Source

<script type='text/javascript'>
  var nodes = document.getElementsByTagName('script');
  for (var i=0; i<nodes.length; i++) {
    var script = nodes.item(i);
    if (script.getAttribute("type") == "text/plain") {
      var text= document.createTextNode(script.innerHTML);
      script.parentNode.insertBefore(text, script);
    }
  }
</script>

HTML Source

<pre><script type="text/plain">普通のテキスト
<p>タグもそのまま</p>
<!-- コメントもそのまま --></script></pre>

Result