jquery - 将一个 iframe 覆盖在另一个 iframe 上

Question

我正在尝试通过 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>

有什么想法吗？

Answer 1

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

同样，不需要使用属性，即:seamless 和 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>

在这里找到 fiddle :

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