如何在单个容器中创建和管理多个 iframe？答案

【问题标题】：How to create and manage multiple iframes within a single container?如何在单个容器中创建和管理多个 iframe？
【发布时间】：2014-07-10 06:05:56
【问题描述】：

好的，伙计们，我想为我的网站创建一个小框，并在该框内创建投票网站链接的 iFrame。我希望它看起来与http://forums.scavengercraft.com/pages/vote/ 非常相似，页面的一部分是他们有 #1-5 的投票按钮，并且每个按钮都会拉出下一个 iframe。

我目前拥有的： http://jsfiddle.net/xDU9V/

<!DOCTYPE html>
<html>
<body>
    <div id="container">
    <div id="outerdiv">  
        <a href="innerdiv">Minestatus</a>
    <iframe id="innerdiv" width="900" height="560" src="https://minestatus.net/15952-factions-goldcraft-1-6-mob-arena-economy-auctions/vote" scrolling="yes" frameborder="0"></iframe>
        </div>
    </div>
</body>
</html>

基本上我想要做的是在顶部添加一个时髦的小导航栏，我目前有链接“Minestatus”，我希望每个按钮将不同的网站加载到 iframe 中。

感谢所有帮助！

【问题讨论】：

标签： javascript html css iframe containers

【解决方案1】：

您向我们展示的页面，使用滑块。每张幻灯片都包含一个带有 iframe 的 div。像这样的：

<div id="myVote" class="carousel slide">
      <div class="carousel-inner">
       <div class="item">
      <iframe src="http://minecraftservers.org/vote/64023" class="votebox" seamless="" frameborder="1" height="700" width="100%"></iframe>
       <div class="carousel-caption">
            <h4>Vote #1</h4>
            <p>Make sure you click the &gt; button to vote on all sites for more rewards!</p>
           </div>
      </div>
      <div class="item">
      <iframe src="http://topg.org/Minecraft/in-374381" class="votebox" seamless="" frameborder="1" height="700" width="100%"></iframe>
       <div class="carousel-caption">
            <h4>Vote #2</h4>
            <p>Make sure you click the &gt; button to vote on all sites for more rewards!</p>
           </div>
      </div> 
    <div class="item">
      <iframe src="http://minecraft-server-list.com/server/85519/vote/" class="votebox" seamless="" frameborder="1" height="700" width="100%"></iframe>
       <div class="carousel-caption">
            <h4>Vote #3</h4>
            <p>Make sure you click the &gt; button to vote on all sites for more rewards!</p>
           </div>
      </div>
      <div class="item active">
      <iframe src="http://minecraft-mp.com/server/6376/vote/" class="votebox" seamless="" frameborder="1" height="700" width="100%"></iframe>
       <div class="carousel-caption">
            <h4>Vote #4</h4>
            <p>Make sure you click the &gt; button to vote on all sites for more rewards!</p>
           </div>
      </div>
    <div class="item">
      <iframe src="https://minestatus.net/43246-scavenger-craft-pvp-dedicated-server/vote" class="votebox" seamless="" frameborder="1" height="700" width="100%"></iframe>
       <div class="carousel-caption">
            <h4>Vote #5</h4>
            <p>Make sure you click the &gt; button to vote on all sites for more rewards!</p>
           </div>
      </div>
      </div>
      <a class="carousel-control left votebox-control" href="#myVote" data-slide="prev">‹</a>
      <a class="carousel-control right votebox-control" href="#myVote" data-slide="next">›</a>

     </div>

使用 Firebug 调查它的页面！

【讨论】：

感谢您向我展示这一点！不过我想知道，如何让他们一次在框中显示一个 iframe？还有，他们是如何让他们全部轮换的，并在导航栏上有链接？
@user3674397 jsbin.com/jebot/1/edit ，现在只需将 iframe 放入每个选项卡中