从iframe访问父窗口的元素


75

我有一个可以打电话的页面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>

目标div是在父页面还是iframe中?
ShankarSangoli 2011年

它在父页面中,所以我的问题基本上是您是否可以在iframe之外向父对象进行jquery调用示例。
Paparappa 2011年

Answers:


121

我认为问题可能在于您找不到元素,因为在调用它时调用了“#”:

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

仅在使用jquery时才需要#。在这里应该是:

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

11
如果网站容器和iframe位于不同的域上怎么办?
michelem 2014年

2
@Michelem我认为你不走运;为了使您能够访问父级,iframe必须具有与父级相同的协议和域。这是防止跨域脚本编写的保障措施。
乔恩·昂斯托特

4
@Michelem:如果iframe和父级位于不同的域上,则与父级通信的唯一方法是使用window.postMessage()。不过,只有在您可以控制两端的情况下才有可能。文档在这里:developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
PAL约根森

@michelem有没有示例如何在iframe中访问父元素?我们可以使用window.postMessage()进行操作,但是我们要访问什么并在iframe中使用它呢?
维沙尔

这是迟,但例如window.postMessage()在此基础上reactjs dev.to/damcosset/...
扯谈耆那教的

16

您可以通过以下方式在iframe中访问父窗口的元素window.parent

// 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");

1
请注意,使用jQuery与使用jQuery是不同getElementById。对于新开发人员可能会感到困惑👍–
alistair

9

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

   });

});

它可以通过ajax提交表单,但是目标div从一开始就保持不变。从iframe内与parent.php通信似乎确实可行。
Paparappa 2011年

如果iframe在同一个域中,那么您将没有任何问题。您可以尝试window.parent.$("#target").length在成功处理程序中发出警报吗?
ShankarSangoli 2011年

iframe位于同一域中。好吧,我把那个代码放在了window.parent。$(“#target”)。load(“ urlOfThePageToLoad”);中。但它什么也没返回。它在您的代码中用“表单”表示时,应该是表单的名称吗?可以吗?
2011年

表格的名称是什么?认沽是form[name=nameOfYourform]到位的form
ShankarSangoli

您想在修改后的问题中做什么?
2011年

4

我认为您可以只使用iframe中的window.parent。window.parent返回父页面的window对象,因此您可以执行以下操作:

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

然后对该div执行任何操作。


我是一个jQuery新手,但我应该在ifram文件中放入类似内容吗?
Paparappa 2011年

$(document).ready(function(){window.parent.document.getElementById('#target'); $(“#target”)。load(“ file.php”);});
Paparappa 2011年

大概更像是:$(document).ready(function(){$(window.parent.document.getElementById(“ target”))。load(“ file.php”)); });
varfoo 2011年

恐怕这没有用。表单提交得很好,但目标div没有任何反应。它保持原样。嗯..
Paparappa 2011年

可能需要阻止表单提交,直到要从iframe运行的javascript完成提交为止。因此,它类似于(抱歉,如果下面的代码中有错误,将其写在这样的代码块中很痛苦):$(;“ form”)。submit(function(e){e.preventDefault; window .parent.document.getElementById('#target'); $(“#target”)。load(“ file.php”,function(){$('form')。submit();});})
varfoo
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.