Css 如何使iframe可调整大小？

我们有一个小组项目，我被指派去做一个特定的

iframe

可调整大小。从上周开始，我一直在阅读很多论坛帖子，我发现

iframe

本身无法调整大小

---

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

我找到的最佳解决方案是将iframe的宽度和高度设置为100%，并将iframe放在div标记内。这是使用诸如CKEditor之类的工具看到的基本解决方案

例如，我有一些jQuery对话框，它们在屏幕上就可以这样做。如果您单击或的报告或声明，您将看到一个对话框，其中弹出一个iframe。希望有帮助。

我找到了您的解决方案：

HTML:

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

$(".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);
    }
});

可调整大小
您的浏览器不支持Iframe

JQUERY:

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

$(".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);
    }
});

$（函数（）{
$（“#可调整大小”）.resizable（）；
$（“#可调整大小”）。可调整大小({
调整大小：函数（事件、ui）{
$（“#myfr”）.css（{“height”：ui.size.height，“width”：ui.size.width}）；
}
});
});

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

创建一个用于调整大小的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和jqueryui

执行可调整大小的

$（函数（）{
$（“.resizable”）.resizable({
动画：对，
动画动画：“swing”，
动画教育：500
});
});

---

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

Jquery：

$（“#我的div帧包装器”）。可调整大小({
alsoResize:“#我的框架”
});

HTML:

我希望这很容易帮助你

首先-

添加jquery和jquery ui-

然后-

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

$（函数（）{
$（“#可调整大小”）.resizable（）；
});

最后-

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

可调整大小

完成了

jQuery UI可调整大小-默认功能
#可调整大小{宽度：150px；高度：150px；填充：0.5em；}
#可调整大小的h3{文本对齐：居中；边距：0；}
$（函数（）{
$（“#可调整大小”）.resizable（）；
});
可调整大小

带有jQuery UI的表单

HTML:

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

$(".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);
    }
});

JavaScript:

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

$(".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);
    }
});

$（“.resizable”）.resizable({
开始：功能（事件、用户界面）{
ui.element.append（$（“”{
id:“iframe屏障”，
css:{
位置：“绝对”，
排名：0，
右:0,，
底部：0，
左:0,，
“z指数”：10
}
}));
},
停止：功能（事件、用户界面）{
$（“#iframe barrier”，ui.element）.remove（）；
},
调整大小：函数（事件、ui）{
$（“iframe”，ui.element）.width（ui.size.width）.height（ui.size.height）；
}
});

jsFiddle：

说明：

由于jqueryui的

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

但是，此方法还有一个问题-iFrame不会将鼠标移动事件传递给其父元素。为了解决这个问题，在调整大小过程中，
start
和
stop
事件会用另一个元素覆盖iframe，以便
可调整大小的
插件可以正确跟踪鼠标移动

出于某种原因，为包装器div指定一个显式大小是调整大小工作所必需的。在大多数情况下，这意味着iframe需要相同的大小集，以便它从一开始就匹配div的大小。
这可以在纯CSS中完成，如下所示：

iframe{
高度：300px；
宽度：300px；
调整大小：两者；
溢出：自动；
}

将高度和宽度设置为所需的最小尺寸，它似乎只会增大，而不会缩小

实例：

这项技术已经完成。
我花了1个多小时才找到一个有效的解决方案：


应该是纯CSS
适用于所有支持flexbox的现代浏览器，如Firefox、Chrome等
但对于IE10及以下的旧浏览器不起作用


.resizer{display:flex；margin:0；padding:0；resize:both；overflow:hidden}
.resizer>.resized{flex-grow:1；边距：0；填充：0；边框：0}
.丑陋{背景：红色；边框：4px黑色虚线；}

在哪个容器中打开iframe？更好的是，你可以放一些代码来得到更好的答案。我试着用div，但没用，你说的容器是什么意思？对不起，我是新来的这种编码，请容忍我。谢谢你试过使用jquery吗？是的，事实上，当我使用jquery代码时，它是.resizable（）；，它起作用了，但由于iframe在div标记内，iframe的src属性不可调整大小，只有div.com知道如何不将其放大到整个浏览器大小？但它仍然不起作用，唯一可调整大小的部分是partIt仍然不起作用，我以前的代码更好：（谢谢
$（.resizeble））.resizeable（{…imateDuration:500}）；
应该是
动画教育
如果您只需要可调整大小的窗格，添加jQuery UI可能有些过分，但它确实是一个不错的库。+1不敢相信这是唯一的障碍解决方案，而且它没有任何投票权！这对于不“输”来说是一件大事当在另一个iframe上拖动过快时跟踪鼠标。谢谢@Brilliand！@happytimehrry我实际上没有解决多个iframe相互干扰的问题-我回答中的障碍仅阻止一个iframe干扰其自身的大小调整。此解决方案仍然有效吗？我没有运气。@AndrewThreadg这个解决方案在Chrome 51中对我有效。你看到的和Nicol中呈现的不同吗