iframeのコンテンツをスケーリングするにはどうすればよいですか？

Webサイトのページでiframeのコンテンツ（私の例ではHTMLページであり、ポップアップではない）をスケーリングするにはどうすればよいですか？

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

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で非表示にするオーバーフローを指定することもできます。

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を削除してみてください。意味がわかります。）

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

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を条件付きで含めるには、ブラウザーのスニッフィングにお気に入りの方法を使用してください。いくつかのアイデア。

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

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

私はテストしたばかりで、他のソリューションはどれも機能しませんでした。私はこれを試しただけで、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）。

フォローLXSの答え：私は両方持つ問題に気づいたzoomと--webkit-transform同時にタグはダブルズームソート効果の操作を実行してクロム（バージョン15.0.874.15）を混乱させているようだが。（IEのみを対象とする）に置き換えることzoomで問題を回避し、-ms-zoomChromeに--webkit-transformタグのみを使用させることで問題を解決できました。

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

html {zoom：0.4;}？-）

上で与えられたものの多くを使って、私が思いついたものを共有したいと思いました。私はChromeをチェックしていませんが、私の知る限り、IE、Firefox、Safariで動作します。

この例の特定のオフセットとズーム係数は、Facebookタブのiframe（幅810px）で2つのWebサイトを縮小および中央揃えするために機能しました。

使用された2つのサイトは、ワードプレスサイトと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>

ウィンドウのサイズが変更されたときにiframeとその内容をスケーリングする場合は、ウィンドウのサイズ変更イベントと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をどのように表示するかを気にする必要があるだけです。

私はこれをテストしましたが、Chrome、IE11、Firefoxで動作します。

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

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

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

これをIEで-ms-zoom機能させるのに問題がある場合は、以下に示すように使用し#wrap、iframeID ではなくdivでズーム機能を使用すると便利です。私の経験では、zoomiframe divのスケーリングを試みる関数#frameでは、iframeサイズをスケーリングし、その中のコンテンツはスケーリングしません（これが目的です）。

このように見えます。IE8、Chrome、FFで動作します。

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

これは幅が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; 

}

#wrap #frameソリューションは、＃wrapの数値が#frameにスケールファクターを掛けた値である限り、正常に機能します。縮小されたフレームのその部分のみが表示されます。あなたはそれをここで見ることができますウェブサイトを縮小してそれをフォームのような面白いものに入れます（ウッドマークjQueryプラグインで）：

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

したがって、おそらく最善の解決策ではありませんが、問題なく動作するようです。

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

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

明らかに、親を修正しようとせず、ちょっとしたJavaScriptを使用して、子の本文に "zoom：50％"スタイルを追加するだけです。

「HTML」要素のスタイルを設定できたかもしれませんが、それは試みませんでした。

HTMLがCSSでスタイル設定されている場合は、さまざまなサイズのさまざまなスタイルシートをリンクできます。

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

別のアイデアは、HTMLを変更するサーバー側コンポーネントを持つことです。Firefox 2.0のズーム機能に似ています。もちろんこれは完璧なズームではありませんが、何もしないよりはましです。

それ以外はアイデアがありません。

言ったように、あなたがそれを行うことができるとは思えません。
たぶん、スタイルを設定することで、少なくともテキスト自体をスケーリングできますfont-size: 80%;。
テストされていません。動作するかどうかは不明です。ボックスや画像のサイズは変更されません。