Javascript/CSS: установить (firefox) уровень масштабирования iframe?
Я хотел бы создать страницу с несколькими iframe, отображающими разные страницы - своего рода "просмотр нескольких страниц бок о бок". Проблема в том, что при этом видовые экраны довольно малы, и я могу видеть только верхний левый угол каждой страницы.
Есть ли способ установить iframe для эффективного удаления firefox (ctrl-minus) несколько раз, чтобы вся страница была видна? Мне не особо важно, является ли текст разборчивым, только если я могу в основном увидеть, как выглядит страница.
Мне не нужно, чтобы это было кросс-браузер (для моих целей он должен работать только в последнем firefox), хотя очевидно, что кросс-браузерное решение было бы предпочтительным для всех, кому это нужно, и спотыкается этот вопрос.
Ответы
Ответ 1
Вы можете применить css-преобразования к iframes:
iframe {
-moz-transform: scale(0.25, 0.25);
-webkit-transform: scale(0.25, 0.25);
-o-transform: scale(0.25, 0.25);
-ms-transform: scale(0.25, 0.25);
transform: scale(0.25, 0.25);
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
-o-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
border: solid #ccc 10px;
}
http://jsfiddle.net/6QMcX/
Свойство origin origin позволяет масштабировать его без изменения его положения.
Это работает для Webkit, Opera, FF и IE9 (untested). Текст выглядит великолепно и по-прежнему разборчиво при очень малых размерах.
Ответ 2
Я получил соответствующие результаты (это проверено только в Chromium):
CSS
<style>
#iframe {
-moz-transform: scale(0.25, 0.25) translate(-150%, -150%);
-webkit-transform: scale(0.25, 0.25) translate(-150%, -150%);
-o-transform: scale(0.25, 0.25) translate(-150%, -150%);
transform: scale(0.25, 0.25) translate(-150%, -150%);
}
#wrapper {
width: 256px;
height: 230px;
}
</style>
HTML:
<div id="wrapper">
<iframe id="iframe" width="1024" height="920" scrollbars="no"></iframe>
</div>
Возможно, это помогает.