htmlの読込完了時に起動する処理をjQueryを用いて書きたい。

具体的には、jQuery1.6.4を使用して、a.html内にあるiframe(id=hoge)のsrcを変化させた[$("#hoge").attr("src", "test.html");]場合、そのhogeの中の表示が終わる(イメージ等遅延読込も含めて)タイミングで、何かしたい場合です。
onLoad・onreadystatechangeイベントに無名関数登録でも、isReady監視でもできませんでした。環境は、windows xp/ie7 or firefox6.0.2です。
ちなみにjQueryでなくjavascriptだけで書けるのであれば、それでも構いません。
よろしくお願いします。

回答の条件
  • 1人3回まで
  • 登録:
  • 終了:2011/09/24 22:06:10
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.3

回答回数4973ベストアンサー獲得回数2154

ポイント201pt

http://jsfiddle.net/8jGPu/

jsFiddle で、ちょろっと書いてみましたが、iframe の load で関数を登録する、

というのでは駄目なのでしょうか?


# FF5.0 で確認

id:memamii

jsFiddle ではうまくいってますが、私の環境ではだめでした。

ちなみに、IEは8でした。

2011/09/23 21:02:02

その他の回答2件)

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント33pt

iframeは同一ドメインでしょうか?

iframeを編集できますか?

編集できるのであればiframe側で適当なタイミング(imgのonload等)に適当なイベントをtrigger()で発行して親フレームでそれをキャッチすればいいのではないでしょうか。


参考:

Trigger from iframe to parent window - jQuery Forum

id:memamii

iframeは同一ドメインではありません。言葉足らずでした。

2011/09/23 21:14:24
id:Jupiter2100 No.2

回答回数444ベストアンサー獲得回数74

ポイント66pt

DOMの準備ができたかどうかで判断してはどうでしょうか。


bindReady()メソッドを参考にしてみてください。

id:memamii

参考にさせて頂きましたが、「arguments.callee」を使用することはjQuery1.4以降禁止されているようです。これを使わない方法はありますか?

2011/09/23 21:06:49
id:a-kuma3 No.3

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント201pt

http://jsfiddle.net/8jGPu/

jsFiddle で、ちょろっと書いてみましたが、iframe の load で関数を登録する、

というのでは駄目なのでしょうか?


# FF5.0 で確認

id:memamii

jsFiddle ではうまくいってますが、私の環境ではだめでした。

ちなみに、IEは8でした。

2011/09/23 21:02:02
  • id:a-kuma3
    >jsFiddle ではうまくいってますが、私の環境ではだめでした。
    >ちなみに、IEは8でした。
    これって、IE8 で、ぼくが jsFiddle に置いたコードは正しく動くってことですよね。

    「私の環境」に、jsFiddle に書いたコードを置いても、正しく動かない、ってことでしょうか?
  • id:memamii
    a-kuma3さんへ

    おっしゃる通りです。
    私の環境というのは、語弊がありました。
    IE8でもFirefoxでも、jsFiddleではOKで、私のページにそれを組み込んだものはNGでした。
    組み込み方の問題なのか、jQuery1.6.4でやるのが間違えているのか、模索しています。
    一番きれいな書き方ですから、いけるはずなんですけど・・。

  • id:a-kuma3
    jQuery 1.6.4 (Uncompressed の方) を使って、手持ちの環境で試してみましたけど、動作しますねえ。
    DOCTYPE とか、バッサリ削ってるので、互換モードとかが関係するのかな...

    <html>
    <body>
    <script src="jquery-1.6.4.js"></script>
      ... jsFiddle に書いたコード
    </body>
    </html>
  • id:Cherenkov
    iframeの中の画像等が完全に表示されたタイミングで~とか難しい要望かと思ったのですが、単純にiframeのonload時に実行できればいい問題なのでしょうか?

    なにがどうなったからNGなのかわからないとなんとも…
  • id:memamii
    Cherenkovさんへ
    その、難しい要望です。
    DOMを操作できるようになるまでではなく、イメージ等、遅れて表示されるものもすべて読み込んでから、ということです。
    iframe内に表示する内容は、<BODY>タグにonLoadイベントが書かれているものです。
  • id:memamii
    a-kuma3さんへ
    ちょっと試してみます。今日は時間切れなので、明日にでも報告します
  • id:Cherenkov
    iframeのページは管理下にありますか?
    編集することができるなら回答1にあるtriggerでいけると思います。


    変化球な方法。
    編集がダメなら、iframe内にある一番時間がかかりそうな画像を親フレームでも読み込んで、そのonloadしたタイミングをiframeの読み込み完了として処理するとか。
  • id:memamii
    a-kuma3さんへ
     こちらでも動作確認とれました!
     他の参考になりそうなページを色々試していたため、純粋なコードではなくなってしまっていたのが原因かな? と思われます。
     ありがとうございました。

この質問への反応(ブックマークコメント)

トラックバック

  • というか、どうしてコメントにしちゃうのかな、って。 状況が分からないから、コメントで探りながら、ってのは分かるんですけど、 id:ken3memo さんなり、id:TransFreeBSD さんなりが回答を書け
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません