web-dev-qa-db-ja.com

フレームセットを使用せずにIFRAMEコンテンツのみをズームする方法は？

フレームのコンテンツのみをズームする必要があります。ここでは、私のWebページで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>

上記のサンプルHTMLページでは、IFRAMEのサイズを変更せずに、IFRAMEのコンテンツをズームしたいと思います。

htmlcssfirefoxiframe
10
Baskaran

Facebookでスクリプトを使用しましたが、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>
15
Ali Usman

これがリンクされたドキュメントで機能するかどうかはわかりませんが、ローカルでホストされているコンテンツでは次のように機能します。

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

これには、JavaScriptを使用する必要がある場合があります。

ここにjQueryのズームプラグインがあります： http://css-tricks.com/examples/AnythingZoomer/

IframeのsrcをローカルのWebページ（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>

次に、フレーム内でjqueryズームプラグインを使用して、コンテンツをズームします。

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

       expansionSize: 30,
       speedMultiplier: 1.4

    });
</script>
3
Dan