Javascript 从iframe访问父窗口的元素

我有一个页面可以调用

parent.php

。在这个页面中，我有一个带有提交表单的

iframe

，除此之外，我还有一个id为“target”的div。是否可以在iframe中提交表单，并在成功时刷新目标div。例如，在其中加载新页面或其他内容

编辑：

---

目标div位于父页面中，因此我的问题基本上是，例如，您是否可以在iframe之外对父页面进行jQuery调用。那会是什么样子

编辑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(); 
 }); 
 })

我不知道脚本是否处于活动状态，因为表单提交成功，但目标没有发生任何变化

编辑3：

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

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

---

将下面的js放在iframe中，并使用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");
          });
       });

   });

});

---

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

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

---

然后对该div执行任何您想要的操作。

我认为问题可能是您找不到元素，因为在获取该元素的调用中出现了“#”：

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

只有在使用jquery时才需要#。这里应该是：

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

---

您可以使用以下命令从iframe中访问父窗口的元素：

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

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

这与：

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

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

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

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

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

这与：

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

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

---

目标div在父页面或iframe中？它在父页面中，因此我的问题基本上是，例如，您是否可以在iframe之外对父页面进行jquery调用。我是jquery新手，但我是否应该在ifram文件？$（document.ready（function（）{window.parent.document.getElementById（'#target'）中放入类似的内容$(“#target”）.load（“file.php”）}）；可能更像：$（document.ready（function（）{$（window.parent.document.getElementById（“target”））.load（“file.php”）；})；恐怕这不起作用。表单提交得很好，但目标div没有发生任何变化。它保持原样。嗯……可能需要保持表单不提交，直到您希望从iframe运行的javascript完成提交。因此（如果下面的代码有错误，很抱歉，在这样的代码块中编写它是一件痛苦的事情）：$（；“form”）.submit（函数（e）{e.preventDefault；window.parent.document.getElementById（'#target'）；$（“#target”）.load（“file.php”，函数（）{$（'form'）.submit（）}）它可以通过ajax提交表单，但目标div从一开始就保持不变。它似乎可以从iframe中与parent.php通信。如果iframe在同一个域中，则不会出现任何问题。您是否可以尝试提醒

window.parent.$（“#target”）.length

在成功处理程序中。iframe在同一个域中。我将该代码放在了window.parent.$（“#target”）.load（“urlofGetoload”）；但它没有返回任何内容。如果在代码中它是“form”，那么它应该是表单的名称吗？可能是吗？表单的名称是什么？put是

表单[姓名=表单名称]

代替

表单

在修改后的问题中你想做什么？如果网站容器和iframe位于不同的域上怎么办？@Michelem我认为你运气不好；要访问父级，iframe需要与父级具有相同的协议和域。这是防止跨域攻击的一种保护措施编写脚本。@Michelem：如果iframe和父元素位于不同的域上，则与父元素通信的唯一方法是使用window.postMessage（）。但只有在您可以控制两端时才可能。此处的文档：@Michelem是否有任何示例如何访问iframe中的父元素？我们可以使用window.postMessage（）进行操作但是我们想要访问元素并在iframe中使用它，这是一个很晚的示例窗口。postMessage（）在这里基于reactjs只是一个注释，使用jQuery与使用

getElementById

不同。可能会让新开发人员感到困惑