Как я могу масштабировать содержание iframe?

Question

Как я могу масштабировать содержимое iframe (в моем примере это страница HTML, а не всплывающее окно) на странице моего веб-сайта?

Например, я хочу отобразить содержимое, которое отображается в iframe, в размере 80% от исходного размера.

Answer 1

Решение Кипа должно работать в Opera и Safari, если вы измените CSS на:

<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 для предотвращения прокрутки.

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>

Примечание: мне пришлось использовать элемент wrap для Firefox. По какой-то причине в Firefox, когда вы уменьшаете объект на 75%, он по-прежнему использует исходный размер изображения по причинам макета. (Попробуйте удалить div из приведенного выше примера кода, и вы поймете, что я имею в виду.)

Я нашел кое-что из этого вопроса .

Answer 3

После нескольких часов борьбы с этим, пытаясь заставить его работать в IE8, 9 и 10, вот что сработало для меня.

Этот урезанный CSS работает в FF 26, Chrome 32, Opera 18 и IE9 -11 с 07.01.2014:

.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 в div контейнера .wrap:

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

Просто используйте ваш любимый метод для прослушивания браузера, чтобы условно включить соответствующий CSS, см. Есть ли способ сделать условный CSS для браузера внутри файла * .css? для некоторых идей.

IE7 был проигран, так как -ms-zoom не существовал до IE8.

Вот фактический 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

Продолжение ответа lxs : Я заметил проблему, когда одновременное использование тегов zoom и --webkit-transform одновременно приводит к путанице в Chrome (версия 15.0.874.15) при двойном увеличении своего рода эффект. Я смог обойти эту проблему, заменив zoom на -ms-zoom (нацеленный только на IE), оставив Chrome использовать только тег --webkit-transform, и это прояснилось.

Answer 5

Вам не нужно оборачивать 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 6

Я думал, что поделюсь тем, что придумал, используя большую часть того, что было дано выше. Я не проверял Chrome, но, насколько я могу судить, он работает в IE, Firefox и Safari.

Специфические смещения и коэффициент масштабирования в этом примере работали для сжатия и центрирования двух веб-сайтов в фреймах для вкладок Facebook (ширина 810 пикселей).

Использовались два сайта: WordPress и Ning Network. Я не очень хорошо разбираюсь в 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>

Answer 7

html {zoom: 0.4;}? -)

Answer 8

Я только что проверил, и для меня ни одно из других решений не сработало. Я просто попробовал это, и он отлично работал на 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).

Answer 9

Если вы хотите, чтобы iframe и его содержимое масштабировались при изменении размера окна, вы можете установить следующее для события resize окна, а также для события onload iframes.

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 и его содержимое масштабируемыми до 100% ширины div обтекания (или любого другого процента, который вы хотите). В качестве дополнительного бонуса вам не нужно устанавливать css кадра в жестко закодированные значения, так как все они будут установлены динамически, вам просто нужно будет позаботиться о том, как вы хотите, чтобы отображался div.

Я проверил это, и оно работает на Chrome, IE11 и Firefox.

Answer 10

Я думаю, что вы можете сделать это, вычислив желаемую высоту и ширину с помощью 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, но, похоже, он работает с хорошими:)