I have the following HTML page in which I have three iframes. I would like to allow users to resize the height and width of the iframes manually using Javascript.
<body>
<table>
<tr>
<td colspan="2" id = "freebase_td">
<iframe id = "freebase_frame" src="" width="100%" height="400px"></iframe>
</td>
</tr>
<tr>
<td align="left" id = "wiki_td">
<iframe id = "wiki_frame" src="" width="100%" height="400px"></iframe>
</td>
<td align="right" id = "imdb_td">
<iframe id = "imdb_frame" src="" width="100%" height="400px"></iframe>
</td>
</tr>
</table>
</body>
Your best bet really is to use a library to do this, such as jQueryUI Resizable -- there are a lot of inter-browser quirks with doing this right. Especially when you need to allow the user to specify an arbitrary size/resize, and a draggable resize handle is almost always the most intuitive way to allow users to resize an element. Setting the width/height of the iframe directly should be okay if you are just resizing the iframe, but that doesn't do anything to get the new width/height from the user in an intuitive way.
Also see Resizing iFrame with jQuery UI -- you need to wrap the iframe in a div, set the iframe to height=100% width=100%, and make the div resizable. Drag-to-resize will not work correctly if you make the bare iframe Draggable. (This is an event bubbling limitation in some browsers, not a jQuery bug per se.)