Question

我们有这个小组项目，并且我被指派使某个iframe可调整大小。自上周以来，我一直在阅读很多论坛帖子，我发现iframe本身无法调整大小。

有没有办法让我的iframe可以调整大小？

Answer 1

这可以在纯CSS中完成，如下所示：

iframe {
  height: 300px;
  width: 300px;
  resize: both;
  overflow: auto;
}

将高度和宽度设置为您想要的最小尺寸，它似乎只会增长，而不是缩小。

实例：https://jsfiddle.net/xpeLja5t/

此技术有good support in all major browsers except IE。

Answer 2

这些步骤将使iframe可调整大小：

创建一个用于调整大小的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＆amp; 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
    });
});

Answer 3

使用jQuery UI ...

<强> HTML：

<div class="resizable" style="width: 200px; height: 200px;">
    <iframe src="http://www.example.com/" style="width: 100%; height: 100%;"></iframe>
</div>

<强> 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/

说明：

由于jQuery UI的resizable插件不能直接在iframe上工作，请将iframe包装在div中，然后重新调整div的大小。上面代码中的resize事件可确保iframe调整大小以匹配div。

此方法存在其他问题，但iframe不会将鼠标移动事件传递给其父元素。要解决此问题，start和stop事件会在调整大小期间使用其他元素覆盖iframe，以便resizable插件可以正确跟踪鼠标移动。

出于某种原因，为了调整大小工作，必须给包装器div一个明确的大小。在大多数情况下，这意味着iframe需要相同的大小集，以便从一开始就匹配div的大小。

Answer 4

如果您还没有找到解决方案，我已经取得了成功：

Jquery的：

$("#my-div-frame-wrapper").resizable({
    alsoResize : '#myframe'
});

HTML：

<div id="my-div-frame-wrapper">
    <iframe id="myframe"></iframe>
</div>

我希望它有所帮助

Answer 5

我找到了你的解决方案：

<强> 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});
        }
    });
});

Answer 6

我发现的最佳解决方案是将iframe的宽度和高度设置为100％，并将iframe放在div标签中。这是您使用CKEditor等工具看到的基本解决方案。

举个例子，我有一些jQuery对话框可以在Utah's Disclosures Site上执行此操作。如果单击或的语句或语句，您将看到一个弹出对话框的对话框。希望它有所帮助。

Answer 7

to find something用了超过1个小时才使我找到了可行的解决方案：

应该是纯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>

在Chrome中，此解决方案仍然存在一些问题，因为调整大小手柄（位于右下角）显示得有些微，并且调整大小通常会停止跟随鼠标，但是in Firefox可以调整{{ 1}}现在也使用纯CSS。

维基百科是我发现的唯一没有针对iframe嵌入的CSP的URL。如果他们添加了一个，iframe将变为空，并且浏览器的控制台将记录CSP错误。在这种情况下，请使用一些有效的网址更新我的答案。谢谢。

Answer 8

非常简单，

首先 -

添加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>

然后 -

<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>

最后 -

<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>

完成了！

<!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>

表格http://jqueryui.com/resizable/

如何使iframe可调整大小？

8 个答案: