从iframe访问父窗口元素

Question

我有一个页面，我们可以称之为parent.php。在这个页面中，我有一个带有提交表单的iframe，在它外面有一个ID为"target"的

。是否可以提交iframe中的表单，并在成功后刷新目标div。比如说把一个新页面加载到它里面？

编辑： 目标

在父页面中，所以我的问题基本上是，如果你可以为父元素创建一个jQuery调用，从而使其在iframe外部运行。这该怎么做呢？

编辑2： 这是我现在的jquery代码的样子。它在iframe页面的中。目标

在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>

- Paparappa

---

目标 div 在父页面还是 iframe 中？ - ShankarSangoli

它在父页面中，所以我的问题基本上是，您是否可以例如在iframe之外为父级创建一个jquery调用。 - Paparappa

Answer 1

我认为问题可能是你在获取元素时使用了"#"导致找不到元素:

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

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

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

- barclay

---

如果网站容器和 iframe 处于不同的域名下，会发生什么？ - michelem

@Michelem，我想你没有什么好运了; 为了让您可以访问父级，iframe需要具有与父级相同的协议和域。 这是一种保护措施，以防止跨域脚本。 - Jon Onstott

如果 iframe 和 parent 在不同的域名下，与 parent 进行通信的唯一方式是使用 window.postMessage()。不过这只有在你控制两端时才可能实现。有关详细信息，请参阅此文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage。 - Pål Jørgensen

@michelem 有没有关于如何在iframe内访问父元素的示例？我们可以使用window.postMessage()做一些事情，但是如果我们想要访问该元素并在iframe中使用它怎么办呢？ - Vishal

虽然已经很晚了，但是基于ReactJS的示例window.postMessage()已经到位了。https://dev.to/damcosset/iframes-and-communicating-between-applications-31k5 - Chetan Jain

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

- Amr

---

只是提醒一下，使用jQuery并不等同于使用getElementById。这可能会让新开发人员感到困惑。 - alistair

Answer 3

将以下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");
          });
       });

   });

});

- ShankarSangoli

---

通过ajax提交表单是有效的，但目标div从一开始就保持不变。似乎无法从iframe内部与parent.php通信。 - Paparappa

如果iframe在同一域中，那么您将不会遇到任何问题。您可以尝试在成功处理程序中发出警报window.parent.$("#target").length。 - ShankarSangoli

iframe在同一域中。我把那段代码放进去代替window.parent.$("#target").load("urlOfThePageToLoad")，但是没有返回任何结果。你的代码中“form”所指的是表单的名称吗？可能是这个原因吗？ - Paparappa

表单的名称是什么？请将其替换为 form[name=nameOfYourform] 中的 form。 - ShankarSangoli

你在修改后的问题中想要做些什么？ - ShankarSangoli

Answer 4

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

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

然后你可以随意使用那个div。

- varfoo

---

我是一个jQuery新手，但我应该把这样的东西放在iframe文件中吗？ - Paparappa

$(document).ready(function(){ window.parent.document.getElementById('#target'); $("#target").load("file.php"); }); - Paparappa

可能更像是：$(document).ready(function() { $(window.parent.document.getElementById("target")).load("file.php")); }); - varfoo

很抱歉，这个好像不起作用。表单提交成功了，但是目标 div 没有任何变化，仍然保持原样。嗯... - Paparappa

可能需要在 JavaScript 从 iframe 完成提交之前保留表单的提交。因此，代码应该类似于以下内容（如果下面的代码有错误，请见谅，像这样在代码块中编写是很麻烦的）：$(;"form").submit(function(e){ e.preventDefault; window.parent.document.getElementById('#target'); $("#target").load("file.php", function() { $('form').submit(); }); }) - varfoo

请检查我的第一篇帖子，这是您想要的吗？ - Paparappa