-PR-
  • 困ってます
  • 質問No.6811203
解決
済み

iframe内からjQueryで指定したい

  • 閲覧数5115
  • ありがとう数2
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 52% (21/40)

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
解決の見込みがなさそうですで、改めてこちらでお尋ねしています。
ややマルチ気味で恐縮ですが、ご容赦ください。
  • 回答数2
  • 気になる数0

質問者が選んだベストアンサー

  • 回答No.2
レベル14

ベストアンサー率 61% (1594/2576)

#1です。

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

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

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


---サンプル---
HTML内に以下のような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(){~でもダメで、もう少しタイムラグが必要でした。)
お礼コメント
Search_tmp

お礼率 52% (21/40)

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

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

意図を汲みとっていただき、
すごく助かりました。
投稿日時 - 2011-06-16 14:19:10
  • ありがとう数0
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.1
レベル14

ベストアンサー率 61% (1594/2576)

ちゃんと調べてはいないので、ヒントにでもなれば… フレーム内のドキュメントと親ドキュメントは別物なので、そのままのDOM操作では取得できません。 ご質問が子から親へなのか親から子へなのかよくわかりませんが、 >jQuery("div#main iframe").contents().find('body'). の記述から、子フレーム内のthis値から親ドキュメ ...続きを読む
ちゃんと調べてはいないので、ヒントにでもなれば…


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

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

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

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


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

お礼率 52% (21/40)

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

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

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

jQueryで親から子は
>jQuery("div#main iframe").contents().find('body').
でいけるのに、子から親は無理なんですね。。。
投稿日時 - 2011-06-16 12:33:11
  • ありがとう数0
  • 回答数2
  • 気になる数0
このQ&Aで解決しましたか?

関連するQ&A

-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ