使用jQuery UI调整iFrame大小

我有这个代码，它工作正常：

头

 $(document).ready(function() { $("#test").resizable({minHeight: 50, minWidth: 50}); });

身体

但是当我将“div”改为“iframe”时，我再也无法调整它了。

身体

当一次移动鼠标超过几个像素时，发现redsquare的演示有点不稳定。我已经应用了一些修改，有助于使resize更顺畅：

resize的奇怪之处似乎发生，因为mousemove事件不会从iframe中冒出来。只要浏览器能够跟上mousemove事件，在处理程序CSS中使用resize处理程序和大边框可以最大限度地减少iframe造成的影响。

以下代码为我工作顺利。

     jQuery UI Resizable - Default functionality

我认为这可能就是您要找的内容：将iframe中的内容放在div中。对于这个例子，我将给div一个“容器”的id。

 $('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");

我在这里登陆搜索Resize iframe ，但是这个问题是关于使用Jquery UI插件resize，我只是添加了一个答案，因此它可能对今后陷入此页面搜索调整iframe大小的人有所帮助。这可以仅使用CSS完成

 iframe { height: 300px; width: 300px; resize: both; overflow: auto; }

所有主流浏览器都有很好的支持。查看此链接以及浏览器支持