如何使用 HTML 将 iframe 放置在另一个相同宽度和高度的 iframe 上答案

【问题标题】：How to place an iframe over another iframe of same width and height using HTML如何使用 HTML 将 iframe 放置在另一个相同宽度和高度的 iframe 上
【发布时间】：2017-11-22 11:56:31
【问题描述】：

我正在尝试运行以下代码，以便每当我单击链接时，相应的页面都会显示在 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>

请帮助我克服它。

【问题讨论】：

标签： html iframe href

【解决方案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>

【讨论】：

w3schools.com">
w3schools.com" target="IFrame1">link1

quora.com " target="IFrame1">link2
确保链接有效。
链接有效，问题依然存在！而且我无法弄清楚出了什么问题！
嘿，告诉我一件事，quora 的有效链接是什么？ quora.com??我只尝试了这个链接。
如果你打开控制台你会看到一个错误https://www.quora.com/ does not permit cross-origin framing. 这意味着你不能在 iframe 中使用 quora.com。

【解决方案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 放在 iFrame 之上应该不成问题

【讨论】：