如何在不使用框架集的情况下缩放IFRAME内容？

Question

如何在不使用框架集的情况下缩放IFRAME内容？

我只需缩放框架内容.在我使用的网页中zoom: 0.75; height: 520px; width: 800px;.如果我增加缩放值,则意味着帧尺寸将增加.

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <STYLE>

#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</STYLE>
 </HEAD>

 <BODY>

  <IFRAME id="frame" src="http://www.google.com"></IFRAME> 

  </BODY>

</HTML>

Run Code Online (Sandbox Code Playgroud)

在上面的示例HTML页面中,我想在不改变IFRAME大小的情况下缩放IFRAME的内容.

Answer 1

小智 15

我在我的脸书中使用了一个脚本,它在IE和Firefox中运行

<style type="text/css">
#iframe {
    zoom: 0.15;
    -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>

<iframe src="https://www.wikipedia.org/"  height="700" width="550">Wikipedia Encyclopedia</iframe>

Run Code Online (Sandbox Code Playgroud)

这很棒 - 但**不要使用**`zoom`**和**供应商特定属性之一.例如:如果您使用Chrome,您的`iframe'会进行缩放和转换 - 这会导致双倍缩放. (5认同)

Answer 2

Luk*_*ins 6

不确定这适用于链接文档,但对于本地托管内容,以下工作:

<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Dan*_*Dan 3

为此，您可能需要使用 JavaScript。

这里有一个 jQuery 的缩放插件：http ://css-tricks.com/examples/AnythingZoomer/

您可以将 iframes src 更改为本地网页（例如，frame.htm），在框架中放置一个 div 并使用 jquery load() 函数将内容加载到框架中：

<script type="text/javascript">
     $(document).ready(function() {
          $("#loadGoogle").load("pageToLoad.html", function(){ 
             //loaded
          });
    })
</script>
<div id="loadGoogle" style="width: 100%; height: 100%;"></div>

Run Code Online (Sandbox Code Playgroud)

然后使用框架内的jquery缩放插件来缩放内容。

<script type="text/javascript">
    $("#loadGoogle").anythingZoomer({

       expansionSize: 30,
       speedMultiplier: 1.4

    });
</script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，3 月前
查看次数：	89465 次
最近记录：	10 年，4 月前