@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 할당 만이 각 블록에서 다시 정의되므로 여기에서 작동합니다.

다음은 예외 작업 코드입니다 :

<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>