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

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

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

ОТВЕТЫ

Ответ 1

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

Ответ 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 из примера кода выше, и вы увидите, что я имею в виду.)

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

Ответ 3

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

Этот урезанный CSS работает в FF 26, Chrome 32, Opera 18 и IE9 -11 по состоянию на 1/7/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/

Ответ 4

Followup to lxs answer: я заметил, что проблема с тем, что теги zoom и --webkit-transform в то же время, кажется, смешивают Chrome (версия 15.0. 874.15), сделав эффект двойного зума. Я смог обойти проблему, заменив zoom на -ms-zoom (только для IE), оставив Chrome использовать только тег --webkit-transform, и это очистило вещи.

Ответ 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 вам нужно масштабировать размеры.

Ответ 6

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

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

Два используемых сайта были сайтом wordpress и сетью 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>

Ответ 7

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

Ответ 8

html {zoom: 0.4;}? -)

Ответ 9

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

Я тестировал это, и он работает на chrome, IE11 и firefox.

Ответ 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, но, похоже, работает с хорошими:)

Ответ 11

Для тех из вас, кто не может заставить это работать в IE, полезно использовать -ms-zoom, как предложено ниже, и использовать функцию масштабирования в div #wrap, а не iframe. По моему опыту, с помощью функции zoom, которая пытается масштабировать iframe div из #frame, она будет масштабировать размер iframe, а не контент внутри него (для чего вы и собираетесь).

Похоже на это. Работает для меня в IE8, Chrome и FF.

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

Ответ 12

Это было мое решение на странице с шириной 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; 

}

Ответ 13

Решение #wrap #frame работает нормально, если числа в #wrap равны #frame раз масштабному коэффициенту. Он показывает только ту часть уменьшенного кадра. Вы можете увидеть это здесь, уменьшая количество веб-сайтов и помещая их в форму pinterest (с плагином woodmark jQuery):

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

Ответ 14

Скорее всего, это не лучшее решение, но, похоже, работает нормально.

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

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

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

Может быть, можно задать стиль элемента "HTML", но не попробовать.

Ответ 15

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

Ответ 16

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

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

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

Ответ 17

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

Ответ 18

Я замечаю, что масштабирование происходит автоматически, когда я определяю ширину контейнера (родительский DIV) на целевой странице не в пикселях, а только в процентах. Это происходит автоматически.

1. В моем случае я определяю для exmpl. 480px ширина для div, где будет установлен iframe. 2.I устанавливает 100% ширину для iframe. 3. Я установил ширину 250% для родительского div на целевой странице (5 изображений x 50% ширины экрана).

Мое намерение состоит в том, чтобы показать 2 изображения (по ширине) в кадре и именно это происходит в каждом случае ширины кадра.

Почему он работает только в процентах?