如何使用@media 和 display:none 只加载一个 IFRAME； CSS

Question

我正在使用@media CSS 根据设备视口宽度提供 3 种不同尺寸的页面。

我使用 3 所以根据屏幕宽度我隐藏 2 并显示 1

问题是，当我使用时，即使 iframe 在 display:none 内，它也会加载所有 3 个；

我只需要加载其中一个，主要是加载可见的那个，而不是其他两个隐藏的。

这里是 html

的例子

<div class='s1'>
<p>Full size page content here</p>
<iframe id='frame1' src="chat/flashchat.php" width="513" height="500">     </iframe>
<p> more full size page content here</p>

</div>

<div class='s2'>
<p>Medium size page content here</p>
<iframe id='frame1' src="chat/flashchat.php" width="513" height="500">    </iframe>
<p>More medium content here</p>


</div>

<div class='s3'>
<p>Small page content here</p>
<iframe id='frame1' src="chat/flashchat.php" width="320" height="500">    </iframe>
<p>More small page content here</p>

</div>

这里是 CSS:

@media handheld, screen and (min-width: 768px) {
.s2 {
display: none;
}
.s3 {
display: none;
}
.s1 {
display: block;
}

}

@media handheld, screen and (max-width:767px) and (min-width:513px) {
.s1 {
display: none;
}
.s3 {
display: none;
}
.s2 {
display: block;
}

}


@media handheld, screen and (max-width:512px)  {
.s1 {
display: none;
}
.s2 {
display: none;
}
.s3 {
display: block;
}


}

我认为 javascript 可能会提供一个解决方案，但我希望尽可能避免使用该方法。我只能允许这些 IFRAMES 中的一个加载，即使只显示一个 3 次加载搞乱了自动登录功能，因为它实际上加载了 3 次，即使它是隐藏的。

有什么解决这个问题的建议吗？

Answer 1

这是我使用的 JS：

$(document).on('ready', responsiveVideo);
$(window).on('resize', responsiveVideo);
function responsiveVideo() {
    var windowWidth = $(window).width();
    // Let's make sure that the appropriate video is visible
    $('.video-class-selector').each(function() {
        if ($(this).hasClass('.js__video-hack')) {
            return;
        }
        var isResponsiveVideo = $(this).parent('.video_mobile_wrapped').length,
            BREAKPOINT = 768;

        // Replace visible iframes with a proper iframe with a valid src attribute
        var $original = $(this).find('iframe');
        if ((isResponsiveVideo && windowWidth < BREAKPOINT) || (!isResponsiveVideo && windowWidth >= BREAKPOINT)) {
            var $clone = $original.clone();

            $clone.attr('src', $clone.attr('data-src'));
            $original.replaceWith($clone);

            $(this).addClass('js__video-hack');
        }
    });
}

我的 iframe 标记如下所示：

<div class="video-class-selector">
  <iframe data-src="..." ...></iframe>
</div>

响应式包裹在 div 中 class video_mobile_wrapped:

<div class='video_mobile_wrapped'>
    <div class="video-class-selector">
      <iframe data-src="..." ...></iframe>
    </div>
</div>

如何使用@media 和 display:none 只加载一个 IFRAME； CSS

how to only load one IFRAME using @media and display:none; CSS

javascript

css

media

iframe

hidden