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

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

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

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

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

html {zoom: 0.4;}? -)

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

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

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

Решение Кипа должен работать в 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, чтобы предотвратить полосы прокрутки.

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

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

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

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

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

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

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

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

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

}

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

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

Так что, вероятно, не лучшее решение, но, похоже, работает нормально.

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

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

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

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

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