从父窗口访问 iframe 中的 DOM 附加函数

Posted 2023-05-09

【中文标题】从父窗口访问 iframe 中的 DOM 附加函数

【英文标题】：Accessing a DOM attached function in an iframe from the parent window

【发布时间】：2015-02-17 11:30:36

【问题描述】：

这是我的问题：

iframe 在父窗口中打开； 在 iframe（js 文件）中加载的函数用于修改位于 iframe 中的 DOM；

在 iframe 中使用时，该功能运行良好：

$(DOMId).function();

我正在努力从父窗口做同样的事情，但没有成功...... 我总是得到 xxx。'function' 不是函数。

我尝试从加载的脚本中直接访问函数和变量，没有问题。例如： jQuery(iframeId)[0].contentWindow.direcfunction();

但我找不到在 iframe 中调用附加到 DOM 的函数的方法。 我尝试了很多东西，最新的是：

var iframeDOM = document.getElementById(iframeId).contentDocument.getElementById(DOMId); jQuery(iframeDOM).function();

有没有人解决这个问题？

【问题讨论】：

由于安全问题，如果您在不同的域中，则无法访问 iframe。

试试：document.getElementById(iframeId).contentDocument.$("#"+DOMId).function()

同域，没有跨域内容。

A. Wolff：返回 'document.getElementById(iframeId).contentDocument.$' 不是函数。

对不起：document.getElementById(iframeId).contentWindow.$("#"+DOMId).function() 并且仅在 iframe 加载后调用它，因此可以根据用例在 iframe onload 事件甚至窗口 onload 事件中设置

【参考方案1】：

我终于解决了。 A. Wolff 的查询是正确的：

document.getElementById("iframe").contentWindow.jQuery("#picker").colpick(...) 

最后一个问题是由于 colpick 的工作方式。它阻止了我让它立即工作。

感谢大家的帮助。

【参考方案2】：

我不确定 JQuery（虽然应该很容易），但是如果您尝试以下纯 javascript 会发生什么？

document.getElementById('yourIFrameID').contentWindow.yourFunctionInsideYourIFrame();

【讨论】：

我可以毫无问题地直接从 iframe 访问函数。确切地说，我正在使用 colpick 扩展。为了在 iframe 中初始化它，我在 iframe 中使用了 $(DomId).colpick(...) 。我找不到从父窗口在 iFrame 中初始化它的方法。我尝试了许多语法来获取 iframe 中的 DOM。但是每次我尝试将 .colpick(...) 应用于新的 DOM 语法时，它都会返回“colpick 不是函数”...

尝试调用我从您的父窗口中写的内容。如果在 IFrame 中声明了 colpick()，您应该能够从父级使用类似这样的内容调用它：document.getElementById('yourIFrameID').contentWindow.colpick();

colpick.js 的样子：(function ($) var colpick = function () ... (); $.fn.extend( colpick: colpick.init, ); )(jQuery);

这个怎么样：$('#yourIFrameID').contents().find("#yourDOMElementID").colpick(...);

您是立即尝试调用您的函数还是尝试将所有这些都包含在类似以下内容的内容中：$('#iframeID').load(function()...