Как увеличить содержимое IFRAME только без использования набора кадров? - PullRequest
Новая
       7

Как увеличить содержимое IFRAME только без использования набора кадров?

10 голосов
/ 26 августа 2011

Мне нужно только масштабировать содержимое кадра.Здесь на своей веб-странице я использовал zoom: 0.75; height: 520px; width: 800px;.Если я увеличу значение масштабирования, это будет означать, что размер кадра будет увеличен. 

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 <STYLE>

#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</STYLE>
 </HEAD>

 <BODY>

  <IFRAME id="frame" src="http://www.google.com"></IFRAME> 

  </BODY>

</HTML>

На приведенном выше примере HTML-страницы я хочу увеличить содержимое IFRAME без изменения размера этого IFRAME.

Ответы [ 4 ]

15 голосов
/ 14 февраля 2012

Я использовал скрипт на своем Facebook, и он работает в IE и Firefox 

<style type="text/css">
#iframe {
    zoom: 0.15;
    -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>

<iframe src="https://www.wikipedia.org/"  height="700" width="550">Wikipedia Encyclopedia</iframe>
6 голосов
/ 01 мая 2015

Не уверен, что это работает со связанными документами, но с локально размещенным контентом работают следующие: 

<IFRAME id="frame" src="local.pdf#zoom=100"></IFRAME>
3 голосов
/ 26 августа 2011

Для этого вам может понадобиться JavaScript.

Здесь есть плагин для jQuery: http://css -tricks.com / examples / AnythingZoomer /

Вы можете изменить iframes src на локальную веб-страницу (например, frame.htm), поместить div во фрейм и использовать функцию jquery load () для загрузки контента в фрейм: 

<script type="text/javascript">
     $(document).ready(function() {
          $("#loadGoogle").load("pageToLoad.html", function(){ 
             //loaded
          });
    })
</script>
<div id="loadGoogle" style="width: 100%; height: 100%;"></div>

Затем используйте плагин jquery zoom внутри фрейма для увеличения содержимого. 

<script type="text/javascript">
    $("#loadGoogle").anythingZoomer({

       expansionSize: 30,
       speedMultiplier: 1.4

    });
</script>
0 голосов
/ 14 июля 2015

Для обновленного ответа это отличное руководство.Приветствия

http://www.collaboration133.com/how-to-scale-iframe-content-in-ie-chrome-firefox-and-safari/2717/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...