web-dev-qa-db-ja.com

iframeの内容を拡大・縮小するにはどうすればいいですか？

自分のWebサイトのページ内でiframeのコンテンツ（この例ではHTMLページであり、ポップアップではない）を拡大縮小するにはどうすればよいですか。

たとえば、iframeに表示されるコンテンツを元のサイズの80％で表示したいとします。

htmlcssdom
206
John Griffiths

Kipの解決策 CSSを次のように変更すれば、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にhidden：hiddenを指定することもできます。

209
lxs

私は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>

注：Firefoxではwrap要素を使用しなければなりませんでした。何らかの理由で、Firefoxでは、オブジェクトを75％縮小しても、レイアウト上の理由から、元のサイズのイメージが使用されます。 （上記のサンプルコードからdivを削除してみてください。そうすれば私の言っていることがわかります。）

私は この質問 からこれのいくつかを見つけました。

53
Kip

IE8、9、10で動かそうとして何時間も苦労した後、ここに私のために働いたものがあります。

この切り捨てられたCSSは、2014年1月7日現在、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に合わせて幅と高さを設定し、.wrapコンテナdivに-ms-zoomを追加します。

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

適切なCSSを条件付きで含めるには、ブラウザのスニッフィングにお気に入りの方法を使用するだけです。 * .cssファイル内にブラウザ固有の条件付きCSSを作成する方法はありますか？ いくつかのアイデアについて。

IE 8まで-ms-zoomが存在しなかったため、IE 7は失われた原因でした。

これが私がテストした実際の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/

29
Eric Sassaman

lxs's answer へのフォローアップ：私はzoomと--webkit-transformタグの両方を同時に持つことがダブルズームのような効果をもたらすことによってChrome（バージョン15.0.874.15）を混乱させるように見える問題に気づきました。私はこの問題を回避するためにzoomを-ms-zoom（IEのみをターゲットとする）に置き換え、Chromeに--webkit-transformタグだけを使用させることで問題を解決しました。

10
r3cgm

追加のタグで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を取得するには、寸法を調整する必要があります。

9
Matthew Wilcoxson

私が思いついたことを上で与えたことの多くを使って共有したいと思いました。私はChromeをチェックしていないが、私が言うことができる限り、それはIE、FirefoxとSafariで動く。

この例の詳細オフセットとズーム率は、2つのWebサイトをFacebookタブ（810ピクセル幅）のiframeに縮小して中央揃えにするために機能しました。

使用した2つのサイトは、ワードプレスサイトとネットワークです。私は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>
7
Jon Fergus

私はテストしたばかりで、他の解決策はどれもうまくいきませんでした。私は単にこれを試してみました、そして私が予想していたように、それは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）。

6
MrP01

html {zoom：0.4;}？ - ）

6
roenving

ウィンドウのサイズを変更するときにiframeとその内容を拡大縮小したい場合は、ウィンドウのresizeイベントとiframes 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とそのコンテンツは、ラップdivの100％幅（または任意の割合）に拡大されます。追加のボーナスとして、フレームのCSSをハードコードされた値に設定する必要はありません。それらはすべて動的に設定されるからです。wrap divをどのように表示したいのか心配する必要があります。

私はこれをテストしました、そしてそれはクロム、IE11、そしてFirefoxで動作します。

5
user3298597

（document.body.clientWidthなどを介して）javascriptで必要な高さと幅を計算してから、次のようにiframeをHTMLに挿入することでこれを実現できると思います。

 var element = document.getElementById（ "myid"）; 
 element.innerHTML + = "<iframe src = 'http：//www.google.com' height = '200' width = '"+ document.body.clientWidth * 0.8 +"' />";

私はIE6でこれをテストしませんでしたが、それは良いものでうまくいくようです:)

4
Eric Wendelin

これは890px幅のページでの私の解決策でした

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-Origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-Origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-Origin: 0 0; 

}
3
Mathias Asberg

IEでうまく動かない場合は、iframe idではなく、-ms-zoomを使用し、#wrap divでzoom関数を使用すると便利です。私の経験では、zoom関数が#frameのiframe divを拡大縮小しようとすると、iframeのサイズは拡大縮小され、その中のコンテンツは拡大縮小されません（これが目的です）。

こんな感じです。私のためにIE8、ChromeとFFで動作します。

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}
3
user1598890

おそらく最善の解決策ではないかもしれませんが、うまくいくようです。

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

明らかに親を修正しようとしているのではなく、ちょっとしたjavascriptで「zoom：50％」スタイルを子供の体に追加するだけです。

「HTML」要素のスタイルを設定することもできますが、それは試していません。

2
Graham

#wrap #frameソリューションは、#wrap内の数値が#frame xスケールファクタである限り、うまく機能します。縮小されたフレームのその部分だけが表示されます。あなたはそれをここで見ることができますウェブサイトを縮小して、そして興味をそそるような形にそれを置くこと（ウッドマークのjQueryプラグインで）：

http://www.genautica.com/sandbox/woodmark-index.html

2
Stefan Gruenwald

あなたのHTMLがCSSでスタイルされている場合、あなたはおそらく異なるサイズのために異なるスタイルシートをリンクすることができます。

1
Jon

私はHTMLがそのような機能を持っているとは思わない。私が想像できる唯一のことは、サーバーサイドの処理を行うことです。おそらく、あなたが提供したいWebページの画像スナップショットを取得し、それをサーバー上で拡大縮小し、それをクライアントに提供することができます。ただし、これは非インタラクティブページになります。 （おそらく、イメージマップにリンクがあるかもしれませんが、それでも）。

もう1つのアイデアは、HTMLを変更するサーバーサイドコンポーネントを用意することです。 Firefox 2.0のズーム機能のようなものです。もちろんこれは完全なズーミングではありませんが、何もないよりはましです。

それ以外に、私は考えから抜けています。

0
Alexandros Marinos

ターゲットページでコンテナの幅（親DIV）をピクセル単位ではなくパーセント単位で定義すると、自動的に拡大縮小が行われることに気付きました。それは自動的に起こります。

1.私の場合はexmplを定義します。 iframeが設定されるdivの480px幅。 2. iframeの幅を100％に設定します。 3.ターゲットページの親divに250％の幅を設定します（5画像x画面幅の50％）。

私の意図は、フレーム内に2つの画像（幅）を表示することです。フレーム幅のどの場合でも、まさにそれが起こっています。

なぜそれがパーセントでしか機能しないのですか？

0
Toni Risteski

言ったように、私はあなたがそれをすることができるとは思わない。
スタイルfont-size: 80%;を設定することで、少なくともテキスト自体を拡大縮小することができます。
テストされていない、動作するかどうかわからず、ボックスや画像のサイズを変更しません。

0
PhiLho