【问题标题】: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 不可能完成您的要求,因为它本质上是一个单独的浏览器。你有没有想过改变悬停时横幅的外观/反应?您可以轻松更改横幅图像并向用户显示一些信息。

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

    【讨论】:

      猜你喜欢
      • 2012-09-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-18
      • 2018-01-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多