如何使iframe可调整大小?

We have this group project and I was assigned to make a certain iframe resizable. I've been reading lots of forum posts since last week, and I found out that iframe itself can't be resizable.

我们有这个小组项目，我被指派做一个特定的iframe可调整。从上个星期以来，我一直在阅读大量的论坛帖子，我发现iframe本身是不能调整的。

Is there a way to make my iframe resizable?

有没有办法让我的iframe可调整?

7 个解决方案

#1

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之外的所有主要浏览器中都有很好的支持。

#2

Please follow the these step for Iframe resizeable:

请按照以下步骤进行Iframe可调整:

1. Create a div for resizeable. eg:

   为resizeable创建一个div。例如:

   <div class="resizable"></div>
   

2. Apply the style tag for style of 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%;
   }
   

3. Include jQuery & jQuery UI

   包括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>
   

4. Execute Resizable

   执行可调整大小的

   $(function () {
       $(".resizable").resizable({
           animate: true,
           animateEasing: 'swing',
           imateDuration: 500
       });
   });
   

#3

In case you haven't found the solution yet, I've had success with:

如果你还没有找到解决方案，我已经成功了:

Jquery:

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

我希望这有助于

#4

With jQuery UI...

与jQuery UI…

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 resizable plugin won't work on an iframe directly, wrap the iframe in a div and resize the div instead. The resize event in the code above ensures that the iframe resizes to match the div.

由于jQuery UI的可调整大小的插件不能直接在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 start and stop events cover the iframe up with another element during the resize, so that the resizable plugin can track mouse movement correctly.

这个方法还有一个问题，不过iframe不会将鼠标移动事件传递给父元素。要解决这个问题，开始和停止事件将在调整大小期间用另一个元素覆盖iframe，以便可调整大小的插件能够正确地跟踪鼠标移动。

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的大小。

#5

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:

JQUERY:

$(function() {
    $("#resizable").resizable();

    $("#resizable").resizable({
        resize: function(event, ui) {
            $("#myfr").css({ "height": ui.size.height,"width":ui.size.width});
        }
    });
});

#6

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.

例如，我有一些jQuery对话框，在犹他州的信息披露网站上就有。如果单击or的报表或语句，您将看到弹出一个对话框，其中包含一个iframe。希望它可以帮助。

#7

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>

form http://jqueryui.com/resizable/

形式http://jqueryui.com/resizable/