web-dev-qa-db-ja.com

iframeから親ウィンドウの要素にアクセスする

parent.phpを呼び出すことができるページがあります。このページには、送信フォームを持つiframeがあり、その外側にidが "target"であるdivがあります。 iframeでフォームを送信し、成功するとターゲットdivを更新することは可能ですか？新しいページをそこにロードするか、何かしますか？

編集：ターゲットdivは親ページにあるので、私の質問は、基本的に、iframeの外で親にjQuery呼び出しを行うことができるかどうかです。そして、それはどのように見えるでしょうか？

編集2：これは私のjqueryコードが今どのように見えるかです。 iframeページにあります。 div #targetはparent.phpにあります

$(;"form[name=my_form]").submit(function(e){     
 e.preventDefault; 
 window.parent.document.getElementById('#target'); 
 $("#target").load("mypage.php", function() { 
 $('form[name=my_form]').submit(); 
 }); 
 })

スクリプトがアクティブかどうかはわかりませんが、フォームは正常に送信されますが、ターゲットには何も起こりません。

編集3：

今、iframe内のリンクから親ページを呼び出そうとしています。そこにも成功はありません：

<a href="javascript:window.parent.getElementById('#target').load('mypage.php');">Link</a>
javascriptjqueryajaxiframe
65
Paparappa

問題は、それを取得するための呼び出しに「＃」が含まれているため、要素を見つけられないことであると思われます。

window.parent.document.getElementById('#target');

Jqueryを使用している場合にのみ＃が必要です。ここにあるはずです：

window.parent.document.getElementById('target');
111
barclay

window.parent を使用して、iframe内から親ウィンドウの要素にアクセスできます。

// using jquery    
window.parent.$("#element_id");

これは次と同じです：

// pure javascript
window.parent.document.getElementById("element_id");

ネストされたiframeが複数あり、最上位のiframeにアクセスする場合は、次のように window.top を使用できます。

// using jquery
window.top.$("#element_id");

これは次と同じです：

// pure javascript
window.top.document.getElementById("element_id");
11
Amr

Iframe内に以下のjsを用意し、ajaxを使用してフォームを送信します。

$(function(){

   $("form").submit(e){
        e.preventDefault();

       //Use ajax to submit the form
       $.ajax({
          url: this.action,
          data: $(this).serialize(),
          success: function(){
             window.parent.$("#target").load("urlOfThePageToLoad");
          });
       });

   });

});
10
ShankarSangoli

Iframeからwindow.parentを使用できると思います。 window.parentは親ページのウィンドウオブジェクトを返すため、次のようなことができます。

window.parent.document.getElementById('yourdiv');

次に、そのdivで必要な操作を行います。

5
varfoo