![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
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で質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript Javascript初心者|jQueryの.val()で値を取得し複数の要素を連結させる方法知りたい 2 2022/06/02 12:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryでのレスポンシブが綺麗に動かない 3 2022/06/21 11:08
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
背景色を透明化
-
createElementが一瞬で消えてし...
-
HTML id名とjavascript変数名
-
クリックするとテーブルの列の...
-
取得した要素がインライン要素...
-
getElementByIdの戻り値がnull...
-
前回の質問の続き
-
画像の表示位置
-
ポップアップのソースの書き方...
-
JimdoでWebアイコンフォントの...
-
Gifアニメ、最後のコマに行った...
-
デフォルト非表示にしたい。【t...
-
window.openで値の渡し方を教え...
-
jspでcssが読み込めない
-
日替わりで画像を変更したい
-
error LNK2019 未解決のシンボ...
-
スライダーを実装した場合、ペ...
-
リキッドデザイン3カラム左端幅...
-
複数の画像を先に読み込ませ表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
createElementで作成した要素を...
-
読み込んだQRコードをフォーム...
-
console.log結果をhtmlで表示し...
-
iframe内のリンクが飛ばないの...
-
変数内容をHTML内で表示する方法
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
自働生成される<div>タグに連番...
-
複数のリンク画像を一定時間で...
-
クリックで色変更後に既に変更...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
Jquery 親要素で順番入れ替え
-
HTML id名とjavascript変数名
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
おすすめ情報