
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ベストアンサー
- 回答日時:
#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(){~でもダメで、もう少しタイムラグが必要でした。)
お付き合いいただきありがとうございます!
>実際のところはDOMの親子ではなく、ドキュメント経由になっていることは同じ
確かにそうでした。
お恥ずかしいんですが、先程までこの意味がわからず、
「DOMの親子」関係から追っていく方法がばかり探していました。
いただいたソースのように、視点を変えるもの大切ですね。
とてもとても勉強になります。
読み込みのタイミングについては
jQuery.event.add(window, "load", function(){
で最後にしていますので、難なくidが取れました。(的外れだったらすみません)
jsは読み込みのタイミングにいつも悩まされます。。。
意図を汲みとっていただき、
すごく助かりました。
No.1
- 回答日時:
ちゃんと調べてはいないので、ヒントにでもなれば…
フレーム内のドキュメントと親ドキュメントは別物なので、そのままの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や要素そのものを渡しておくようにすれば、取得が簡単になると思います。
(↑)の例は、仕様をちゃんと確認してはいません。
標準モードと互換モードで違いがあるかも知れませんし、ブラウザのバージョンによっても挙動が異なるかも。
その他いろいろ、ご自身でご確認ください。
ありがとうございます!
ご認識の通り、子から親です。
ページ内に複数のiframeが存在しており、
あるiframeにフォーカスしたら、それを囲うdivのidを拾いたい
というのが、始まりでした。(なので、jQuery('this')から上に追ってました)
純粋なjsの記述に疎いので、いただいたソースがうまく活用できるか不安ですが、
取りあえずトライしてみます。
jQueryで親から子は
>jQuery("div#main iframe").contents().find('body').
でいけるのに、子から親は無理なんですね。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
タブで開いてさらにタブ内をア...
-
ボタンを押せば、画面が切り替...
-
オンマウスで流れる文字
-
リンク色を動的に変更したい。i...
-
[急ぎ] videoタグで埋め込んだm...
-
javascriptテキストBOX色を元に...
-
「もっと詳しく」をクリックす...
-
javascriptでオブジェクトの重...
-
removeEventListenerについて
-
jQueryを使ってランダムに表示
-
IFRAMEの表示/非表示を切り替え...
-
クリックで色変更後に既に変更...
-
document.write以外の方法での...
-
キーボードキーでもクリックし...
-
JSで動的にリンクを作成
-
VBScriptでXMLのデータを取得す...
-
jQueryでクリックされた要素のi...
-
mysqlのinsert_idを再利用したい。
-
jspでcssが読み込めない
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
removeAttribute()メソッドで削...
-
IFRAMEの表示/非表示を切り替え...
-
VBAのことについて教えてくださ...
-
javascriptでpostした値が取得...
-
プルダウンメニュ 展開時にずら...
-
removeEventListenerについて
-
クリックすると隠れたテキスト...
-
プルダウンとチェックボックス...
-
指定字数以降隠す
-
自働生成される<div>タグに連番...
-
テキストボックスに入力された...
-
背景色を透明化
-
特定のものにだけスクリプトを...
-
ホームページ(デフォルトペー...
-
テキストエリア内の一部の文字...
-
隣のフレームの中のスタイルを...
-
java折りたたみタグを複数設置...
おすすめ情報