如何使iframe可调整大小？

Question

我们有这个小组项目,我被指派做一个iframe可调整大小.自上周以来,我一直在阅读很多论坛帖子,我发现iframe自己无法调整大小.

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

Answer 1

这可以在纯CSS中完成,如下所示:

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

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

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

该技术除了IE的所有主流浏览器很好的支持.

Answer 2

请按照以下步骤调整iframe的大小:

1. 创建一个可调整大小的div.例如:

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

2. 为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%;
   }
   

3. 包括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>
   

4. 执行 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

花了一个多小时才找到使我找到可行解决方案的东西：

• 纯 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 中，您也可以iframe使用纯 CSS调整now 的大小。

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

Answer 6

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

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