javascript 使 IFrame 可动态调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7816372/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make IFrames resizable dynamically
提问by Saurabh Saxena
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.
我有以下 HTML 页面，其中有三个 iframe。我想允许用户使用 Javascript 手动调整 iframe 的高度和宽度。
<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>
回答by Thaeli
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.
最好的办法是使用一个库来做到这一点，比如jQueryUI Resizable—— 有很多浏览器间的怪癖要正确地做到这一点。特别是当您需要允许用户指定任意大小/调整大小时，可拖动调整大小手柄几乎总是允许用户调整元素大小的最直观方式。如果您只是调整 iframe 的大小，直接设置 iframe 的宽度/高度应该没问题，但这并不能以直观的方式从用户那里获得新的宽度/高度。
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.)
另请参阅使用 jQuery UI 调整 iFrame 的大小——您需要将 iframe 包装在 div 中，将 iframe 设置为 height=100% width=100%，并使 div 可调整大小。如果您将裸 iframe 设置为可拖动，则拖动调整大小将无法正常工作。（这是某些浏览器中的事件冒泡限制，而不是 jQuery 错误本身。）
回答by Gibron
I choose to avoid iFrames like a curse. I know this isnt exaclty what you asked for but check out jQueryUI's Resizable.
我选择像诅咒一样避免 iFrame。我知道这不是您所要求的，但请查看jQueryUI 的 Resizable。
If you change your foundational structure you might find this a much more scalable/long term solution.
如果您更改基础结构，您可能会发现这是一个更具可扩展性/长期的解决方案。
Note: Resizable can be applied to ANY DOM element!
注意：Resizable 可以应用于任何 DOM 元素！
回答by Anoop
$(function(){
$("table td").css({position:'relative'})
$("div.resizer").appendTo($("table td")).each(function(){
$(this).width(20);
$(this).height(20);
$(this).css({
position:"absolute",
top: $(this).parent().height() - 20,
left: $(this).parent().width() - 20
});
var resize = false;
var $td;
var pos;
$(this).mousedown(function(e){resize = true;$td =$(this).parent(); pos = {left:e.pageX,top:e.pageY});});
$(document).mousemove(function(e){
if( resize ){
$td.height( $td.height() + e.pageY - pos.top );
$td.width( $td.width() + e.pageX- pos.left);
}
});
$(document).mouseup(function(){
resize = false;
});
});
})();
回答by endyourif
Does this not work?
这不起作用吗？
document.getElementById('wiki_frame').style.width = '300px';
回答by crisc82
you don't need javascript for that in modern browsers. just a little html+css trick. encapsulate your iframe in a div with resize property enabled.
在现代浏览器中，您不需要 javascript。只是一点点 html+css 技巧。将您的 iframe 封装在启用调整大小属性的 div 中。
<div>
<iframe src="https://www.example.com/"></iframe>
</div>
<style>
div {
overflow: hidden;
resize: both;
}
iframe {
height: 100%;
width: 100%;
border: none;
}
</style>
