How can I cleanly resize an iFrame with dragging functionality?

I have an iFrame and I want the user to be able to grab one side of it and drag it to resize it. I don't want it to resize realtime, but rather use an indicator line and when the user releas开发者_开发问答es, it'll resize.

I'm using jQuery.

Any help?

Iirc, the classical method is to put the IFrame inside of a div and make that div re-sizable; also make the iFrame's width and height at 100%.

If you're using JQuery though, can you not use jQuery.load('uri') instead of an iFrame ? I believe it's preferable in many situations.

As of 2020 you can simply add the CSS property resize: both or resize: vertical to the iframe element.

jQuery Resizable with an indicator as to the eventual dimensions as per your request. See Russ C's comment and link to a better solution

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

That seems to do the trick with an iFrame inside a DIV