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

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

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

Решение Кипа должно работать на 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>

Вы также можете указать overflow: hidden для #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>

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

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

После нескольких часов борьбы с этим, пытаясь заставить его работать в 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/

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

Followup для ответа LXS игровая : я заметил проблему , где наличие как zoomи --webkit-transformтеги , в то же время , кажется, запутать Chrome (версия 15.0.874.15), выполнив двойной масштаба рода эффект. Я был в состоянии работать вокруг этого вопроса путем замены zoomс -ms-zoom(целевой только в IE), в результате чего Chrome использовать только в --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 (ширина 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>

Если вы хотите, чтобы 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 Wrap.

Я проверил это, и он работает на 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как предложено ниже, и использовать функцию масштабирования в #wrapdiv, а не в iframeid. По моему опыту, с zoomфункцией, пытающейся масштабировать div iframe #frame, он будет масштабировать размер iframe, а не содержимое внутри него (что вы и собираетесь).

Похоже на это. У меня работает на IE8, Chrome и FF.

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

Это было мое решение на странице шириной 890 пикселей

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

Очевидно, не пытаясь исправить родителя, просто добавив стиль «zoom: 50%» к телу ребенка с небольшим количеством javascript.

Может быть, можно установить стиль элемента «HTML», но не пробовал.

Если ваш html оформлен с помощью CSS, вы можете связать разные таблицы стилей для разных размеров.

Я не думаю, что HTML имеет такую ​​функциональность. Единственное, что я могу себе представить, - это выполнить серверную обработку. Возможно, вы могли бы получить снимок изображения веб-страницы, которую вы хотите обслуживать, масштабировать ее на сервере и предоставить клиенту. Однако это будет неинтерактивная страница. (возможно, изображение может иметь ссылку, но все же.)

Другой идеей было бы иметь серверный компонент, который изменил бы HTML. Еще как функция масштабирования Firefox 2.0. это, конечно, не идеальное масштабирование, но лучше, чем ничего.

Кроме этого, у меня нет идей.

Как я уже сказал, я сомневаюсь, что вы можете сделать это.
Может быть, вы можете масштабировать хотя бы сам текст, установив стиль font-size: 80%;.
Не проверенный, не уверен, что это работает, и не будет изменять размеры коробок или изображений.