12

我有一个带有 iframe 的页面，其中包含一个 html 文档。我需要从该子文档中访问 iframe 的 id，并且我没有运气使用 jQuery。我的页面中的基本结构是这样的：

<div id="ContainingDiv">
  <iframe id="ContainingiFrame">
   <html>
     <head></head>
     <body>
     </body>
   </html>
  </iframe>
</div>

在我的 javascript 方法中，我可以<body>使用 jQuery 选择器获取标签中的任何内容，但无法检索 iframe 元素以调整其大小。我已经尝试了一些东西，但我承认我不是 jQuery DOM 导航方面的专家，尤其是在涉及 iframe 的情况下（iframe 与包含页面在同一个域中。）有没有办法可以做到这一点？

4

6 回答 6

24

根本不需要 jQuery。要获取父母的 body 对象，您可以这样做：

var parentBody = window.parent.document.body

如果它与运行代码的 iframe 位于同一域中，则一旦拥有该域，就可以在该对象上使用普通的 javascript：

window.parent.document.getElementById("ContainingiFrame").style.height = "400px";

或使用 jQuery：

$("#ContainingiFrame", parentBody).height("400");

这是一篇关于使用示例代码从 iframe 中调整 iframe 大小的文章：http ://www.pither.com/articles/2010/11/12/resize-iframe-from-within

并且，关于根据自己的内容调整 iframe 大小的相关问题/答案：Resizing an iframe based on content

于 2012-08-24T17:51:54.667 回答
11

要从iframe 访问父文档，您可以向选择器添加一个参数，默认为文档，但没有什么可以阻止您将上下文更改为 window.parent.document，如下所示：

$('#ContainingiFrame', window.parent.document).whatever();

或者在您的选择器之前添加它：

window.parent.$('#ContainingiFrame').whatever();
于 2012-08-24T17:51:40.373 回答
6

如果您没有有关 iframe 的信息（例如要查询的标识符），那么您希望使用窗口的frameElement，如下所示：

var iframe_tag_in_parent_window = window.frameElement;

现在您拥有 iframe 标记本身，并且可以直接在 JavaScript 中使用它。

要使用 jQuery 而不是纯 JavaScript，请使用以下内容：

var iframe_in_jquery = jQuery(window.frameElement, window.parent.document);

我们刚刚讨论了第一部分（window.frameElement）。第二部分是 jQuery 将在其中找到元素并包装它的上下文。这是我们当前窗口的父文档。

例如，如果您在iframe标签中有一个唯一的 id，您可以这样做：

var iframe_in_jquery = jQuery(window.frameElement, window.parent.document),
    id = iframe_in_jquery.attr("id");

如果您的 JavaScript 代码正在运行，现在id是标识符。iframe

PS 如果window.frameElement为 null 或未定义，那么您不在iframe.

PPS 请注意，要在父窗口中运行代码，您可能需要使用 ; 的父实例jQuery()。这是使用window.parent.jQuery(...). 如果您尝试参加trigger()活动，则尤其如此！

PPPS 确保使用window.frameElement，而不仅仅是frameElement......一些浏览器有些损坏，如果不完全合格，它们将无法始终访问正确的数据（尽管在 2016 年这个问题可能会得到解决？）

于 2016-04-06T08:08:17.300 回答
1

试试这个：

调整内部一些元素的大小iframe：

$('#ContainingiFrame', window.parent.document).find('#someDiv').css('height', '200px');

或者只是调整大小iframe：

$('#ContainingiFrame', window.parent.document).height('640');
于 2012-08-24T17:47:49.683 回答
0

试试这个：

$("#ContainingiFrame").contents().find("#someDiv");
于 2012-08-24T17:49:05.807 回答
0

如果你有一个元素的引用iframe并且需要找到它的父元素，iframe特别是当你有多个 iframe 时，这里是一种找到它的方法。

var $innerElement;//element inside iframe
var $iframeBody = $innerElement.closest('body');
var $parentIframe = $('iframe').filter(function () {
    return $(this).contents().find('body')[0] == $iframeBody[0];
});
于 2018-06-06T06:38:07.693 回答