有没有办法让 IFRAME 中的内容溢出到父框架上？

Posted 2023-03-06

【中文标题】有没有办法让 IFRAME 中的内容溢出到父框架上？

【英文标题】：Is there a way to have content from an IFRAME overflow onto the parent frame?

【发布时间】：2010-09-15 15:35:25

【问题描述】：

出于性能原因，我有一个 UI 小部件需要放入 IFRAME 中，因此我们可以轻松地将其联合到附属网站。小部件的 UI 包括显示在其他页面内容顶部的工具提示。请参阅下面的屏幕截图或 go to the site 以查看它的实际效果。有没有办法让 IFRAME 中的内容与父框架的内容重叠？

【参考方案1】：

不，这是不可能的。忽略任何历史原因，现在它会被认为是一个安全漏洞——例如。许多网站将不受信任的内容放入 iframe（iframe 源是不同的来源，因此无法根据相同的来源策略修改父框架）。

如果此类不受信任的内容具有将内容放置在 iframe 范围之外的机制，则它可以（例如）在父框架的真实登录字段上放置“相同”的登录 div（或其他），从而窃取用户名/密码信息。这会很糟糕。

【讨论】：

刚刚发现，当<option> 容器长于 iFrame 的边框时，<select> 元素可以自然地流出包含 iFrame 的边框（以及其他包含元素）。跨度>

【参考方案2】：

我找不到让框架的内容流出框架的方法，但我确实找到了一种绕过它的方法，方法是将工具提示移动到父文档并将其放在上方 (z-index ) iframe。

方法是： 1) 在父文档中找到 iframe 2) 从 DOM 中的位置移除 tooltip 元素，并将其添加到包含 iframe 的元素内的父文档中。 3) 您可能需要调整 z-index 和定位，这取决于您最初的操作方式。

您可以使用 parent.document 访问 iframe 的父文档。

jQuery(工具提示).remove(); var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode; iframeParent.appendChild（工具提示）； //调整z-index，定位

【讨论】：

如果这两个文档来自不同的域，这将不起作用。

【参考方案3】：

这可能是因为它不适合您的要求，或者实际上可能没有帮助（！），但可能值得一试UFrame。它是 iframe 和 div 的一种混合体，可能会被打包为一个小部件（最好的办法是给客户一个<script> 标签，它会吸收 UFrame 和相关标记）。我不确定您是否可以实现所需的覆盖，但它可能值得一试。抱歉，我不能更具体，但这不是我自己实际使用过的东西，我只是在不久前将其添加为书签以供将来参考。

【参考方案4】：

如果您知道工具顶部可以具有的绝对值，您可以创建一个 div，它是内容的高度 + 工具提示将显示的最大距离。将 iframe 与 div 的底部对齐。确保 iframe 和 div 是透明的。然后应该显示带有工具提示的 iframe 内容。虽然这会让您自己为确保突出显示等功能在所有浏览器中都一样工作而头疼。

【参考方案5】：

将您当前的 iframe 和建议的 div 嵌套在父 iframe 中，然后将您的父 iframe 放入第 3 方，两全其美！

【参考方案6】：

据我所知，这是不可能的。为什么不使用 XHR 请求并填充 div？

【讨论】：

这就是我们目前正在做的事情，但是——如上所述——其中一项要求是允许第 3 方网站将 IFRAME 作为其页面上的小部件放入其中。当前的实现也在冻结 UI，但我相信我可以解决这个问题。

您可以简单地指定一个 XHR API 并允许其他人以他们认为合适的方式插入它（当然也允许他们禁用您的脚本，但就这样吧）。

只有在您真正信任内容/小部件时才会安全——iframe 的一个优点是它们可以有效地沙箱内容（由同源策略提供）

另外，一些 3rd 方网站是由非技术人员运营的，所以我们希望为他们做一个插入式解决方案（除了我们的 API 为更复杂的用户)。

【参考方案7】：

我已经找到了一种方法来解决类似的问题，但这要求能够对父内容进行一些修改。

快速上下文：

我正在管理一个网站，该网站通过我们自己的 API 获取与某些合作伙伴相关的一些数据，并通过许多过滤选项以一种很好的方式呈现这些数据。我们的一些合作伙伴有兴趣在他们自己的网站上显示这些数据，但是对于很多他们来说，开发他们自己的 UI 来显示 API 数据是他们负担不起的。

我们首先建议将我们的 UI 集成到他们网站上的 iframe 中，但这样数据就无法被 Google 等外部搜索引擎索引。 所以我们切换到相反的原则：我们将他们网站的顶部菜单集成到一个 iframe 中，该 iframe 放置在我们的 UI 中。

问题：

它们的标题菜单通常包含一些下拉子菜单。这些子菜单不能超出 iframe 高度并被截断。

解决方案：

将 iframe 设置在 css 位置“绝对”且 z-index 较高，因此 iframe 会覆盖父 UI。 在 iframed 内容中，识别可以溢出 iframe 框的对象的类（在我们的例子中，我们要求菜单所有者为这些元素添加特定的类名，但您可以处理现有的类名）。

然后在一个 JS 中：

获取 iframe 内容的高度（即不显示任何下拉列表的标题高度）。 将初始 iframe 高度设置为此高度。 以等于此高度的边距移动父 UI 内容，以免被默认 iframe 内容覆盖。 添加一个事件侦听器，当鼠标悬停在已识别的特定类上时，将 iframe 高度设置为 100%。在这种状态下，iframe 内容可以完全覆盖父内容。 添加一个事件侦听器，当鼠标离开特定类时，将 iframe 高度设置回其原始大小。在这种状态下，一切都恢复正常。