使用 jQuery UI 调整 iFrame 的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1234144/
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
Resizing iFrame with jQuery UI
提问by
I have this code and it works fine:
我有这个代码，它工作正常：
Head
头
<script>
$(document).ready(function()
{
$("#test").resizable({minHeight: 50, minWidth: 50});
});
</script>
Body
身体
<div id="test" style="border: .1em solid black;">
</div>
However when I change my "div" into "iframe" I can't resize it anymore.
但是，当我将“div”更改为“iframe”时，我无法再调整它的大小。
Body
身体
<iframe id="test" style="border: .1em solid black;">
</iframe>
回答by Positronic Network
Found redsquare's demo a bit wonky when moving the mouse more than a few pixels at a time. I've applied a couple modifications that help make resizing a lot smoother:
一次移动鼠标超过几个像素时，发现 redsquare 的演示有点不稳定。我应用了一些修改，有助于使调整大小更顺畅：
<html>
<head>
<style type="text/css">
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 75px solid #EFEFEF; margin: -75px; }
</style>
<script type="text/javascript">
$(function() {
$("#resizable").resizable({
helper: "ui-resizable-helper"
});
});
</script>
</head>
<body>
<div class="demo">
<div id="resizable" class="ui-widget-content">
<iframe src="http://pastebin.me/f9ed9b9d36d17a7987e9cb670e01f0e2" class="ui-widget-content" frameborder="no" id="test" width="100%" height="100%" />
</div>
<div>
</body>
</html>
The weirdness of resizing seems to happen because mousemove events don't bubble up from within the iframe. Using a resize handler and a large border in the handler CSS minimizes the effect caused by the iframe as long as the browser can keep up with the mousemove events.
调整大小的奇怪之处似乎发生了，因为 mousemove 事件不会从 iframe 中冒出来。只要浏览器可以跟上 mousemove 事件，在处理程序 CSS 中使用调整大小处理程序和大边框可以最大限度地减少 iframe 造成的影响。
回答by Butani Vijay
Below Code Work for me in smooth way.
下面的代码以流畅的方式为我工作。
<!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.3/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.3/jquery-ui.js"></script>
<style>
#iframe {
width: 100%;
height: 100%;
border: none;
background: #eee ;
z-index: 1;
}
#resizable {
width: 100px;
height: 100px;
background: #fff;
border: 1px solid #ccc;
z-index: 9;
}
</style>
<script>
$(function() {
$('#resizable').resizable({
start: function(event, ui) {
$('iframe').css('pointer-events','none');
},
stop: function(event, ui) {
$('iframe').css('pointer-events','auto');
}
});
});
</script>
</head>
<body>
<div id="resizable">
<iframe src="test.html" id="iframe">
</div>
</body>
</html>
回答by Rajshekar Reddy
I landed up here for searchin Resize iframe, But this question is about resizing using Jquery UI plugin, I am just adding a answer so it might be helpful for someone in future who falls into this page searching to resize iframe.
This can be done using only CSS
我来到这里是为了 searchin Resize iframe，但是这个问题是关于使用 Jquery UI 插件调整大小的，我只是添加了一个答案，所以它可能对将来陷入此页面搜索以调整 iframe 大小的人有所帮助。这可以仅使用 CSS 来完成
iframe {
height: 300px;
width: 300px;
resize: both;
overflow: auto;
}
Also all the major browsers have good support. Check out this linkand also about the browser support
回答by user1282947
I think this might be what you are looking for: Place the content of whatever is in your iframe in a div. For this example I will give the div an id of "container".
我认为这可能就是您要寻找的内容：将 iframe 中任何内容的内容放在 div 中。对于这个例子，我会给 div 一个“容器”的 id。
$('#ID_iframe').css("height", "" + $('#ID_iframe').contents().find("#container").height() + "px");
