1

javascriptを介して別のiframeにiframeを重ねようとしています。

背景の iframe の幅と高さを 100% に維持したいのですが、2 番目の iframe は最初の iframe の中央に少し小さく表示したいと考えています。

現在、以下のように 2 つの 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

はい、できます。問題ありません。ここでの問題は、 frame2 を frame1 にロードしているときに、top and left属性を使用して中央に配置する必要があることです。

繰り返しますが、属性の使用法、すなわち: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 に答える