2009-10-10

Javascript: 苦労した話

JavascriptでIFrameを扱う話。
「tmpl.js」という誰かが作っているライブラリを見つけ、便利そうだったので使おうかと考えた。
この辺
incl.jsで外部HTMLを読み込んで、tmpl.jsで文字列の置換を行うつもりだった。
こんな感じ。

本体
<include id="navi.html"></include>

外側
{ヘッダー部分(tmpl.jsとかとか)}
<a href="hoge.html">{something}</a>

上手くいかなかった。
正確にはFirefoxでは動くがIEではだめといった感じ。
あきらめて、prototype.jsとAjaxにした。
読み込んだ後にごりごり文字列の置換を行っただけ。

同じようにIFrameで別ページを読み込んで、中身だけ取り出そうと試みた。
外側のHTMLではAjaxを使ってデータを取得し、中身だけ取り出す、そうすることでサイトの外観の定義を一箇所にできるかなぁなんて思ったり。
無理だった。
理由:遅延処理のせい。
IEのIFrameにはonreadystatechangeなんてのがあるし、Firefoxは単にonloadに入れればいいだけじゃん、外側はonloadで読み込んでるし。
こんな感じで。
if (/*@cc_on ! @*/ false) {
  iframe.onreadystatechange = function() {
    if (this.readyState == "complete") {
      doSomething(this);
    }
  }
} else {
  iframe.onclick = function() { doSomething(iframe);}
}
安易でした・・・orz
問題はdoSomethingの中の処理なんだけど、IFrameから中身の文書を取り出すときに、contentWindowをが必要になるんだけど、IEではnullになってる。
やり方が悪いんだと思うんだけど、あきらめて力技でやることにした。

IE7とか8ならいけるのだろうか・・・
未だにIE6が必要なのかも怪しいが・・・
(とはいっても、僕の環境はIE6。メインがFirefoxだからという理由)

1 comment:

izmi said...

今日、たまたまこちらの記事を見つけました。もう今更のような気がしますが、こっちのスクリプトはどうでしょう? (incl.js と tmpl.js をまとめたもの)

http://stonedsoul.org/post/68295751/html-mock-up-kit

確認したのが結構前ですが、確かIEでもいけたと思います。

http://stonedsoul.org/post/70416383/mockupkit-js-update

Post a Comment