从iframe访问父窗口的元素

I have a page we can call parent.php. In this page i have an iframe with a submit form and outside of that i have a div with the id "target". Is it possible to submit the form in the iframe and when success refresh the target div. Say load a new page into it or something?

我有一个可以调用parent.php的页面。在这个页面中，我有一个带有提交表单的iframe，除此之外，我还有一个id为“target”的div。是否可以在iframe中提交表单，当成功刷新目标div时，比如在其中加载一个新页面?

Edit: The target div is in the parent page, so my question is basicly if you can make for an example a jquery call outside the iframe to the parent. And how that would look?

编辑:目标div位于父页面中，因此我的问题是，如果您可以在iframe之外为父类设置一个jquery调用，那么这个问题基本上就是这样的。那会是什么样子呢?

Edit 2: So this is how my jquery code looks like now. It is in the of the iframe page. the div #target is in the parent.php

编辑2:这就是我的jquery代码现在的样子。它在iframe页面中。这个div #目标在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(); 
 }); 
 })

I dont know if the script is active cause the form submits succcessfully but nothing happens to target.

我不知道脚本是否活跃，因为表单提交成功，但没有发生目标。

Edit 3:

编辑3:

Now im trying to call the parent page from a link within the iframe. And no success there either

现在我尝试从iframe中的链接调用父页面。也没有成功。

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

4 个解决方案

#1

I think the problem may be that you are not finding your element because of the "#" in your call to get it:

我认为问题可能是你没有找到你的元素，因为在你的电话得到它的“#”:

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

You only need the # if you are using jquery. Here it should be:

如果使用jquery，则只需要#。这里应该是:

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

#2

Have the below js inside the iframe and use ajax to submit the form.

在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");
          });
       });

   });

});

#3

You can access elements of parent window from within an iframe by using window.parent like this:

可以使用窗口从iframe中访问父窗口的元素。父母是这样的:

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

Which is the same as:

这与:

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

And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:

如果您有多个嵌套的iframe，并且希望访问最顶层的iframe，那么您可以使用window。前是这样的:

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

Which is the same as:

这与:

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

#4

I think you can just use window.parent from the iframe. window.parent returns the window object of the parent page, so you could do something like:

我想你可以用窗户。iframe的父母。窗口。parent返回父页面的窗口对象，因此您可以执行以下操作:

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

Then do whatever you want with that div.

然后用这个div做你想做的任何事情。