logo标签列表

如何使iframe可调整大小？

cssiframeresizable
50

我们有一个小组项目，我被分配负责使某个 iframe 可调整大小。自上周以来，我一直在阅读许多论坛帖子，发现 iframe 本身是不可调整大小的。

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

你在哪个容器中打开iframe？如果你能提供一些代码片段，那么就可以得到更好的答案。 - Mayur Borad
我尝试使用div，但它没有起作用，你说的容器是什么意思？抱歉，我对这种编码方式很新，请多包涵。谢谢。 - amielopez
1
你有没有尝试过使用jQuery？ - Mayur Borad
是的，实际上，当我使用jQuery代码 .resizable(); 时，它有效果了。但由于iframe位于div标签内部，所以iframe的src属性不可调整大小，只有div可以。 - amielopez
你能想办法让它不要扩展到整个浏览器大小吗？ - filthy_wizard
8个回答
64

这可以通过纯CSS来实现，像这样：

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

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

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

除IE外，此技术在所有主要浏览器中得到了良好的支持。

10
这个方案还有效吗？我用它没成功。 - Haru
我相信这是因为我在我的iframe中使用了外部网站。 - Haru
4
我通过使用 iframify 创建的 iframe[srcdoc] 进行了测试：在 Chrome 54 中可以正常工作（可以增长但不会缩小，+1），但在 Firefox 49 中不行 :( 相关的特性请求已提交至 Bugzilla@Mozilla：https://bugzilla.mozilla.org/show_bug.cgi?id=680823。 - FelipeAls
3
适用于Chrome和Safari。不适用于Internet Explorer、Edge或Firefox（尽管Firefox支持resize属性）。 - Ollie Williams
1
由于新的flexbox功能，现在有一种纯CSS解决方案可用于Firefox和Chrome。感谢这个新特性。 - Tino
显示剩余2条评论
18

花了一个多小时找到了一个可行的解决方案：

  • 使用纯CSS
  • 适用于所有现代浏览器，如Firefox、Chrome等具有完整flexbox支持的浏览器。
  • 不过，不支持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 嵌入到其他 IFRAME 中，则似乎无法正常工作）。此外，调整大小的手柄（位于右下角）显示得有点不太明显，经常停止跟随鼠标。

在 Firefox 中，你现在也可以使用纯 CSS 调整 iframe 的大小。

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

谢谢，这真的很有效。是否有类似于可拖动性的东西？ - user185953
@user185953 在我看来，这并不容易。据我所知，拖动需要 JavaScript（用于接收拖动）。由于 IFRAME 是交互式的并且接收所有鼠标事件（如拖动），因此您需要在 IFRAME 的控制范围之外添加一些额外的拖动-DIV。然后，从 JavaScript 中，可以将此拖动-DIV 的拖动应用于调整大小器-DIV，以模拟拖动。如果将拖动-DIV 设为（透明地）覆盖整个 IFRAME 并且（在 z-顺序中）位于 IFRAME 前面，则它可以在 IFRAME 之前接收所有鼠标事件（但在这种情况下无法与 IFRAME 交互）。 - Tino
13

以下步骤可使iframe大小可调整：

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

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

  2. 应用样式标签以设置 div 的样式。

    3. .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. 包含jQuery和jQuery UI

    4. <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({ ... animateDuration: 500}); 应该是 animateDuration。 - Stephen Siu
1
如果你只需要可调整大小的面板，添加jQuery UI 可能会有些过度，但它确实是一个不错的库。 - Domino
10

使用 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
+1 真不敢相信这是唯一的障碍解决方案，而且它没有任何投票！当在另一个 iframe 上快速拖动时，这对于不“失去”鼠标跟踪非常重要。感谢 @Brilliand！ - mothmonsterman
1
@happytimeharry，我实际上没有解决多个iframe相互干扰的问题 - 我答案中的屏障只能防止一个iframe干扰其自身的调整大小。 - Brilliand
7
如果您还没有找到解决方案，我已经成功地使用以下方法：
Jquery：
$("#my-div-frame-wrapper").resizable({
    alsoResize : '#myframe'
});

HTML:

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

我希望这能帮到您

3

I found your solution:

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});
        }
    });
});
1
还是不行，我的之前的代码更好 :( 不过还是谢谢。 - amielopez
2
最好的解决方案是将 iframe 的宽度和高度设置为 100%，并将 iframe 放置在 div 标签中。这是像 CKEditor 这样的工具使用的基本解决方案。
例如，在Utah's Disclosures Site上，我有一些使用jQuery对话框展示iframe的例子。如果您单击报告或陈述之类的内容，则会弹出带有 iframe 的对话框。希望这可以帮到您。
<div class="demo"><iframe src="http://www.xxxx.com/xxxx/xxxx.php" name="xxxx" id="xxxx" style="border:0px;frameborder:0px;visibility:hidden;" style="border:1; top:0; left:0; right:0; height:100%; width:100%"></iframe></div> - amielopez
但是它仍然没有起作用，唯一可调整大小的部分是<div>部分。 - amielopez
0

非常简单，

首先 -

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

last - 

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接