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回まで
  • 13歳以上
  • 登録:2011/09/23 11:50:16
  • 終了:2011/09/24 22:06:10

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4504ベストアンサー獲得回数18702011/09/23 13:22:18

ポイント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

Cherenkov回答回数1503ベストアンサー獲得回数4932011/09/23 12:09:15

ポイント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ベストアンサー獲得回数742011/09/23 12:10:28

ポイント66pt

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


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

id:memamii

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

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

a-kuma3回答回数4504ベストアンサー獲得回数18702011/09/23 13:22:18ここでベストアンサー

ポイント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 さんなりが回答を書け
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません