如何使用拖动功能干净地调整 iFrame 的大小？答案

【问题标题】：How can I cleanly resize an iFrame with dragging functionality?如何使用拖动功能干净地调整 iFrame 的大小？
【发布时间】：2011-05-31 22:29:53
【问题描述】：

我有一个 iFrame，我希望用户能够抓住它的一侧并拖动它来调整它的大小。我不希望它实时调整大小，而是使用指示线，当用户释放时，它会调整大小。

我正在使用 jQuery。

有什么帮助吗？

【问题讨论】：

在 IFRAME 的边缘放置一些 DIV。在这些 DIV 上实现拖动功能。在 mouseup-handler 处，确定 DIV 位置并相应地设置 IFRAME 尺寸。

【解决方案1】：

Iirc，经典的方法是将 IFrame 放在一个 div 中，并使该 div 可重新调整大小；还将 iFrame 的宽度和高度设为 100%。

如果您使用的是 JQuery，您可以不使用 jQuery.load('uri') 代替 iFrame 吗？我相信它在许多情况下更可取。

【讨论】：

【解决方案2】：

从 2020 年开始，您只需将 CSS 属性 resize: both 或 resize: vertical 添加到 iframe 元素即可。

【讨论】：

【解决方案3】：

~~jQuery Resizable 根据您的要求提供关于最终尺寸的指示符。~~请参阅 Russ C 的评论并链接到更好的解决方案

【讨论】：

【解决方案4】：

http://jqueryui.com/demos/resizable/#visual-feedback

这似乎可以在 DIV 中使用 iFrame 来解决问题

【讨论】：