Question

老实说，我只是不知道该怎么做。我想从一个html文档访问两个站点。我需要一次只显示一个，这是我到目前为止所做的。

<!DOCTYPE html>
<html>
<body>

<iframe src="http://www.creeperhost.net">
<p>The current browser does not support iframes, or there is a problem with the              iframe source.</p>

<iframe src="http://cp.creeperhost.net">
<p>The current browser does not support iframes, or there is a problem with the iframe     source.</p>
</iframe>

<input type="button" name="CreeperPanel" value="CreeperPanel"><br>
<input type="button" name="CreeperHost" value="CreeperHost"><br>


</body>
</html>

我想在我选择输入按钮“CreeperHost”时显示带有src =“www.creeperhost.net”的iframe，当我点击“CreeperPanel”时显示反之亦然，仅显示src =“cp .creeperhost.net”。如果可以，我想知道如何而不是完全隐藏另一个窗口，使其在右下方变小。

Answer 1

这与showing a div的原理相同。

<iframe src="http://www.creeperhost.net" id="panel1"></iframe>
<iframe src="http://cp.creeperhost.net" id="panel2"></iframe>

<input type="button" name="CreeperPanel" value="CreeperPanel" onclick="showPanel1()">
<input type="button" name="CreeperHost" value="CreeperHost" onclick="showPanel2()">

<script type="text/javascript">
  function showPanel1() {
    document.getElementById('panel2').style.display = "none";
    document.getElementById('panel1').style.display = "block";
  }

  function showPanel2() {
    document.getElementById('panel1').style.display = "none";
    document.getElementById('panel2').style.display = "block";
  }
</script>

Answer 2

<style>
.bottom{
position : fixed;
bottom : 0px;
right   :0px;
width : 50px;
height : 50px;
overflow : hidden;
}

</style>

<iframe src="http://www.creeperhost.net" id="panel1" ></iframe>
<iframe src="http://cp.creeperhost.net" id="panel2" class="bottom"></iframe>

<input type="button" name="CreeperPanel" value="CreeperPanel" onclick="showPanel1()">
<input type="button" name="CreeperHost" value="CreeperHost" onclick="showPanel2()">

<script type="text/javascript">
 var panel1 = document.getElementById('panel1'),
     panel2 = document.getElementById('panel2');

  function showPanel1() {
       panel1.className = "";
       panel2.className = "bottom";
  }

  function showPanel2() {
       panel2.className = "";
       panel1.className = "bottom";
  }
</script>

Answer 3

试试这个小提琴：

http://jsfiddle.net/ky7X5/5/

function showPanel(a,b)
{
    document.getElementById(a).style.display="inline-block";
    document.getElementById(b).style.display="none";
}

如何使用按钮隐藏或显示iframe？

3 个答案: