在窗口调整大小的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的宽度调整大小

回答

相关问题