Question

我有一个带旋转木马的页面。此轮播内容由八个iframe组成。旋转木马工作正常。我的问题是，在每个iframe中，我有一个动画。

这些动画会在页面加载后立即开始。我需要这些动画才能在每个动画的特定iframe出现时启动。

这是我的HTML：

<div class="container">
    <div class="row">
        <div id="carouselIframe" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators carousel-style">
                <li data-target="#carouselIframe" data-slide-to="0" class="active"></li>
                <li data-target="#carouselIframe" data-slide-to="1"></li>
                <li data-target="#carouselIframe" data-slide-to="2"></li>
                <li data-target="#carouselIframe" data-slide-to="3"></li>
                <li data-target="#carouselIframe" data-slide-to="4"></li>
                <li data-target="#carouselIframe" data-slide-to="5"></li>
                <li data-target="#carouselIframe" data-slide-to="6"></li>
                <li data-target="#carouselIframe" data-slide-to="7"></li>
            </ol>

            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <iframe width="1128" height="475" src="pages/page1/index.html" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="item">
                    <iframe width="1128" height="475" src="pages/page2/index.html" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="item">
                    <iframe width="1128" height="475" src="pages/page3/index.html" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="item">
                    <iframe width="1128" height="475" src="pages/page4/index.html" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="item">
                    <iframe width="1128" height="475" src="pages/page5/index.html" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="item">
                    <iframe width="1128" height="475" src="pages/page6/index.html" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="item">
                    <iframe width="1128" height="475" src="pages/page7/index.html" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="item">
                    <iframe width="1128" height="475" src="pages/page8/index.html" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

所有iframe在页面加载时初始化其内容（src）。我建议你在iframe变为活动状态时刷新src，导致动画重新开始。

ID DATE Diff 1 2001-09-27 137 1 2002-02-11 291 1 2002-11-29 360 1 2003-11-24 105 1 2004-03-08 0 2 2003-11-24 366 -- Notice Dupe Date 2 2003-11-24 366 -- Notice Dupe Date 2 2004-11-24 0 3 2006-11-24 365 3 2007-11-24 0

在以下问题中找到了此代码：How to refresh an IFrame using Javascript?

在iframe内容显示之前加载

1 个答案: