我有一个 UI 小部件，出于性能原因需要将其放入 IFRAME 中，因此我们可以轻松地将其联合到附属网站。小部件的 UI 包括显示在其他页面内容顶部的工具提示。请参阅下面的屏幕截图或访问该站点以查看它的运行情况。有没有办法让 IFRAME 中的内容与父框架的内容重叠？
42081 次
7 回答
88
不，这是不可能的。忽略任何历史原因，现在它会被认为是一个安全漏洞——例如。许多网站将不受信任的内容放入 iframe（iframe 源是不同的来源，因此无法根据相同的来源策略修改父框架）。
如果此类不受信任的内容具有将内容放置在 iframe 范围之外的机制，则它可以（例如）在父框架的真实登录字段上放置一个“相同的”登录 div（或其他），从而窃取用户名/密码信息. 这会很糟糕。
于 2008-10-06T23:24:39.753 回答
11
我找不到让框架的内容流出框架的方法，但我确实找到了一种绕过它的方法，将工具提示移动到父文档中并将其放在 iframe 上方（z-index） .
方法是：
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，定位
于 2011-05-09T16:00:49.870 回答
1
这可能是因为它不适合您的要求，或者它实际上可能没有帮助（！），但它可能值得一试 UFrame。它是 iframe 和 div 的一种混合体，可能会被打包为一个小部件（最好的办法是给客户一个<script>标签，它会吸收 UFrame 和相关标记）。我不确定您是否可以实现所需的覆盖，但它可能值得一试。抱歉，我不能更具体，但这不是我自己实际使用过的东西，我只是在不久前将其添加为书签以供将来参考。
于 2008-10-06T23:29:49.260 回答
1
如果您知道工具顶部可以具有的绝对值的顶部，则可以创建一个 div，它是内容的高度 + 工具提示将显示的最高距离。将 iframe 与 div 的底部对齐。确保 iframe 和 div 是透明的。然后应该显示带有工具提示的 iframe 内容。尽管这让您自己为确保突出显示等内容在所有浏览器中都一样工作而感到头疼。
于 2008-10-06T23:32:45.777 回答
1
将您当前的 iframe 和建议的 div 嵌套在父 iframe 内，然后将您的父 iframe 放入第 3 方，两全其美！
于 2015-07-05T23:28:12.013 回答
0
据我所知是做不到的。为什么不使用 XHR 请求并填充 div 呢？
于 2008-10-06T23:14:53.610 回答
0
我已经找到了解决类似问题的方法，但这要求能够对父内容进行一些修改。
快速上下文：
我正在管理一个网站，该网站通过我们自己的 API 获取与某些合作伙伴相关的一些数据，并通过许多过滤选项以一种很好的方式呈现它。我们的一些合作伙伴有兴趣在他们自己的网站上显示这些数据，但开发他们自己的 UI 来显示 API 数据对于他们中的很多人来说是他们负担不起的。
我们首先建议将我们的 UI 集成到他们网站上的 iframe 中，但这样数据无法被外部搜索引擎（如 Google）索引。所以我们切换到相反的原则：我们将他们网站的顶部菜单集成到放置在我们 UI 中的 iframe 中。
问题：
他们的标题菜单通常包含一些下拉子菜单。这些子菜单不能超出 iframe 高度并被截断。
解决方案：
- 将 iframe 在 css 位置设置为“绝对”，并具有高 z-index，因此 iframe 会覆盖父 UI。
- 在 iframed 内容中，识别可以溢出 iframe 框的对象的类（在我们的例子中，我们要求菜单所有者为这些元素添加特定的类名，但您可以处理现有的类名）。
然后在一个JS中：
- 获取 iframe 内容的高度（因此标题的高度没有显示任何下拉列表）。
- 将初始 iframe 高度设置为此高度。
- 以等于此高度的边距移动父 UI 内容，以免被默认 iframe 内容覆盖。
- 添加一个事件侦听器，当鼠标悬停在已识别的特定类上时，将 iframe 高度设置为 100%。在这种状态下，iframe 内容可以完全覆盖父内容。
- 添加一个事件侦听器，当鼠标离开特定类时，将 iframe 高度设置回其原始大小。在这种状态下，一切都恢复正常。
于 2021-02-03T15:04:20.017 回答