- ブログネタ：
- JavaScript に参加中！
色々試したけど、分かった原因は「サーバーの仕様っぽい」止まり。(誰か原因を教えてー
)サーバーの仕様変更はできないし、これに時間をかけてもアレなので、AJAX を使わず、iframe で回避した。
その時やったことを忘れないよう、jQuery を使って iframe の中の要素にアクセスする方法を書いておく。
■ 基礎
まず、iframe 内のページの document オブジェクトの参照はこれでOK
$('iframe:first').contents()
(例として、ページ内にある最初 (:first) の iframe を対象とする)(
contents() については、contents() - jQuery 1.3.2 日本語リファレンス を参照してください)
これを元すれば、jQuery の find() と強力なセレクタを使って、目的の要素にアクセスできる。
なので例えば、iframe 内のページにある、id="main" へのアクセスは
$('iframe:first').contents().find('#main')
カンタン！
■ 使い方
あとは、jQuery の機能で自由自在に操作が可能なのは、なんとなく想像できると思う。
サンプルを用意したので、↓をご覧アレー
- 動作サンプル：jQuery で iframe 内の要素にアクセス ： iframe 内を書き換え
-
動作サンプル：jQuery で iframe 内の要素にアクセス ： iframe 内の要素を取得し、親ページに配置
(2010/02/08 追記)
IE 6, 7 だと jQuery の clone() でエラーになることを確認 (IE8は動いた)。何で？
■ 問題点
-
親ページのドメインと、iframe の中のドメインが異なる場合、JavaScript のセキュリティ制限で、一切アクセスできない (上記サンプルを参照)。
他ドメインのページの情報を無断に拝借するのはレアケースかもだけど、必要な場合はサーバーサイドでプロキシ的な役目のページを置く必要があるね。(2010/02/17 追記) プロキシのページを設けることができる環境なら、iframe 使わずに素の？ XMLHttpRequest というか、jQuery の AJAX 系の機能を素直に使ったほうが回りくどくない。
それと、iframe 内の要素を親ページに配置した場合、class や id による見た目の制御がリセットされる。
やってみれば分かると思うんだけど……なんて言ったら伝わるかなー。
親ページでも iframe でロードしたページの CSS を読み込んでおかないとイケない、ということです。 -
AJAX の代用とするには、動作の快適さに気を配る必要がある (特にIE)。
これもケースバイケースだと思うんだけど、俺が今回作ったのは、
「a タグに onmouse すると、リンク先ページの特定の部分を画面に表示する」
という機能だった。-
a タグにて、onmouseover イベントを発生
a タグの href にある URL を iframe に 渡す。 - iframe の読み込みがスタート
- iframe の onload イベントで描画処理
iframe の読み込みはバックグラウンドで行われ、言うなれば「非同期」。
うはｗ AJAX じゃんｗｗｗ スピード感マックス！
と期待していたら、Internet Explore は iframe 読み込み開始時の挙動がびっくりするほど重い。
バックグラウンドで動いているとは思えないような雰囲気。
これには色々な回避方法があると思う。
俺がやった方法を大雑把に書くと、-
iframe は１つだけ用いて、使いまわす。
iframe を瞬時に複数発生させると、重たかったので (IEで) -
iframe で進行している読み込みが不要になった場合、強引に中断させる。
つまり、a タグの onmouseout 発生で、iframe の src はダミーの空ページを読み込ませて、かつ iframe の onload イベントをクリア (jQuery の unbind)
-
a タグにて、onmouseover イベントを発生
はい。
ということで、jQuery チョー便利ィイ！
コメント