CSS 如何使 iframe 可调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8117761/
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
How can I make an iframe resizable?
提问by amielopez
We have this group project and I was assigned to make a certain iframeresizable. I've been reading lots of forum posts since last week, and I found out that iframeitself can't be resizable.
我们有这个小组项目，我被指派做一些iframe可调整的大小。自上周以来，我一直在阅读大量论坛帖子，我发现它iframe本身无法调整大小。
Is there a way to make my iframeresizable?
有没有办法让我的iframe可调整大小？
回答by Nicole Sullivan
This can be done in pure CSS, like so:
这可以在纯 CSS 中完成，如下所示：
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
Set the height and width to the minimum size you want, it only seems to grow, not shrink.
将高度和宽度设置为您想要的最小尺寸，它似乎只会增长，而不是缩小。
Live example: https://jsfiddle.net/xpeLja5t/
现场示例：https: //jsfiddle.net/xpeLja5t/
This technique has good support in all major browsers except IE.
这种技术在除 IE 之外的所有主要浏览器中都有很好的支持。
回答by kuldeep raj
These steps will make an iframe resizable:
这些步骤将使 iframe 可调整大小：
Create a div for resizing. eg:
<div class="resizable"></div>Apply the style tag for style of div.
.ui-resizable-helper { border: 1px dotted gray; } .resizable { display: block; width: 400px; height: 400px; padding: 30px; border: 2px solid gray; overflow: hidden; position: relative; } iframe { width: 100%; height: 100%; }Include jQuery & jQuery UI
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css"rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>Execute
Resizable$(function () { $(".resizable").resizable({ animate: true, animateEasing: 'swing', animateDuration: 500 }); });
创建一个用于调整大小的 div。例如：
<div class="resizable"></div>为 div 的样式应用样式标签。
.ui-resizable-helper { border: 1px dotted gray; } .resizable { display: block; width: 400px; height: 400px; padding: 30px; border: 2px solid gray; overflow: hidden; position: relative; } iframe { width: 100%; height: 100%; }包含 jQuery 和 jQuery UI
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css"rel="stylesheet" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>执行
Resizable$(function () { $(".resizable").resizable({ animate: true, animateEasing: 'swing', animateDuration: 500 }); });
回答by Brilliand
With jQuery UI...
使用 jQuery 用户界面...
HTML:
HTML：
<div class="resizable" style="width: 200px; height: 200px;">
<iframe src="http://www.example.com/" style="width: 100%; height: 100%;"></iframe>
</div>
JavaScript:
JavaScript：
$(".resizable").resizable({
start: function(event, ui) {
ui.element.append($("<div/>", {
id: "iframe-barrier",
css: {
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
"z-index": 10
}
}));
},
stop: function(event, ui) {
$("#iframe-barrier", ui.element).remove();
},
resize: function(event, ui) {
$("iframe", ui.element).width(ui.size.width).height(ui.size.height);
}
});
jsFiddle: http://jsfiddle.net/B5vHQ/97/
jsFiddle：http: //jsfiddle.net/B5vHQ/97/
Explanation:
解释：
Since jQuery UI's resizableplugin won't work on an iframe directly, wrap the iframe in a div and resize the div instead. The resizeevent in the code above ensures that the iframe resizes to match the div.
由于 jQuery UI 的resizable插件不能直接在 iframe 上工作，请将 iframe 包装在 div 中并调整 div 的大小。resize上面代码中的事件确保 iframe 调整大小以匹配 div。
There's an additional problem with this method, however - iframes don't pass mouse movement events to their parent element. To work around that, the startand stopevents cover the iframe up with another element during the resize, so that the resizableplugin can track mouse movement correctly.
但是，此方法还有一个问题 - iframe 不会将鼠标移动事件传递给其父元素。为了解决这个问题，start和stop事件在调整大小期间用另一个元素覆盖 iframe，以便resizable插件可以正确跟踪鼠标移动。
For some reason, giving the wrapper div an explicit size is necessary for the resizing to work. In most cases, that means that the iframe needs the same size set, so thatit matches the size of the div right from the start.
出于某种原因，为调整大小工作需要为包装器 div 提供明确的大小。在大多数情况下，这意味着 iframe 需要设置相同的大小，以便从一开始就匹配 div 的大小。
回答by Sthe
In case you haven't found the solution yet, I've had success with:
如果您还没有找到解决方案，我已经成功：
Jquery:
查询：
$("#my-div-frame-wrapper").resizable({
alsoResize : '#myframe'
});
HTML:
HTML：
<div id="my-div-frame-wrapper">
<iframe id="myframe"></iframe>
</div>
I hope it helps
我希望它有帮助
回答by Mayur Borad
I found your solution:
我找到了你的解决方案：
HTML:
HTML：
<div id="resizable" class="ui-widget-content"
style="border-style:solid; height:400px; width:400px">
<h3 class="ui-widget-header">Resizable</h3>
<iframe src="test.aspx" id="myfr" scrolling="no"
frameborder="0" marginheight="0" marginwidth="0" >
Your Browser Do not Support Iframe
</iframe>
</div>
JQUERY:
查询：
$(function() {
$("#resizable").resizable();
$("#resizable").resizable({
resize: function(event, ui) {
$("#myfr").css({ "height": ui.size.height,"width":ui.size.width});
}
});
});
回答by uadrive
The best solution I've found is to set the width and height of the iframe to 100% and put the iframe within a div tag. This is the basic solution you see with tools like CKEditor.
我发现的最佳解决方案是将 iframe 的宽度和高度设置为 100%，并将 iframe 放在 div 标签中。这是您使用 CKEditor 等工具看到的基本解决方案。
For an example, I have some jQuery dialogs that do just that on the Utah's Disclosures Site. If you click on a report or statement of or, you'll see a dialog that pops up with an iframe in it. Hope it helps.
例如，我在Utah's Disclosures Site上有一些 jQuery 对话框可以做到这一点。如果您单击 or 的报告或语句，您将看到一个弹出的对话框，其中包含一个 iframe。希望能帮助到你。
回答by Vibhaas Srivastava
very easy,
好简单，
first -
第一的 -
add jquery and jquery-ui-
添加 jquery 和jquery-ui-
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
then -
然后 -
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
last -
最后的 -
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
Its done!
完成！
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Resizable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</body>
</html>
回答by Tino
It took more than 1 hour to find somethingwhich led me to a working solution:
- Pure CSS as it should be
- For all modern browsers with full flexbox support, like Firefox, Chrome, etc.
- Does not work for older browsers like IE10 and below, though
- 纯 CSS 应有的样子
- 适用于所有具有完全 flexbox 支持的现代浏览器，如 Firefox、Chrome 等。
- 但不适用于 IE10 及以下的旧浏览器
.resizer { display:flex; margin:0; padding:0; resize:both; overflow:hidden }
.resizer > .resized { flex-grow:1; margin:0; padding:0; border:0 }
.ugly { background:red; border:4px dashed black; }<div class="resizer ugly">
<iframe class="resized" src="https://wikipedia.org/"></iframe>
</div>In Chrome this solution still has some issues, as the resize handle (in the right bottom corner) is shown a bit subtle, and resizing often stops to follow the mouse, but in Firefoxyou can resize the iframenow using pure CSS, too.
在 Chrome 中，此解决方案仍然存在一些问题，因为调整大小手柄（在右下角）显示得有点微妙，并且调整大小通常会停止跟随鼠标，但在 Firefox 中，您也可以iframe使用纯 CSS调整现在的大小。
Wikipedia was the only URL I found which has no CSP against
iframe-embedding yet. If they ever add one, theiframebecomes empty and your Browser's console will log the CSP error. In this case, please update my answer with some working URL. Thanks.
维基百科是我发现的唯一一个没有针对
iframe-embedding 的CSP 的 URL 。如果他们添加了一个，则iframe变空并且您的浏览器的控制台将记录 CSP 错误。在这种情况下，请使用一些有效的 URL 更新我的答案。谢谢。
