當我改變媒體查詢時調用iframe

-1

我正在做一個網頁，在這個網頁中，我把一個iframe白色圖像，當我改變媒體查詢時，我需要改變我的iframe中的內容，例如，如果我在min-width 900px，請給我看src="path/one.html"，如果我在in-width 1980px，請給我看src="path/two.html"，請有人幫忙。當我改變媒體查詢時調用iframe

來源

2014-12-04 Fernando Antunez

這將需要在Javascript來完成。您正在動態更改iframe的來源。一種使用CSS的方法是打開兩個iframe，但根據@media查詢隱藏一個。 – philtune 2014-12-04 21:24:21

任何想法我不知道JavaScript，我感謝幫助。 – 2014-12-04 21:26:25

穆斯曼的答案是我會做的。這隻使用HTML/CSS。 – philtune 2014-12-04 21:27:18

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>

來源

2014-12-04 21:25:00 Mooseman

從技術上講，這並不是改變了iframe的src，但沒有其他方式與CSS – Turnip 2014-12-04 21:26:15

如果你想使用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 */ 
    } 
})

來源

2014-12-04 22:55:53

當我改變媒體查詢時調用iframe

回答

相關問題