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 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/，您可以在其中看到您期望的屏幕截图。

Answer 2

它运作得很好。

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

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

时请仔细指定上/左位置

但请注意：重叠iframe可能不是一个好主意。 iframe意味着窗口内的岛屿，重叠会导致可用性丧失。

将iframe覆盖在另一个iframe上

2 个答案: