【问题标题】: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 放入每个选项卡中
    猜你喜欢
    • 2020-11-03
    • 1970-01-01
    • 2010-12-22
    • 1970-01-01
    • 2021-12-16
    • 2015-03-11
    • 2015-06-11
    • 2016-01-24
    • 2023-03-23
    相关资源
    最近更新 更多