在窗口調整大小的iframe的寬度調整大小

我想將一個iframe放在側邊欄旁邊。側欄有一個250像素的常量，我希望iframe的寬度可以填充屏幕的其餘部分。所以它的寬度將是窗口大小減去250px。我需要這個來動態改變。我堅持我現有的代碼。在窗口調整大小的iframe的寬度調整大小

<script type="text/javascript">$(window).resize(function() { 
    $('iframe').prepend(width:$(window).width()px;); 

}); 

</script> 
<div style="float:left;"><iframe src="iframe url" 
frameborder="0" 
noresize="noresize" id ="iframe" 
style="position:absolute; background:transparent; width:75%;height:100%;top:38px;border:none;padding:0;" /> 
</iframe> 
</div>

這是javascript和iframe。我究竟做錯了什麼？

來源

2012-09-14 Rusty Schmidt

使用此JS：

$(function() { 
    var newwidth = $(window).width() - 250; 
    $('iframe').css({width: newwidth+'px'}); 
}); 

$(window).resize(function() { 
    var newwidth = $(window).width() - 250; 
    $('iframe').css({width: newwidth+'px'}); 
});

你也應該讓周圍的DIV的位置是：相對於利用絕對定位的。

來源

2012-09-14 21:23:23 jtheman

工作完全上調整！你知道我如何使iFrame在加載時也具有這樣的寬度嗎？ –

@ user1604072看我的編輯 – jtheman

你真不可思議！非常感謝！！！ –

這將工作，以填補你有任何響應空間和保持原有的大小，如果屏幕更大： https://jsfiddle.net/koaab543/2/

我使用原來的高度和寬度來計算比例。然後通過css獲取當前寬度限制爲空間大小，並從中獲得新的高度。

高度/寬度= X/currentWidth

function responseveIframe() { 
 
    $('iframe').height(
 
    $('iframe').attr("height")/$('iframe').attr("width") * $('iframe').width() 
 
); 
 
} 
 

 
responseveIframe(); 
 

 
$(window).resize(function() { 
 
    responseveIframe(); 
 
});

iframe { 
 
    max-width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>

來源

2016-03-30 08:57:43 bets

在窗口調整大小的iframe的寬度調整大小

回答

相關問題