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

Question

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

Answer 1

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

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

Answer 2

我找不到一种方法让框架的内容流出框架，但我确实找到了一种方法来破解它，将工具提示移动到父文档中并将其放在上面（z-index ）iframe。

方法是：
1）在父文档中找到iframe
2）从DOM中的工具提示元素中删除工具提示元素，并将其添加到包含iframe的元素内的父文档中。
3）您可能需要调整z-index和定位，具体取决于您最初的工作方式。

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

jQuery(tooltip).remove();
var iframeParent = jQuery("#the_id_of_the_iframe", parent.document)[0].parentNode;
iframeParent.appendChild(tooltip);
//adjust z-index, positioning

Answer 3

这可能不合适，因为它根据您的要求不合适，或者实际上可能没有帮助（！），但可能值得查看UFrame。它是iframe和div的混合体，可能被打包成一个小部件（你最好的选择是为客户提供一个<script>标签，它会吸收UFrame和相关的标记）。我不确定的是你是否能够实现你需要的叠加，但它可能值得一试。对不起，我不能更具体，但这不是我自己实际使用的东西，我只是暂时将它加入书签以供将来参考。

Answer 4

如果您知道工具顶部可以具有的绝对值，则可以创建一个div，即内容的高度+工具提示将显示的最大距离。将iframe与div的底部对齐。确保iframe和div是透明的。然后应显示带有工具提示的iframe内容。虽然这样可以让你自满，但是要确保突出显示的内容在所有浏览器中都能正常工作。

Answer 5

将您当前的iframe和建议的div嵌套在父iframe中，然后将您的父iframe放入第三方，两者都是最好的！

Answer 6

据我所知，无法做到。为什么不使用XHR请求并填充div呢？

Answer 7

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

快速上下文：

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

我们首先建议将我们的 UI 集成到他们网站上的 iframe 中，但这样数据就无法被 Google 等外部搜索引擎索引。 所以我们转而采用相反的原则：我们将他们网站的顶部菜单集成到我们 UI 中的 iframe 中。

问题：

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

解决方案：

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

然后在 JS 中：

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