Могу ли я использовать эту функцию для настройки масштабирования для фреймов в браузерах с полноразмерным масштабированием?

Question

Я думаю, что каждый браузер в настоящее время имеет полный контроль над страницами. Доступен ли он в любом случае разработчикам через html, css или javascript?

Я бы хотел предоставить фрейм iframe или даже нормальный фрейм и установить его, скажем, на 50%. (Относительно текущего масштаба вмещающего документа, в идеале.)

Это вообще выполнимо? Я не против, если это решение HTML 5, если оно имеет существующую функциональную реализацию. Даже если он в ночной сборке.

Я был бы очень рад, если бы он работал хотя бы с WebKit и Gecko, и бонусом, если бы Trident тоже.

Answer 1

Для меня работают следующие HTML5 и CSS3-коды: масштабирование для IE 6 до 8 и преобразование масштаба для остальных современных браузеров.

#iframe{
    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; }

Поддерживаются Firefox 3.5 и выше, Safari 3.1, Chrome 4.0, Opera 10.5.

Ищите решение JS или JQuery, такое как , это , которое работает в кросс-браузерных версиях для старых версий с пользовательскими функциями, основанными на оси xy и смещении.

Я полагаю, что путь состоит в том, чтобы использовать функции оси XY, но я не могу найти какой-либо заранее сделанный код уменьшения, чтобы взять его в качестве начального числа.

Answer 2

Следующее работает в Safari 4.0.2 и последней версии WebKit по ночам. Однако он не работает в Google Chrome (ни в Windows, ни в Mac).

Что касается Firefox 3.5 и IE 8.0, сделки нет. Кроме того, нет никакой сделки по последней ночной Camino.

<style type="text/css" media="screen">
  iframe {
    width  : 500px;
    height : 250px;
  }
</style>

<script type="text/javascript" charset="utf-8">
  function setZoom(element, zoom) {
    element.style.zoom = (zoom || 50) + '%'
  }
</script>

<p>Hello World</p>

<iframe 
  src    = 'http://google.com' 
  onload = "setZoom(this.contentDocument.body)"
  />

Answer 3

Самое близкое, о чем я могу подумать, это Zoom в CSS3:

div.zoom { zoom: 200%; }

<div class="zoom">
  <p>Hello World</p>
</div>

не будет работать, просто добавив его в тег ifarme:

<iframe id="myFrame" class="zoom" /> <!-- doesn't work -->

Вам придется применить его к тегу содержимого внутри самого DOM iframe, либо BODY, либо div-оболочки.

Кроме этого, я не знаю способа сделать это, чтобы найти отличную поддержку кросс-браузер.

Answer 4

Это также можно сделать в FF, например:

iframe {
 -moz-transform: scale(0.5, 0.5); /* 50% */
}

Отлично работает!

Проверка: https://developer.mozilla.org/en/CSS/-moz-transform