从 iframe 访问父窗口的元素

Question

我有一个页面，我们可以调用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>

Answer 1

我认为问题可能是您没有找到您的元素，因为您调用中的“#”来获取它：

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

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

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

Answer 2

您可以使用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");

Answer 3

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

   });

});

Answer 4

我认为您可以只使用 iframe 中的 window.parent。 window.parent 返回父页面的窗口对象，所以你可以这样做：

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

然后对那个 div 做任何你想做的事情。