从 iframe 访问父窗口的元素

IT技术 javascript jquery ajax iframe
2021-02-03 20:23:53

我有一个我们可以调用的页面parent.php。在此页面中，我有一个iframe带有提交表单的表单，除此之外我还有一个 ID 为“目标”的 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(); 
 }); 
 })

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

编辑3：

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

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

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

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

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

window.parent.document.getElementById('target');
如果网站容器和 iframe 在不同的域上怎么办？
2021-03-13 20:23:53
@Michelem 我认为你不走运；为了您可以访问父级，iframe 需要具有与父级相同的协议和域。这是防止跨域脚本的保护措施。
2021-03-28 20:23:53
@Michelem：如果 iframe 和父级位于不同的域，与父级通信的唯一方法是使用 window.postMessage()。不过，这只有在您可以控制两端的情况下才有可能。文档在这里：developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
2021-03-28 20:23:53
已经晚了，但示例 window.postMessage() 在这里基于 reactjs dev.to/damcosset/...
2021-04-03 20:23:53
@michelem 是否有任何示例如何访问 iframe 中的父元素？我们可以用 window.postMessage() 做一些事情，但是我们想要访问元素并在 iframe 中使用它是什么？
2021-04-07 20:23:53

您可以使用以下方法从 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");
刚一说明，使用jQuery是不一样的使用getElementById。可能会让新开发者感到困惑👍
2021-04-01 20:23:53

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

   });

});
表格的名称是什么？放置就像form[name=nameOfYourform]代替form
2021-03-13 20:23:53
如果 iframe 在同一个域中，那么您不会有任何问题。您可以尝试window.parent.$("#target").length在成功处理程序中发出警报吗？
2021-03-19 20:23:53
您在修改后的问题中想做什么？
2021-03-19 20:23:53
可以通过ajax提交表单，但是目标div从一开始就保持原样。从 iframe 中与 parent.php 通信似乎不起作用。
2021-03-21 20:23:53
iframe 在同一个域中。好吧，我把代码放在而不是 window.parent.$("#target").load("urlOfThePageToLoad"); 但它什么也没返回。它在您的代码中说“表单”的地方，应该是表单的名称吗？会是这样吗？
2021-04-08 20:23:53

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

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

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

可能更像： $(document).ready(function() { $(window.parent.document.getElementById("target")).load("file.php")); });
2021-03-15 20:23:53
恐怕这行不通。表单提交得很好，但目标 div 没有任何反应。它保持原样。唔..
2021-03-28 20:23:53
我是 jquery 新手，但我应该在 ifram 文件中放入这样的内容吗？
2021-04-03 20:23:53
可能需要防止提交表单，直到您要从 iframe 运行的 javascript 完成提交。所以它会是这样的（对不起，如果下面的代码中有错误，把它写在这样的代码块中很痛苦）： $(;"form").submit(function(e){ e.preventDefault; window .parent.document.getElementById('#target'); $("#target").load("file.php", function() { $('form').submit(); }); })
2021-04-04 20:23:53
$(document).ready(function(){ window.parent.document.getElementById('#target'); $("#target").load("file.php"); });
2021-04-11 20:23:53
其它你可能感兴趣的问题
上一篇如何在 .js 文件中声明全局变量 下一篇有什么方法可以克隆 HTML5 画布元素及其内容？