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

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

はてなブックマークが ajax に変更されている

Firefox で RequestPolicy を導入しているので、他のドメイン(st-hatena.com)にある JavaScript のコードから ajax でブックマークのエントリーを取得されても何も表示されなくてこまる。

Firebug の [接続タブ] で確認すると、どうやら次のような URL でブックマークのエントリーを取得しているらしい。

http://b.hatena.ne.jp/(Hatena ID)/fragment?tag=(Tag name)

直接アクセスしてみたら問題なく表示されたので、元のページからエントリーデータのページへ移動するブックマークレットを作ってひとまず回避。

bookmarklet

javascript:var a=/^(http:\/\/b\.hatena\.ne\.jp\/[^/]+\/)(.*)$/.exec(location.href);location.href=a[1]+'fragment'+((a[2]&&a[2]!='')?'?tag='+a[2].replace(/\/$/,'').split('/').join('&tag='):'');

2011.03.11 追記

ブックマークレットで移動した先のページを開いているときに st-hatena.ne.jp を RequestPolicy で許可したら Favicon がリピートして気持ち悪いことに。。。

Stylish で次の css を導入して解決。

Stylish

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("b.hatena.ne.jp") {
  h3.entry { background:no-repeat; padding-left: 20px; }
}

2011.04.11 追記

cookie を削除したら ajax を使わない元のはてなブックマークに復帰。
何かの弾み(何かクリック?)で ajax 機能のスイッチが入ってしまっていたみたい。

タグ一覧の右上にある [クラウド(or リスト)表示に切り替え] ボタンをクリックしていたら、 また ajax に。。。

b.hatena.ne.jp の Cookie を覗いてみると "fast" 項目が、値 "1" で追加されている。
どうやらこれが ajax 機能のスイッチみたい。

ウェブブラウザの振るまい確認 - その 1 (<iframe onload="...)

Blogger 上で JavaScript - その 2 (onload) を書き終えてから、iframe の中の文書を書き換えたら、再び onload が呼ばれるかもしれないと、ふと気づいて、次の 3つのときにログを残して確認してみる。

• onload が呼ばれたすぐ後
• .open() の前
• .close() の後

※ 実際のコードは (") は &quot; で (<) は &lt; で (>) は &gt;。

• onload this.onload_count = (typeof(this.onload_count)!='number')?3: this.onload_count-1; if (this.onload_count <= 0) { return; } var log = document.getElementById('browserbehavior1'); log.innerHTML = '<div>onload:' + this.contentWindow.location.href + '</div>\n' + log.innerHTML; d=this.contentWindow.document; log.innerHTML = '<div>&nbsp; .open();</div>\n' + log.innerHTML; d.open(); d.write('<p style="font-size:80%;font-family:verdana,sans-serif;">Browser Behavior 1st</p>'); d.close(); log.innerHTML = '<div>&nbsp; .close();</div>\n' + log.innerHTML;

結果 - Firefox 3.6.9 on Windows XP SP2

1. onload:about:blank
2.   .open();
3.   .close();

となって、再び onload は呼び出されないもよう。

結果 - Internet Explorer 7 on Windows XP SP2

1. onload:about:blank
2.   .open();
3. onload:http://softie.blogspot.com/...
4.   .open();
5. onload:http://softie.blogspot.com/...
6.   .open();
7.   .close();
8.   .close();
9.   .close();

のような順番でログに残っているので、おそらく .close(); を実行すると onload が再び呼ばれてループするもよう。
onload のはじめで、2回目以降は実行されない工夫が必要。

検証用コンテンツ

iframe

logs

Blogger 上で JavaScript - その 2 (onload)

iframe 要素に以下のイベントを追加
※ 実際のコードは (") は &quot; で (<) は &lt; で (>) は &gt;。
※ IE 対応のために先頭に 3行挿入(2010-10-06)

• onload=" if (typeof(this.is_first_onload)=='boolean') return; this.is_first_onload = false; d=this.contentWindow.document; d.open(); d.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n' + '<html xmlns=quot;http://www.w3.org/1999/xhtml" xml:lang="en">\n' + '<head>\n' + ' <title>javascript on blogger - 2nd (onload)</title>\n' + '</head>\n' + '<body>\n' + ' <h1 style="font-size:80%;font-family:verdana,sans-serif;">javascript on blogger - 2nd (onload)</h1>\n' + '</body>\n' + '</html>\n'); d.close();"

iframe

Blogger 上で JavaScript - その 1 (onmouseover | onmouseout | onclick)

a 要素に以下のイベントを追加
※ 実際のコードは (") は &quot; で (<) は &lt; で (>) は &gt;。

• onmouseover
  var el=document.getElementById('javascriptonblogger1');
  el.innerHTML='<div>mouseover!</div>\n'+el.innerHTML;
  this.style.backgroundColor='#ccccff';"
• onmouseout
  var el=document.getElementById('javascriptonblogger1');
  el.innerHTML='<div>mouseout!</div>\n'+el.innerHTML;
  this.style.backgroundColor='#999999';
• onclick
  var el=document.getElementById('javascriptonblogger1');
  el.innerHTML='<div>mouseout!</div>\n'+el.innerHTML;
  this.style.backgroundColor='#999999';

mouse over, click and out

logs