如何调整 iframe 的大小？

Question

我们有这个小组项目，我被分配去调整某个 iframe 的大小。自上周以来，我阅读了大量论坛帖子，发现 iframe 本身无法调整大小。

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

Answer 1

这可以用纯 CSS 来完成，如下所示：

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

将高度和宽度设置为您想要的最小尺寸，它看起来只会变大，不会缩小。

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

这种技术有对除 IE 之外的所有主流浏览器都有良好的支持。

Answer 2

我花了一个多小时找到一些东西，这让我找到了一个可行的解决方案：

• 纯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 中，这个解决方案仍然存在一些问题。使用运行代码片段，然后整页（因此，如果IFRAME嵌入到其他IFRAMEs）。此外，调整大小手柄（位于右下角）显示得有点微妙，调整大小通常会随着鼠标停止。

在 Firefox 中，您现在可以使用 pure 调整 iframe 的大小CSS 也是如此。

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

Answer 3

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

1. 创建一个用于调整大小的 div。例如：

   ;
   

2. 将 style 标签应用于 div 的样式。

   .ui-可调整大小-helper {
       边框：1px 灰色虚线；
   }
   .可调整大小{
       显示：块；
       宽度：400px；
       高度：400像素；
       内边距：30px；
       边框：2px 纯灰色；
       溢出：隐藏；
       位置：相对；
   }
   内联框架{
       宽度：100%；
       高度：100%；
   }
   

3. 包括 jQuery 和jQuery 用户界面

   
   <脚本 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
   <脚本 src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
   

4. 执行可调整大小

   $(function () {
       $(".ressized").ressized({
           动画：真实，
           animateEasing: '摇摆',
           动画持续时间：500
       });
   });
   

Answer 4

使用 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 的 ressized 插件无法直接在 iframe 上工作，因此将 iframe 包装在 div 中并调整 div 的大小 反而。上面代码中的 resize 事件确保 iframe 调整大小以匹配 div。

然而，此方法还有一个额外的问题 - iframe 不会将鼠标移动事件传递给其父元素。为了解决这个问题，start 和 stop 事件在调整大小期间用另一个元素覆盖 iframe，以便 ressized 插件可以跟踪鼠标动作正确。

出于某种原因，必须为包装器 div 指定明确的大小才能使调整大小起作用。在大多数情况下，这意味着 iframe 需要设置相同的大小，以便它从一开始就与 div 的大小相匹配。

Answer 5

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

Jquery：

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

HTML：

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

我希望它有帮助

Answer 6

我找到了您的解决方案：

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 7

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

例如，我有一些 jQuery 对话框在 Utah's Disclosures Site。如果单击 or 的报告或语句，您将看到弹出一个对话框，其中包含 iframe。希望有帮助。

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