WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

IFRAME の内容を動的生成する正しい方法

先日 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 ブックマークレットも近いうちに修正したいと思います。

関連記事

この記事にコメントする