javascript - 基于@mediascreen加载HTML文件

Question

祝大家星期一快乐。

我希望有人能帮助我解决我遇到的问题。在我今天进行更改之前，我在页面上运行了一个来自 Google Web Designer 的动画 - 但是我必须创建多个动画以适应不同的屏幕尺寸(不幸的是，GWD 尚不允许可缩放的动画)。

因此，我在 GWD 中创建了一些额外的动画，并将它们发布为 HTML 文件。以前我能够毫无问题地加载一个 html 文件，但现在我有 4 个不同的 html 文件，我试图根据 @media 屏幕 css 函数加载每个文件。

问题是，@media 查询成功地阻止了 div 在我指定的位置加载，但是页面只加载了我在下面列出的最后一个 html 文件。有什么想法吗？

我正在使用以下内容来加载 4 个 html 文件(“用户代理”样式表将前 3 个内部脚本加载为无:

<div id="animation_wrapper">
    <div id="frameContainer">
        <script type="text/javascript">
            onload = function () {
                var el = document.getElementById("frameContainer")
                el.innerHTML = "<iframe src=\"http://energyamplified.co.za/animation.html\"></iframe>"
            }
        </script>
    </div>
    <div id="frameContainer_medium">
        <script type="text/javascript">
            onload = function () {
                var el = document.getElementById("frameContainer_medium")
                el.innerHTML = "<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"
            }
        </script>
    </div>
    <div id="frameContainer_small">
        <script type="text/javascript">
            onload = function () {
                var el = document.getElementById("frameContainer_small")
                el.innerHTML = "<iframe src=\"http://energyamplified.co.za/animation_small.html\">    </iframe>"
            }
        </script>
    </div>
    <div id="frameContainer_very_small">
        <script type="text/javascript">
            onload = function () {
                var el = document.getElementById("frameContainer_very_small")
                el.innerHTML = "<iframe src=\"http://energyamplified.co.za/animation_very_small.html\">    </iframe>"
            }
        </script>
    </div>
</div>

CSS:

@media only screen and (min-width: 1367px) {
    /* Large Animation */
    #animation_wrapper {
        padding-top: 10%;
    }
    div #frameContainer {
        text-align: center;
        display: block;
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        height: 100%;
        padding-top: 0;
    }
    div #frameContainer iframe {
        width: 100%;
        height: 100%;
        padding-top: 15%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    div #frameContainer_medium {
        display: none;
    }
    div #frameContainer_small {
        display: none;
    }
    div #frameContainer_very_small {
        display: none;
    }
}
@media only screen and (min-width: 900px) and (max-width: 1366px) {
    /* Medium Animation */
    div #frameContainer {
        display: none;
    }
    div #frameContainer_medium {
        display: block;
    }
    div #frameContainer_small {
        display: none;
    }
    div #frameContainer_very_small {
        display: none;
    }
}
@media only screen and (min-width: 450px) and (max-width: 899px) {
    /* Small Animation */
    div #frameContainer {
        display: none;
    }
    div #frameContainer_medium {
        display: none;
    }
    div #frameContainer_small {
        display: block;
    }
    div #frameContainer_very_small {
        display: none;
    }
}
@media only screen and (min-width: 227px) and (max-width: 449px) {
    /* Very Small Animation */
    div #frameContainer {
        display: none;
    }
    div #frameContainer_medium {
        display: none;
    }
    div #frameContainer_small {
        display: none;
    }
    div #frameContainer_very_small {
        display: block;
    }
}

Answer 1

只有最后一个 onload 赋值在这里起作用，因为它在每个 block 中重新定义自己。

下面的代码应该可以工作:

<div id="animation_wrapper">                   
<div id="frameContainer">
<script type="text/javascript">
onload=function(){
var el1=document.getElementById("frameContainer")
el1.innerHTML="<iframe src=\"http://energyamplified.co.za/animation.html\"></iframe>"

var el2=document.getElementById("frameContainer_medium")
el2.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_medium.html\"> </iframe>"

var el3=document.getElementById("frameContainer_small")
el3.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_small.html\">    </iframe>"

var el4=document.getElementById("frameContainer_very_small")
el4.innerHTML="<iframe src=\"http://energyamplified.co.za/animation_very_small.html\">    </iframe>"

}
</script>
</div>
<div id="frameContainer_medium">
</div>
<div id="frameContainer_small">
</div>
<div id="frameContainer_very_small">
</div>
</div>