HTMLを使用して同じ幅と高さの別のiframeにiframeを配置する方法

Question

リンクをクリックするたびにiframeにそれぞれのページが表示されるように、次のコードを実行しようとしています。 iframesをオーバーレイしようとしていますが、コードが期待どおりに動作していないようです。

<iframe name="IFrame1" style="width: 200px; height: 200px; display: block;position: relative;" src="https://www.link1.com"></iframe> 
 

 
<iframe name="IFrame2" style="width: 200px; height: 200px; top: 10px;left: 10px;display:block;position: absolute;" src="http://www.link2.com"></iframe> 
 

 

 
<p><a href="https://www.link1.com" target="IFrame1">link1</a></p> 
 
<p><a href="http://www.link2.com" target="IFrame2">link2</a></p>

親切に私はそれを乗り越えるのに役立ちます。

Answer 1

シングルiframeのみを使用できます。一般に

<iframe name="IFrame1" style="width: 200px; height: 200px; display: block; 
 
position: relative;" src="https://www.link1.com"> 
 
</iframe> 
 

 

 
<p><a href="https://www.link1.com" target="IFrame1">link1</a></p> 
 
<p><a href="http://example.com/" target="IFrame1">link2</a></p>

Answer 2

iframe { 
 
    width:200px; 
 
    height:200px; 
 
    position:absolute; 
 
    border:solid 1px #000; 
 
} 
 

 

 
#front { 
 
    position:absolute; 
 
    border:solid 1px #000; 
 
    width:100px; 
 
    height:100px; 
 
    left:120px; 
 
    top:120px; 
 
    background:#f00; 
 
    box-shadow:0 0 10px #666; 
 
    
 
}

<iframe src="https://www.link1.com"></iframe> 
 
<div id="front"> 
 
<iframe src="https://www.link1.com"></iframe></div>

は、DIVは、