Question

我正在做一个网页，在这个网页中我把iframe放到了一个图像上，当我更改媒体查询时，我需要更改iframe中的内容，例如，如果我在min-width 900px，向我显示src="path/one.html"，如果我在in-width 1980px，请告诉我src="path/two.html"，请有人帮忙。

Answer 1

iframe{
    display: none;
}
@media (min-width: 900px) {
  #iframe1{ display: inline; }
}
@media (min-width: 1980px) {
  #iframe2{ display: inline; }
}

和

<iframe src="path/one.html" id="iframe1"></iframe>
<iframe src="path/two.html" id="iframe2"></iframe>

Answer 2

如果你想使用jquery，你可以这样做：

$(window).on('resize', function(){ /* resize event handler when user resizes the window */
    var windWidth =  $(window).width(); /* gets window width in pixel after resize */
    var iframe = $("#iframe1"); /* iframe dom element */

    if(windWidth >= 900 && windWidth < 1980){
        iframe.attr("src","path/one.html");  /*when window width between 900 and 1979*/
    }else if(windWidth >= 1980){  
        iframe.attr("src","path/two.html"); /*when window width 1980 and larger */
     }
})

更改媒体查询时调用iframe

2 个答案: