- ベストアンサー
iframe内からjQueryで親要素のIDを取得する方法
fujillinの回答
- fujillin
- ベストアンサー率61% (1594/2576)
ちゃんと調べてはいないので、ヒントにでもなれば… フレーム内のドキュメントと親ドキュメントは別物なので、そのままの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や要素そのものを渡しておくようにすれば、取得が簡単になると思います。 （↑）の例は、仕様をちゃんと確認してはいません。 標準モードと互換モードで違いがあるかも知れませんし、ブラウザのバージョンによっても挙動が異なるかも。 その他いろいろ、ご自身でご確認ください。
関連するQ&A
- jQuery 複数のfind()
ID hogeの中のimgとiframeのsrcを取得したいです。 imgだけなら、こう書きます。 $('#hoge').find('img').each(function(){ alert($(this).attr('src'); }); imgとiframeの両方としたい場合、どうしたら良いでしょうか？ いっぺんに取れない仕様の場合、find('img')とfind('iframe')で取得したオブジェクトを マージする方法でもよいです。 以上、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 親フレームの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ではない気がします。 よろしくお願いします。
- 締切済み
- JavaScript
- jQueryで指定した要素自身のHTML
jQueryを使用していて困っています。 下記の様なHTMLがある場合に <div id="hoge"> <div id="first">hoge</div> <div id="second">hogehoge</div> <div id="third">hogehogehoge</div> </div> “<div id="second">hogehoge</div>”を取得したいです。 $("#second").html()では、 hogehoge が取得されることになりますし、 $("#hoge").html()では、 <div id="first">hoge</div><div id="second">hogehoge</div><div id="third">hogehogehoge</div> が取得されることになると思います。 $("#second").wrap("<div class='target'></div>")して、 $(".target").html()を取得しても良いのですが、 他のところで影響がでそうで怖いので、できれば避けたいです。 （殆ど完成状態にありますので……） 何か良い方法はありますでしょうか？
- ベストアンサー
- JavaScript
- jQueryのカスタムデータ属性追加について
いつもこちらでお世話になっています。 jQueryでカスタムデータ属性（data-*）を新規追加するにはどう記述すれば良いのでしょうか。 html側にはカスタムデータ属性が未設定の状態です。 以下の方法で試してみましたが、カスタムデータ属性を取得すると「NaN」となっています。 【html】 <div id='hoge'>hogehoge< /> 【ｊQuery】 $(#hoge).attr({ 'data-a': 'A', 'data-b': 'B' }); よろしくお願いいたします。
- ベストアンサー
- JavaScript
- htmlのiframeについて
iframeを使用する際に特定のidのエリアのみ表示させることはできますか？ 例：取得先サイト ■ヘッダ ■コンテンツ１（id="area1"） ■コンテンツ２（id="area2"） ■フッタ 取得元のサイト（表示させたいサイト）に、上記サイトのコンテンツ2だけを引っ張ってきたいと考えています。 ヘッダやコンテンツ１、フッタはiframeに表示させたくありません。 コンテンツ２のみiframeに表示させたいです。 こういったことは可能でしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- jsp内iframe(cgi)へjspデータを渡す
はじめまして、現在jspでプログラムされたページのiframe内に perl（cgi）で組んでいるアンケートフォームを設定しております。 こちらのcgi内にjspのセッションデータを受け渡すことは可能でしょうか？ 現在、色々と試行錯誤しておりますが、うまくいきません。 もし可能であれば、どなたか具体的な方法を教えていただけますでしょうか？ 現在は下記のように試していることです。 ■1.jsp <input type="hidden" name="hoge" value="<%=getString(session, " hoge")%>"> こちらのhogeのvalueデータを、 ■2.jsp 親フレームの2.ｊｓｐには上記のhogeセッションは反映しておりますが、 2.jsp内の下記、iframe内のcgiに反映できません。 <iframe src="http://www.hoge.com/cgi-bin/hoge.cgi" style="width:600px; heigh t:600px; scrolling:no; valign:top;" frameborder="0" method="post" name="hoge" value="<%=getString(session, "hoge")%>"></iframe> 宜しくお願いいたします。
- ベストアンサー
- Java
- CGIをiframeで読み込んだ物に間隔を空けたい
HTMLでホームページを作ってます。 ホームページの中にチャットを作ろうと思いCGIをDLし、HTMLの中にiframe文で読み込むことに成功しました。 その際、iframeで読み込むCGIが２つあり、画面が２つに別れてしまうのが嫌で、iframeをdivで囲み、 folat:leftで回り込ませ、最初のiframeの下に２つ目のiframeで読み込んだ物が来るようにしました。 これでいちお、成功したと思ってるのですが、 できればこれらを同じ間隔で中央に寄せたいのですが,marginで間隔を空けようとしても空くことができません。 他に方法が無いかと思い質問させていただきました。 下記プログラムです。 ちなみにCGIソース元はkentさんのところです。http://www.kent-web.com/chat/ <div id=sample1> <iframe name="form" src="./comchat.cgi?mode=form&nam=&eml=&col=&retime=40&line=20" width="900" height="200"></iframe> <iframe name="log" src="./comchat.cgi?retime=40&line=20" width="900" height="900"></iframe> </div> </body> sample1{ float:left: }
- ベストアンサー
- HTML
- JQueryのセレクタ
jqueryでセレクタの取得をしたいのですがうまくいきません div要素の中のspan要素を取得したいのですがclassで取得すると重いのでid属性で場所を限定してからclass属性で絞り込みたいです こんな感じにしたらだめでした $("#hoge.foo").html('ほげ'); html <div id=hoge> <span class=foo></span> </div>
- ベストアンサー
- JavaScript
- HTMLのIFRAMEについて教えて
HTMLのIFRAMEについて教えて欲しいのですが、 例えば、cgiの入力項目で、数字の１を入力した場合、aaa.htmlというページ内にあるIFRAMEで囲まれた エリア内に、１の写真が表示できるようにしたいのです。 現在、以下のような記述をしているのですが、IFRAMEの部分がエラーになってしまうのです。(>_<) noには、数字の変数が入っています。 他の方法でも結構なのですが、数字によってIFRAME内に表示される写真を変えたいのです。 どなたか、宜しくおねがいします。 <script type="text/javascript"> <!-- switch(no){ case 0: id = "01.jpg"; break; case 1: id = "02.jpg"; break; case 2: id = "03.jpg"; break; default : id = "00.jpg"; break; } // --> </script> <iframe src="id" name="picture" width="300" height="300"></iframe>
- ベストアンサー
- HTML
- jQueryのcontainsフィルターについて
こんにちは。 jQueryについてご質問があります。 jQueryのcontainsフィルターで要素を取得できなくて困っております。 たとえば以下のようなHTMLがあるとします。 ======================== <g class="parent"> <text width="50" height="50" x="10" y="10"><tspan>abc</tspan></text> </g> ======================== このときtspan要素を取得したい場合、 $("g.parent text tspan:contains('abc')"); のようにしても取得できないのです。 例えば次のパターンの場合 ========================= <section class="parent"> <p><span>abc</span></p> </section> ========================= $("section.parent p span:contains('abc')"); というコードを実行すると正確にspan要素を取得できます。 前者の場合はなぜ取得できないのでしょうか？ ご教示よろしくお願いいたします。
- 締切済み
- JavaScript
お礼
ありがとうございます！ ご認識の通り、子から親です。 ページ内に複数のiframeが存在しており、 あるiframeにフォーカスしたら、それを囲うdivのidを拾いたい というのが、始まりでした。（なので、jQuery('this')から上に追ってました） 純粋なjsの記述に疎いので、いただいたソースがうまく活用できるか不安ですが、 取りあえずトライしてみます。 jQueryで親から子は ＞jQuery("div#main iframe").contents().find('body'). でいけるのに、子から親は無理なんですね。。。