在 iframe 之外显示元素答案

【问题标题】：Display element outside of iframe在 iframe 之外显示元素
【发布时间】：2023-03-12 00:31:01
【问题描述】：

是否可以从 iframe 显示 poshytip，以便它也显示在 iframe 之外？例如。喜欢溢出：可见..

如果不是，那么显示父文档的 poshytip 并将其相对于我的内容定位有多难？什么是浏览器安全措施？

注意！ iframe 有一个固定高度！

像这样：

    +----------------------------+
    |         POSHYTIP           |
    |                            |
    |                            |
    |                            |
    +--\  /----------------------+
+-------\/---------------------------------------------------------+
|             IFRAME BANNER                                        |
|                                                                  |
|                                                                  |
+------------------------------------------------------------------+

干杯！

【问题讨论】：

我认为这是不可能的，如果我错了，它很可能不是一个很好的解决方案。但是，您是否有理由不能让工具提示向下而不是向上？还是有理由必须使用 iframe？
这取决于横幅位置。如果横幅在页面顶部，那么我应该向下并在页面底部，它应该向上。
不可能。将 iFrame 视为驻留在文档中的单独浏览器窗口。无法完成。
您只是在 iframe 中展示广告吗？您是否有理由必须使用 iframe？
是的，它在其他网站上。将其视为 iframe 广告。

标签： javascript html css iframe

【解决方案1】：

这是不可能的。 iFrame 本质上是文档内引用其他页面的单独浏览器窗口。（如你所说，它是一个广告横幅模块。）

如果您需要工具提示，则必须放置工具提示以引用 iframe 本身。

【讨论】：

但是我可以通过 iframe 来实现吗？我可以让工具提示本身引用到 iframe 吗？
@Kristian 显示 iframe 的页面必须将 toolitp 连接到整个 iframe，您将无权执行此操作对吗？
@rlemon：这正是我们的目标:)
@rlemon 这就是凯尔推荐的；但是，这似乎是不可能的，因为这将是另一个人网站上的广告。您必须能够编辑此人的网站才能添加这样的工具提示。

【解决方案2】：

我认为这是可能的，但它并不简单明了。您可以修改/扩展将工具提示元素附加到 window.parent.body 的插件。将其设为绝对位置并计算位置。

当然，如果两个框架/iframe 都没有违反同源策略，则可以这样做。

【讨论】：

这将是一个将在其他网站上的广告？你如何建议他这样做？并不是每个人都想在他们的网站上放一大段代码，这样广告才能定期正确显示。
@Alex DN：真的很想看看你会怎么做。
@Mark 我已经在另一个上下文中做过了......我只是使用了类似 $("#mydiv").appendTo($(window.parent.body));但当然它可以在相同的域上工作。在外部模块的情况下，它可能更复杂（使用 window.postMessage）并且只有在双方同意的情况下。一方将发送消息，另一方将处理该消息。

【解决方案3】：

很遗憾，这是不可能的。

<iframe> 是另一个单独的浏览器窗口。这只是通过您的父文档“查看”该 Web 文档内部的一种方式。它与普通的不同，您可以将元素扩展到其边距之外。

此外，其他网站能够将内容放置在其给定空间之外被认为是一个安全漏洞。

【讨论】：

【解决方案4】：

如前所述，使用 iFrame 不可能完成您的要求，因为它本质上是一个单独的浏览器。你有没有想过改变悬停时横幅的外观/反应？您可以轻松更改横幅图像并向用户显示一些信息。

由于这是您所说的将在您无法更改的网站上投放的广告，因此您将无权更改显示广告的页面；因此，您的广告需要完全发挥作用。

【讨论】：