如何使用 jquery 访问 iFrame 父页面？答案

【问题标题】：how to access iFrame parent page using jquery?如何使用 jquery 访问 iFrame 父页面？
【发布时间】：2010-10-18 03:06:09
【问题描述】：

我有一个 iframe，为了访问父元素，我实现了以下代码：

window.parent.document.getElementById('parentPrice').innerHTML

如何使用 jquery 获得相同的结果？
更新：或者如何使用 jquery 访问 iFrame 父页面？

【问题讨论】：

另见stackoverflow.com/questions/12114243/…

标签： javascript jquery iframe

【解决方案1】：

在父窗口中放置：

<script>
function ifDoneChildFrame(val)
{
   $('#parentPrice').html(val);
}
</script>

并在 iframe src 文件中放置：

<script>window.parent.ifDoneChildFrame('Your value here');</script>

【讨论】：

【解决方案2】：

有多种方法可以做到这些。

I) 直接获取主父节点。

例如。然后我想将我的子页面替换为 iframe

var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);

这里 top.location 直接获取父级。

II）一一获取父母，

var element = $('.iframe:visible', window.parent.document);

如果您有多个 iframe，请在此处指定活动的或可见的。

你也可以这样做以获得更多的父母，

var masterParent = element.parent().parent().parent()

III) 通过标识符获取父级。

var myWindow = window.top.$("#Identifier")

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您需要在父文档中查找 jQuery 实例（例如，调用插件提供的实用函数），请使用以下语法之一：

window.parent.$
window.parent.jQuery

例子：

window.parent.$.modal.close();

jQuery 被附加到 window 对象上，这就是 window.parent 的含义。

【讨论】：

我将 iframe 用作用户控件。这让我保持整洁。

【解决方案5】：

在这里玩游戏可能有点晚了，但我刚刚发现了这个很棒的 jQuery 插件https://github.com/mkdynamic/jquery-popupwindow。它基本上使用了一个 onUnload 回调事件，因此它基本上会监听子窗口的关闭，并在那时执行任何必要的操作。所以真的不需要在子窗口中写任何JS传回给父窗口。

【讨论】：

【解决方案6】：

它对我来说很有效。在我的情况下，我必须将值从 POPUP JS 填充到 PARENT WINDOW 表单。

所以我用了$('#ee_id',window.opener.document).val(eeID);

太棒了！！！

【讨论】：

【解决方案7】：

是的，它也对我有用。

注意：我们需要使用 window.parent.document

    $("button", window.parent.document).click(function()
    {
        alert("Functionality defined by def");
    });

【讨论】：

【解决方案8】：

如何使用 jquery 访问 iFrame 父页面

window.parent.document.

jQuery 是一个基于 JavaScript 的库，而不是它的完全替代品。您不必将每一个 JavaScript 表达式都替换为涉及 $ 的内容。

【讨论】：

+1。 jQuery 很棒，但很多简单问题的答案似乎都是“使用 jQuery”。如果您仍然要加载库，那很好，但不要加载它一项任务。此外，人们似乎担心 JS 的性能，然后在 JS 之上使用 API 来轻松（并且可能更快）地完成没有 API 的事情。
@Grant 虽然我确实梦想 jQuery 成为浏览器中的原生代码。
@Blowski：那是我的噩梦！ jQuery 包含许多极其复杂和脆弱的“按我的意思做”代码，这些代码完全不适合放入官方 API。
@bobince：显然，您应该始终将所有 Javascript 替换为 jQuery。就像培根；不存在越少越好的情况。 ;)
OP 已经有 window.parent.document，所以这没有回答任何问题。并且想象选择器逻辑比元素的 ID 复杂得多，在这种情况下 jQuery 非常方便。我觉得问题是“我怎么用法语说'你好'？”这个答案是“说德语”。

【解决方案9】：

要在 iFrame 的父级中查找，请使用：

$('#parentPrice', window.parent.document).html();

$() 包装器的第二个参数是搜索的上下文。这默认为文档。

【讨论】：

酷 - 在他感谢你之前，你已经承认了感谢。 StackOverflow 可能存在时区问题？
你也可以这样做：$(window.parent.document).find("#parentPrice").html();
@belugabob 这是巫师的错。
对于那些使用window.open 启动windoid 的人，不要忘记那个旧的JS 标准window.opener.document。 $("#someDiv", window.opener.document) 有效。
这仅在 iframe 的源代码加载了 jQuery 时才有效。以我的经验，iframe 源没有 jQuery，但经常需要调用父级的 jQuery 函数之一。为此，请使用： window.document.$("#parentPrice").html() 这是 Álvaro G. Vicario 发布的答案。