调整窗口大小上的iframe宽度 [英] Resizing an iframe's width on window resize

问题描述

我想在旁边放一个iframe。侧栏有一个250像素的常量，我希望iframe的宽度可以填充屏幕的其余部分。所以它的宽度将是窗口大小减去250px。我需要这个来动态改变。我坚持我现有的代码。

 < 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 =noresizeid =iframe
 style =position：absolute; background：transparent; width：75％; height：100％; top：38px; border：none; padding：0; /> 
< / iframe> 
< / div> 
  

这是javascript和iframe。我在做什么错了？

解决方案

使用这个JS：

<$ p $ b $（'iframe'）。css（{width：newwidth +} $（$'code> $（function（）{
var newwidth = $（window）.width 'px'}）;
}）;
$ b $（window）.resize（function（）{
var newwidth = $（window）.width（） - 250;
$（'iframe'）。css（ {width：newwidth +'px'}）;
}）;

您还应该制作周围的DIV位置：相对于使用绝对位置。

I want to put an iframe next to a sidebar. The sidebar has a constant with of 250px and I want the iframe's width to fill the rest of the screen. So it's width would be window size minus 250px. And I would need this to change dynamically. I'm stick with my existing code.

<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>

This is the javascript and the iframe. What am I doing wrong?

解决方案

Use this 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'});
});

You should also make the surrounding DIV position:relative to make use of the absolute positioning.

这篇关于调整窗口大小上的iframe宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！