使IFrame动态调整大小 [英] Make IFrames resizable dynamically
问题描述
我有以下HTML页面，其中有三个iframe。我想允许用户使用Javascript手动调整iframe的高度和宽度。
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>
推荐答案
您最好的选择是使用库来做这个，例如 jQueryUI Resizable - 有很多浏览器之间的怪癖这样做是正确的。特别是当您需要允许用户指定任意大小/调整大小时，可拖动的调整大小句柄几乎总是允许用户调整元素大小的最直观方式。如果您只是调整iframe的大小，那么直接设置iframe的宽度/高度应该没问题，但是这样做无法以直观的方式从用户那里获得新的宽度/高度。
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.
另见使用jQuery UI调整iFrame大小 - 您需要要将iframe包装在div中，请将iframe设置为height = 100％width = 100％，并使div可调整大小。如果您创建裸iframe Draggable，则拖动调整大小将无法正常工作。 （这是某些浏览器中的事件冒泡限制，而不是jQuery错误本身。）
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.)
这篇关于使IFrame动态调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
