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

Question

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

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

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で動作させるために何時間もこれに苦労した後、これが私にとってうまくいきました。

この簡素化された 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 に一致するように設定し、-ms-zoom を .wrap コンテナー div に追加します。

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

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

-ms-zoom は IE8 まで存在しなかったため、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/

Answer 4

追加のタグで 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 5

lxsの回答のフォローアップzoom：タグと--webkit-transformタグの両方を同時に持つと、ダブルズームのような効果を実行することでChrome（バージョン15.0.874.15）を混乱させるように見えるという問題に気づきました。zoom（IEのみを対象とした-ms-zoom）に置き換え、Chromeに--webkit-transformタグのみを使用させることで問題を回避することができ、それで問題は解決しました。

Answer 6

Thought I'd share what I came up with, using much of what was given above. I haven't checked Chrome, but it works in IE, Firefox and Safari, so far as I can tell.

The specifics offsets and zoom factor in this example worked for shrinking and centering two websites in iframes for Facebook tabs (810px width).

The two sites used were a wordpress site and a ning network. I'm not very good with html, so this could probably have been done better, but the result seems good.

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

html{ズーム:0.4;} ?-)

Answer 8

ウィンドウのサイズが変更されたときに 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 をハードコードされた値に設定する必要はありません。それらはすべて動的に設定されるためです。ラップ div をどのように表示するかを気にするだけで済みます。

これをテストしたところ、chrome、IE11、および firefox で動作します。

Answer 9

これは、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でこれをテストしませんでしたが、良いもので動作するようです:)

Answer 10

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

}

Answer 11

これを IE で動作させるのに問題がある場合は、以下で提案されているように使用し、 idではなく div で-ms-zoomズーム機能を使用すると便利です。私の経験では、関数が の iframe div をスケーリングしようとすると、その中のコンテンツではなく iframe のサイズがスケーリングされます (これが目的です)。#wrapiframezoom#frame

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

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

Answer 12

#wrap #frame ソリューションは、 #wrap 内の数値がスケール ファクターの #frame 倍である限り、正常に機能します。縮小されたフレームのその部分のみが表示されます。ここでは、Web サイトを縮小して、ピンタレストのような形式に (woodmark jQuery プラグインを使用して) 配置しているのを見ることができます。

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

Answer 13

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

Answer 14

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

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

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

Answer 15

これらのソリューションは、Flexbox と 100% の iFrame では適切に機能しません (ぼかし) が、Iframe が rem em またはパーセント単位を使用している場合、見栄えのするソリューションがあります。

  window.onload = function(){
    let ifElem = document.getElementById("iframe-id");
    ifElem.contentWindow.document.documentElement.style.fontSize="80%";
  }

Answer 16

おっしゃるとおり、あなたにそれができるとは思えません。
style を設定することで、少なくともテキスト自体を拡大縮小できるかもしれませんfont-size: 80%;。
未テスト、動作確認なし、ボックスや画像のサイズを変更しません。