Як я можу масштабувати вміст iframe?

Як я можу масштабувати вміст iframe (у моєму прикладі це HTML-сторінка, а не спливаюче вікно) на сторінці мого веб-сайту?

Наприклад, я хочу вивести вміст, який з’являється у кадрі, на 80% від початкового розміру.

Рішення 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, щоб запобігти прокрутки.

Я знайшов рішення, яке працює в 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 із зразка коду вище, і ви побачите, що я маю на увазі.)

Я знайшов щось із цього питання .

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

Цей збитий CSS працює в FF 26, Chrome 32, Opera 18 та IE9 -11 станом на 7.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 до .wrap контейнера div:

.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/

Я тільки тестував, і для мене жодне з інших рішень не працювало. Я просто спробував це, і він прекрасно працював на 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 / масштаб_фактор).

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

Вам не потрібно обертати 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, потрібно масштабувати розміри.

html {зум: 0,4;}? -)

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

Специфікація зміщення та коефіцієнт масштабування в цьому прикладі працювали на зменшенні та центруванні двох веб-сайтів у iframes для вкладок 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>

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

Я перевірив це, і він працює на chrome, IE11 та firefox.

Я думаю, що ви можете це зробити, обчисливши потрібну вам висоту та ширину за допомогою 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, корисно використовувати, -ms-zoomяк запропоновано нижче, і використовувати функцію збільшення на #wrapдіві, а не iframeідентифікатор. На мій досвід, zoomфункція намагається масштабувати поділ iframe#frame , вона б масштабувала розмір iframe, а не вміст всередині нього (для чого ви збираєтесь).

Виглядає так. Для мене працює на IE8, Chrome та FF.

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

Це було моє рішення на сторінці із шириною 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; 

}

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

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

Тож, мабуть, не найкраще рішення, але, здається, працює нормально.

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

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

Очевидно, що не намагаються виправити батьків, просто додавши стиль "zoom: 50%" до тіла дитини з трохи javascript.

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

Якщо ваш HTML оформлений у форматі css, ви, ймовірно, можете зв’язати різні таблиці стилів для різних розмірів.

Я не думаю, що HTML має такий функціонал. Єдине, що я можу собі уявити, зробить цю хитрість - це зробити обробку на стороні сервера. Можливо, ви могли б отримати знімок зображення веб-сторінки, яку ви хочете обслуговувати, масштабувати її на сервері та обслуговувати її клієнту. Однак це буде неінтерактивна сторінка. (можливо, у зображеній карті може бути посилання, але все ж.)

Ще однією ідеєю було б мати компонент на сервері, який міняв би HTML. Начебто функція масштабування Firefox 2.0. це, звичайно, не є ідеальним масштабуванням, але краще, ніж нічого.

Крім цього, я не в ідеях.

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