如何使 iframe 可调整大小？

Posted 2023-03-05

【中文标题】如何使 iframe 可调整大小？

【英文标题】：How can I make an iframe resizable?

【发布时间】：2011-12-28 09:36:29

【问题描述】：

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

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

【问题讨论】：

您在哪个容器中打开 iframe？更好的是，您可以添加一些代码以获得更好的答案..

我尝试使用div，但它不起作用，你是什么意思容器？对不起，我是这种编码的新手，请多多包涵。谢谢

你用过 jquery 吗？

是的，实际上，当我使用 .resizable(); 的 jQuery 代码时，它起作用了，但是由于 iframe 在 div 标签内，iframe 的 src 属性不可调整大小，只有 div .

能弄清楚如何不让它膨胀到完整的浏览器大小吗？

【参考方案1】：

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

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

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

现场示例：https://jsfiddle.net/xpeLja5t/

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

【讨论】：

这个解决方案还能用吗？我没有运气。

@AndrewThreadgill 这个解决方案在 Chrome 51 中对我有用。您看到的内容与 Nicole 支持链接中提供的内容不同吗？

我使用通过 iframify 创建的 iframe[srcdoc] 进行了测试：适用于 Chr 54（它可以增长但不能缩小，+1）但不适用于 Fx 49 :( 相关 request feature on Bugzilla@Mozilla

这适用于 Chrome 和 Safari。不适用于 Internet Explorer、Edge 或 Firefox（即使 Firefox 确实支持 resize 属性）。

感谢新的 flexbox-feature there now is a pure-CSS-solution，它适用于 Firefox 和 Chrome。

【参考方案2】：

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

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

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

对div的样式应用style标签。

.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 和 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
    );
);

【讨论】：

$(".resizable").resizable( ... imateDuration: 500); 应该是animateDuration

如果您只需要可调整大小的窗格，添加 jQuery UI 可能有点矫枉过正，但它确实是一个不错的库。

【参考方案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 的大小。

【讨论】：

+1 不敢相信这是唯一的障碍解决方案，而且它没有任何投票！这对于在另一个 iframe 上拖动过快时不会“丢失”鼠标轨迹是一件大事。谢谢@Billiand！

@happytimeharry 我实际上并没有解决多个 iframe 相互干扰的问题 - 我的答案中的障碍只会阻止一个 iframe 干扰它自己的大小调整。

【参考方案4】：

花了超过 1 小时 to find something 这让我找到了一个可行的解决方案：

应有的纯 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 中，这个解决方案仍然存在一些问题。使用 Run code sn-p 然后 Full Page （所以如果 IFRAME 嵌入到其他 IFRAMEs 中，它似乎不起作用）。此外，调整大小手柄（在右下角）显示得有点微妙，并且调整大小经常会随着鼠标而停止。

In Firefox 您现在也可以使用纯 CSS 调整 iframe 的大小。

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

【讨论】：

谢谢，这真的有效。是否有类似的可拖动性？

@user185953 恕我直言，没那么容易。 AFAICS 拖动需要 javascript（接收拖动）。由于IFRAMEs 是交互式的并接收所有鼠标事件（如拖动），因此您需要在IFRAME 的控制之外的东西（一些额外的拖动-DIV）。从 JavaScript 中，这个 drag-DIV 的拖动可以相应地应用于 resizer-DIV 以模拟拖动。如果拖动-DIV（透明地）覆盖整个IFRAME并且（在z-order）在IFRAME之前，它可以接收IFRAME之前的所有鼠标事件（但是你在这种情况下无法与IFRAME 交互）。

【参考方案5】：

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

jquery：

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

html：

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

希望对你有帮助

【参考方案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" margin margin >
        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);
        
    );
);

【讨论】：

还是不行，我以前的代码更好:(谢谢

【参考方案7】：

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

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

【讨论】：

但它仍然没有工作，唯一可以调整大小的部分是 部分

【参考方案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/