在 iframe 之外显示元素

问题描述 投票:0回答:5

是否可以从 iframe 显示 poshytip,以便它也显示在 iframe 之外? 例如。像溢出:可见..

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

注意! iframe 有固定高度!

像这样:

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

干杯!

javascript html css iframe
5个回答
12
投票

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

如果您想要工具提示,则必须放置工具提示来引用 iframe 本身。


4
投票

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

当然,如果两个框架/iframe 不违反同源策略,这是可以完成的。


1
投票

不幸的是,这是不可能的。

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

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


0
投票

正如已经提到的,使用 iFrame 不可能完成您所要求的操作,因为它本质上是一个单独的浏览器。您是否考虑过更改悬停时横幅的外观/反应?您可以轻松更改横幅图像并向用户显示一些信息。

由于根据您的说法,该广告将出现在您无法更改的网站上,因此您无权更改广告显示的页面;因此,您的广告本身需要具有完整的功能。


0
投票

为了解决这个问题,我定义了一个宽度/高度更大的iframe,并根据我实际需要的尺寸给iframe内部的主div设置了宽度/高度。因此,内部 div 可以包含从中出来的元素,虽然仍在 iframe 内部,但对于用户来说,它看起来像是在 iframe 外部。

<html>
    <body>
        <div style="background: gray; height: 300px; width: 300px;" >
            <iframe src="..." style="width: 200px; height: 200px;" >
                <html>
                    <body>
                        <div id="MainDivInTheFrame" style="border: 3px solid red; width: 100px; height: 100px;" >
                            <div>
                                all the main content of the iframe
                            </div>
                            <div style="position: absolute; bottom: 0; left: 0;" >
                                inside the iframe, but looks like it is outside the iframe
                            </div>
                        </div>
                    </body>
                </html>
            </iframe>
        </div>
    </body>
</html>

查看输出图像:

iframe 之外的元素

© www.soinside.com 2019 - 2024. All rights reserved.