1

我试图通过 javascript 在另一个 iframe 上覆盖一个 iframe。

我想将背景 iframe 保持为 100% 的宽度和高度，但第二个 iframe 我希望它看起来稍微小一些并且在第一个 iframe 的中心。

目前我试图将两个 iframe 设置如下，但这似乎不起作用..

<div id="iframe1" style="width=80%; height=50%;">
    <iframe id="gameIFrame" style="width=80%; height=50%;position:absolute;  z-index:1000;" seamless="seamless" src="http://www.guguncube.com" />
</div>

<div id="iframe2" style="width=30%; height=30%;" >
    <iframe id="gameIFrame2" style="width=30%; height=30%; position:absolute; " seamless="seamless" src="http://www.guguncube.com"/>
</div>

有任何想法吗？

4

2 回答 2

3

是的，可以做到，不是问题。您在这里遇到的问题是，当您在 frame1 中加载 frame2 时，您需要使用top and left属性将其居中。

同样， attrs 的用法即：seamless and zindex不是必需的。

这是完整的代码：

<iframe id="gameIFrame1" style="width: 200px; height: 200px;   display: block; position: absolute;" src="http://www.guguncube.com">
</iframe>

<iframe id="gameIFrame2" style="width: 100px; height: 100px; top: 50px;    left: 50px;    display: block;    position: absolute;" src="http://www.guguncube.com">
</iframe>

在这里找到小提琴：

http://jsfiddle.net/cxbmu/1/，您显然可以在其中看到您所期望的屏幕截图。

于 2013-08-14T14:07:29.820 回答
0

它工作得很好。

检查这个小提琴：http: //jsfiddle.net/VFNUa/

您可能需要指定：display:block;在您的 iframe 上。此外，在执行position:absolute;

不过请注意：重叠 iframe 可能不是一个好主意。iframe 是一个窗口内的孤岛，重叠会扼杀可用性。

于 2013-08-14T13:53:07.160 回答