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

Question

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

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

Answer 1

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

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

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

Answer 2

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

}

Answer 3

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

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

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

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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