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

IT技术 javascript css iframe tooltip
2021-02-04 21:27:20

我有一个 UI 小部件,出于性能原因需要将其放入 IFRAME,因此我们可以轻松地将其联合到附属网站。小部件的 UI 包括显示在其他页面内容顶部的工具提示。请参阅下面的屏幕截图或访问该站点以查看其运行情况。有没有办法让 IFRAME 中的内容与父框架的内容重叠?

工具提示内容需要与父框架内容重叠

6个回答

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

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

但是,刚刚发现,<select>当元素的<option>容器长于 iFrame 的边框元素可以自然地流出包含 iFrame 的边框(以及其他包含元素)
2021-03-27 21:27:20

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

方法是:
1) 在父文档中找到 iframe
2) 从它在 DOM 中的位置删除工具提示元素,并将其添加到包含 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,定位
如果这两个文档来自不同的域,这将不起作用。
2021-03-13 21:27:20

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

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

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