先日 Firebug Lite ブックマークレットを公開しましたが、動的生成した IFRAME に HTML を流し込むとブラウザが読み込み状態のままになってしまう（ロード中アニメーションなどが再生されっぱなしになる）という問題がありました。 IFRAME の動的生成はいろいろと応用範囲が広いので、なんとかこの問題は解決しておきたいところです。そこでいろいろと試行錯誤して、なんとか回避方法を見つけることができました。本日はそれをご紹介しようと思います。

さっそく種明かししてしまいましょう。実は答えはいとも簡単でした。 document.write で HTML を流し込む前後で document.open と document.close をきちんと呼ぶ必要があるようです。こんな感じですね。

var iframe = document.createElement('IFRAME');
document.getElementById('blog_test').appendChild(iframe);
var doc = frames[frames.length - 1].document;
doc.open();
doc.write('<p>Hello!</p>');
doc.close();

基本は守れということですか。答えは簡単でしたが、ここに至るまでホントにいろいろ試したんですよ。 appendChild で DOM ノードを追加するのはもちろん試しましたし、 write メソッドの代わりに data: スキームで HTML を流し込むなんてのもやってみました。いずれもダメでしたが（泣）。普通のページでは write だけでも問題ないので、こんなメソッドの存在はすっかり忘れてましたよ・・・。

なんにせよ、こうしてやれば Opera, Firefox, IE6 いずれでも挿入した HTML が正常に反映され、読み込み状態も解除されます。 IE7 では試していませんが、たぶん大丈夫でしょう。ちなみに Firefox では、 appendChild などで DOM ノードを追加する場合でも、 open, close の組をいったん呼び出してやらないといけないようです。 Opera は大丈夫なんですけどね。そんなわけで、 IFRAME の内容を動的生成する際は必ず open, close を呼ぶようにしましょう。

やれやれ、これで思う存分 IFRAME の動的生成が使えるというものです。 Firebug Lite ブックマークレットも近いうちに修正したいと思います。