如何扩展iframe的内容？

Question

如何在我的网站页面中扩展iframe的内容(在我的示例中,它是一个HTML页面,而不是弹出窗口)？

例如,我想以if原始大小的80%显示iframe中显示的内容.

Answer 1

如果您将CSS更改为:Kip的解决方案应该适用于Opera和Safari

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

您可能还想在#frame上指定overflow:hidden以防止滚动条.

Answer 2

我找到了一个适用于IE和Firefox的解决方案(至少在当前版本中).在Safari/Chrome上,iframe的大小调整为其原始大小的75%,但iframe中的内容根本不会缩放.在Opera中,这似乎不起作用.这感觉有点深奥,所以如果有更好的方法,我会欢迎建议.

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

注意:我必须使用wrapFirefox 的元素.出于某种原因,在Firefox中将对象缩小75%时,出于布局原因,它仍然使用图像的原始大小.(尝试从上面的示例代码中删除div,你会明白我的意思.)

我从这个问题中找到了一些.

Answer 3

经过几个小时的努力试图让它在IE8,9和10中工作之后,这对我有用.

截至2014年1月7日,这个精简版CSS适用于FF 26,Chrome 32,Opera 18和IE9 -11:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

对于IE8,设置宽度/高度以匹配iframe,并将-ms-zoom添加到.wrap容器div:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

只需使用您最喜欢的浏览器嗅探方法来有条件地包含适当的CSS,请参阅是否有办法在*.css文件中执行浏览器特定的条件CSS？一些想法.

IE7是一个失败的原因,因为在IE8之前不存在-ms-zoom.

这是我测试过的实际HTML:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

Answer 4

我刚刚进行了测试，对我来说，其他解决方案均无效。正如我所期望的，我只是尝试了一下，它就可以在Firefox和Chrome上完美运行：

<div class='wrap'>
    <iframe ...></iframe>
</div>

和CSS：

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

这会将所有内容缩放30％。当然，宽度/高度百分比需要相应地调整（1 / scale_factor）。

Answer 5

跟帖到LXS的回答:我注意到这里有两个问题zoom,并--webkit-transform在同一时间标签似乎做双变焦之类的效果混淆铬(15.0.874.15版).我能够通过更换来解决此问题zoom有-ms-zoom(只针对在IE),让Chrome浏览器进行只使用的--webkit-transform标签,而茅塞顿开.

Answer 6

您不需要使用其他标记包装iframe.只需确保将iframe的宽度和高度增加与向下缩放iframe相同的量即可.

例如,将iframe内容缩放到80%:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

基本上,要获得相同大小的iframe,您需要缩放尺寸.

Answer 7

html {zoom:0.4;}？ - )

Answer 8

以为我会分享我提出的内容,使用上面给出的大部分内容.我没有检查Chrome,但它可以在IE,Firefox和Safari中使用,据我所知.

此示例中的细节偏移和缩放因子适用于缩小和居中两个网站的iframes中的Facebook标签(810px宽度).

使用的两个站点是wordpress站点和ning网络.我对html不是很好,所以这可能做得更好,但结果似乎很好.

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

Answer 9

如果希望在调整窗口大小时缩放iframe及其内容，则可以对窗口的resize事件以及iframe onload事件设置以下内容。

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

这将使iframe及其内容缩放到wrap div的100％宽度（或您想要的任何百分比）。另外，您不必将框架的css设置为硬编码值，因为它们都是动态设置的，您只需要担心想如何显示wrap div。

我已经测试过了，它可以在chrome，IE11和firefox上使用。

Answer 10

我不认为 HTML 有这样的功能。我能想象的唯一能做到这一点的事情就是进行一些服务器端处理。也许您可以获取要提供服务的网页的图像快照，在服务器上对其进行缩放并将其提供给客户端。然而，这将是一个非交互式页面。（也许图像地图可以有链接，但仍然如此。）

另一个想法是拥有一个可以更改 HTML 的服务器端组件。有点像 Firefox 2.0 的缩放功能。这当然不是完美的缩放，但总比没有好。

除此之外，我没有想法。