在窗口调整大小的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。我究竟做错了什么?
答
使用此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的位置是:相对于利用绝对定位的。
答
这将工作,以填补你有任何响应空间和保持原有的大小,如果屏幕更大: 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>
工作完全上调整!你知道我如何使iFrame在加载时也具有这样的宽度吗? –
@ user1604072看我的编辑 – jtheman
你真不可思议!非常感谢!!! –