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

267

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

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

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

javascript jquery iframe

— 阿姆·埃尔加希（Amr Elgarhy）
source

另请参见stackoverflow.com/questions/12114243/...

— 亚历克西斯维尔克

489

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

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

$（）包装器的第二个参数是要在其中搜索的上下文。默认为文档。

— 皮姆·贾格（Pim Jager）
source

18

太酷了-在他感谢您之前，您已经感谢了他。StackOverflow的时区有问题吗？

— belugabob 2010年

21

您也可以这样做：$（window.parent.document）.find（“＃parentPrice”）。html（）;

— jhorback 2010年

@belugabob这是一个怪人的错。

— Erik Escobedo

1

对于那些使用window.open启动windoid的人，请不要忘记那个旧的JS标准window.opener.document。$（“＃someDiv”，window.opener.document）有效。

— jjohn

2

仅当iframe的源已加载jQuery时，此方法才有效。以我的经验，iframe源将没有jQuery，但通常需要调用父级的jQuery函数之一。为此，请使用：window.document。$（“＃parentPrice”）。html（）这是ÁlvaroG. Vicario发布的答案。

— David Kinkead 2014年

39

如何使用jQuery访问iFrame父页面

window.parent.document。

jQuery是JavaScript之上的库，而不是它的完整替代品。您不必用涉及$的内容替换所有最后的JavaScript表达式。

— 博宾斯
source

6

+1。jQuery很棒，但是许多简单问题的答案似乎都是“使用jQuery”。如果仍然要加载库，那很好，但是不要加载一项任务。同样，人们似乎担心JS性能，然后在JS之上使用API来轻松地（并且可能更快）地执行不需要API的事情。

— Grant Wagner，2009年

1

@Grant虽然我确实梦想过jQuery成为浏览器内部的本机代码。

— Dan Blows

3

@Blowski：那是我的噩梦！jQuery包含许多极其复杂和脆弱的“按我的意思”代码，这些代码完全不适合放入正式的API中。

— bobince 2011年

1

@bobince：显然，您应该始终将所有Javascript替换为jQuery。就像培根；少有更好的情况。;）

— 兆瓦。

2

OP已经有了window.parent.document，所以它什么也没回答。并想象选择器逻辑比元素的ID复杂得多，在这种情况下jQuery非常有用。我觉得问题是“我怎么用法语说'你好'？” 这个答案是“说德语”。

— Grantwparks 2014年

13

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

window.parent.$
window.parent.jQuery

例：

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

jQuery被附加到window对象上，这就是事实window.parent。

— 阿尔瓦罗·冈萨雷斯（ÁlvaroGonzález）
source

我将iframe用作用户控件。这让我保持它的干净整洁。

— 丹·伦道夫

11

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

— 阿姆
source

7

在父窗口中放：

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

并在iframe src文件中放入：

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

— 斯蒂文
source

5

是的，它也对我有用。

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

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

— Yogesh Gandhi
source

5

它对我来说几乎没有什么变化。就我而言，我必须将POPUP JS中的值填充到PARENT WINDOW表单中。

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

优秀的！！！

— Hitesh Patel
source

3

在这里玩游戏可能会晚一点，但是我刚刚发现了这个很棒的jQuery插件https://github.com/mkdynamic/jquery-popupwindow。它基本上使用onUnload回调事件，因此它基本上侦听子窗口的关闭，并在该时刻执行任何必要的操作。因此，实际上无需在子窗口中编写任何JS来传递回父窗口。

— cj5
source

1

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

I）直接获得主要父母。

考试。我想将我的子页面替换为iframe，然后

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

在这里top.location直接获得父项。

II）一对一地成为父母，

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

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

您也可以像这样来吸引更多的父母，

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

III）通过标识符取得父母身份。

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

— 巴拉特
source