iframe内からjQueryで指定したい

質問

jQueryのparentで親要素のIDを収得したいのですが、iframe内から、
読み込み元のHTMLを.parent()で追っていくと、取得できません。

jQuery("div#main iframe").contents().find('body').click(function(){
var hoge = jQuery(this).parent().parent().attr("id");
alert(hoge);
});

.parent()では読み込み元のHTMLをまでいけないようなんですが、jQueryでは取得できないのでしょうか。
他にiframeから親を取得する記述があるのでしょうか。

アドバイスいただけると助かります。
拙い説明で恐縮ですが、どうぞよろしくお願いします。

こちら↓の板が閉鎖されるのを知らずにポストしていまい、
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi
解決の見込みがなさそうですで、改めてこちらでお尋ねしています。
ややマルチ気味で恐縮ですが、ご容赦ください。

回答No.2

fujillin · ベストアンサー

#1です。

＞複数のiframeが存在しており、あるiframeにフォーカスしたら、
＞それを囲うdivのidを拾いたい
もしかするとそうなのかと思いましたが、ご質問文からははっきりとは読取れなかったので…

もしそうであるなら、#1にも書きましたようにわざわざ子ドキュメントから遡ってこなくても、イベントを設定するときにidを渡しておけばよいと思われます。

＞jQueryで親から子は
＞＞jQuery("div#main iframe").contents().find('body').
＞でいけるのに、子から親は無理なんですね。。。
これも、実際のところはDOMの親子ではなく、ドキュメント経由になっていることは同じだと思いますが…？
（jQueryの記法がそれを感じさせ難くなっているだけではないでしょうか？）

---サンプル---
ＨＴＭＬ内に以下のようなdivが沢山あるとして…

<div id="test1" class="document">
<iframe src="A.html"></iframe>
</div>

<div id="test2" class="document">
<iframe src="B.html"></iframe>
</div>

javascript（jQuery）で仮に以下のような設定にすれば
それぞれのdivのidがalertされます。

$("div.document").each(function(){
　 var id=$(this).attr("id");
　 　$("iframe",this).contents().find('body').click(function(){
　 　　alert(id);
　 });
});

ただし、イベントの設定はそれぞれのiframeを読込んでいないと（bodyを取得できないと）うまくいきません。
（jQueryだと対象が無いだけなので、エラーにならないみたい）
（（↑）これはid以前の問題。特にfxでは$(function(){～　でも、$(document).load(function(){～でもダメで、もう少しタイムラグが必要でした。）

お礼

お付き合いいただきありがとうございます！
>実際のところはDOMの親子ではなく、ドキュメント経由になっていることは同じ
確かにそうでした。
お恥ずかしいんですが、先程までこの意味がわからず、
「DOMの親子」関係から追っていく方法がばかり探していました。
いただいたソースのように、視点を変えるもの大切ですね。
とてもとても勉強になります。

読み込みのタイミングについては
jQuery.event.add(window, "load", function(){
で最後にしていますので、難なくidが取れました。（的外れだったらすみません）
jsは読み込みのタイミングにいつも悩まされます。。。

意図を汲みとっていただき、
すごく助かりました。

回答No.1

fujillin

ちゃんと調べてはいないので、ヒントにでもなれば…

フレーム内のドキュメントと親ドキュメントは別物なので、そのままのDOM操作では取得できません。
ご質問が子から親へなのか親から子へなのかよくわかりませんが、

＞jQuery("div#main iframe").contents().find('body').
の記述から、子フレーム内のthis値から親ドキュメントを取得したいのだろうと推測して、
適当に実験してみたところ

var hoge = this.ownerDocument.defaultView || this.ownerDocument.parentWindow;
hoge = hoge.parent.document;
みたいにすることで、一応、親のドキュメントを取得可能みたい。
（クロスドメインではないことが前提。 || はff用とIE用）

でも、親ドキュメントは自分のはずなので、こんな面倒なことをしなくても直接
　document～ の記述でもＯＫのはずです。
直接にiframe要素を取得するのは無理かと思いますが、iframeが沢山あって、そこから親要素内のiframe要素を取得したいとかであるなら、パラメータとしてiframeのidや要素そのものを渡しておくようにすれば、取得が簡単になると思います。

（↑）の例は、仕様をちゃんと確認してはいません。
標準モードと互換モードで違いがあるかも知れませんし、ブラウザのバージョンによっても挙動が異なるかも。
その他いろいろ、ご自身でご確認ください。

お礼

ありがとうございます！
ご認識の通り、子から親です。

ページ内に複数のiframeが存在しており、
あるiframeにフォーカスしたら、それを囲うdivのidを拾いたい
というのが、始まりでした。（なので、jQuery('this')から上に追ってました）

純粋なjsの記述に疎いので、いただいたソースがうまく活用できるか不安ですが、
取りあえずトライしてみます。

jQueryで親から子は
＞jQuery("div#main iframe").contents().find('body').
でいけるのに、子から親は無理なんですね。。。