Question

我在第三方网站中嵌入了iframe，我无法以任何方式进行编辑。

我希望iframe根据窗口的宽度重新调整大小。

如果我能够编辑整个页面，这不会有问题。

但是，在以％为单位设置元素的大小时，它会使用该元素的父级来设置大小。对于我正在使用的页面，父元素不会重新调整大小，所以这不起作用。

我需要的是一种基于窗口宽度告诉iframe重新调整大小的方法，最好只使用CSS。

这只能使用CSS吗？如果不是可以使用JQuery或JavaScript？

Answer 1

试试这个：

http://jsfiddle.net/6aLxaag8/2/

这个jsfiddle在iframe中加载第二个jsfiddle。

IFrame上有一个硬编码的style属性来设置宽度;元素所在的100vw或100% of the width of the viewing window，无论它在DOM中的位置如何。由于您无权访问父页面，因此您需要使用样式属性，并且可能无法使用javascript添加它（检查跨站点脚本）。

<{> Support isn't perfect vw个单位，但它很接近。

PS，很难知道如果没有在您的上下文中尝试，这是否有效，请告诉我： - ）

Answer 2

之前我遇到过这个问题，我使用这个css技巧，这个调整到宽度＆amp;任何包装器/ div的高度，所以如果你在一个div中嵌入iframe，其中'height：620px'和'width：420px'iframe大小调整为div的高度和宽度。只需改变宽度和宽度。 div的高度为100％。

.content_here {
    width: 420px;
    height: 620px; 
}

iframe#iframecontent {
    display:block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

<div class="content_here">
  <iframe id="iframecontent" src="http://www.bootstrapcdn.com/" frameborder="0" marginwidth="0" marginheight="0"  scrolling="auto"></iframe>
 </div>

根据窗口

2 个答案: