• 締切済み

親フレームのjQueryオブジェクトを使えるか?

html(親html)上に別のhtml(子html)を<iframe>で表示しています。 親htmlではjQuery(v1.8.2)を使用しています。 子htmlでもjQueryを使いたいです。 単純に子htmlでjquery.jsを読み込めば良いですが、勉強のため以下のように親htmlのjQueryオブジェクトを使って実現してみました。 【子htmlのscript】 var $ = parent.jQuery; $(window).load(function() {   $("body", document).append( "hoge" ); }); これで見た目は正しく動作してますが、以下の不明点が出てきたので質問させて下さい。 【質問】 $(window).loadではなく$(document).readyを使った場合は"hoge"が追加されていませんでした。 <body>要素がまだ読み込めていないせいかとも思いましたが、documentの読み込み完了後に実行されているはずです。 なぜ"hoge"が追加されないのでしょう? このdocumentは親htmlのdocumentなのでしょうか? ただ、$("body").append( "hoge" )と書いた場合は親htmlに"hoge"が追加され、$("body", document).append( "hoge" )と書くことで子htmlに"hoge"が追加されるようなので、親htmlのdocumentではない気がします。 よろしくお願いします。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ブラウザによっては$(document).ready(function() ~ でも動作するみたいです。 ちゃんと確認したわけではありませんが、少し実験してみたところ、 $(diocument).readu(function(){ 内で alert(this.title)などとしてみると親ウィンドウのタイトルを返します。 一方で、$(window).load の場合は、alert(this.document.title) で子ウィンドウを返します。 jQueryの中を見てみないとわかりませんが、$(document) は確かに子のドキュメントを取得していますが、$(document).ready ではどうやら親ウィンドウのreadyにバインドされているみたいですね。 それなので、動作しない場合は $("body", document) は空配列を返していると思われます。 つまり、子ウィンドウのボディがまだ読込まれる前にスクリプトが実行されていると推測されます。(親ウィンドウはready状態) スクリプトを子のソースのbodyタグ以降に移動してみると、bodyが存在するので実行されることがわかると思いますし、入れる位置によってappendされる位置が変わってくるのもわかるかと思います。 あるいは、  setTimeout(function(){   $("body", document).append( "hoge" );  }, 300); のように、時間差を設けてあげれば、head内に記述しても動作するのがわかるかと思います。

akai12345
質問者

補足

いろいろ思いつかなかった確認方法など書いていただきありがとうございます。 そういえばこちらの環境書き忘れましたが、Windows7でIE8で動かしてます。 ちょっといろいろ検証してみますね。

すると、全ての回答が全文表示されます。

関連するQ&A