关于javascript：从iframe访问父窗口的元素


Access elements of parent window from iframe

我有一个页面可以调用parent.php。 在此页面中，我有一个带有提交表单的iframe，除此之外，我还有一个ID为" target"的div。 是否可以在iframe中提交表单，并在成功刷新后刷新目标div。 是说要在其中加载新页面？

编辑：
目标div位于父页面中，因此我的问题基本上是，是否可以在iframe之外向父对象进行jQuery调用的示例。 看起来如何？

编辑2：
这就是我的jquery代码现在的样子。 它位于iframe页面的中。 div #target在parent.php中

1
2
3
4
5
6
7
$(;"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中的链接调用父页面。 那里也没有成功：

1
Link
相关讨论

我认为问题可能是由于调用中获取"＃"而找不到元素：

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

仅在使用jquery时才需要＃。 在这里应该是：

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

相关讨论

您可以使用window.parent在iframe中访问父窗口的元素，如下所示：

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

与以下内容相同：

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

如果您有多个嵌套的iframe，并且要访问最顶层的iframe，则可以使用window.top，如下所示：

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

与以下内容相同：

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

相关讨论

在iframe中包含以下js，并使用ajax提交表单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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");
          });
       });

   });

});
相关讨论

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

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

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

相关讨论