Javascript 如何使用@media仅加载一个IFRAME并显示：无；CSS

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

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

问题是，当我使用's时，即使iframe在display中，它也会加载所有3个：none

我只需要其中一个就可以加载，主要加载中可见的一个，而不是隐藏的另外两个

下面是一个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>

我认为javascript可能会提供一种解决方案，但如果可能的话，我希望避免使用这种方法。即使只显示一个iFrame，我也只能允许加载其中一个iFrame。3加载会弄乱自动登录功能，因为即使是隐藏的iFrame，实际加载了3次

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

以下是我使用的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');
        }
    });
}

$（文档）.on（'ready'，responsiveVideo）；
$（窗口）。打开（'调整大小'，响应视频）；
函数响应视频（）{
var windowWidth=$（window.width（）；
//让我们确保适当的视频是可见的
$（'.video类选择器'）。每个（函数（）{
if（$（this）.hasClass（'.js__video-hack'））{
返回；
}
var isResponsiveVideo=$（this）.parent（'.video\u mobile\u wrapped'）。长度，
断点=768；
//用具有有效src属性的适当iframe替换可见iframe
var$original=$（this.find（'iframe'）；
if（（isResponsiveVideo&&windowWidth<断点）| |（！isResponsiveVideo&&windowWidth>=断点））{
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\u mobile\u包装：

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

什么是“s”？e、 g.“我使用三个”为什么要加载iframe三次？它们不是都显示相同的内容吗？我遇到了这个问题，并求助于使用javascript加载和调整大小来手动检查适当的断点以及应该加载哪个iframe。不太理想，但我发现避免同时加载所有三个的唯一方法就是尝试和管理不同的大小viewports@ajkochanowicz3.

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