Jak skalować zawartość elementu iframe?

Question

Jak skalować zawartość elementu iframe (w moim przykładzie jest to strona HTML i nie jest wyskakującym okienkiem) na stronie mojej witryny?

Na przykład chcę wyświetlić zawartość wyświetlaną w elemencie iframe w 80% oryginalnego rozmiaru.

Answer 1

Nie sądzę, że HTML ma taką funkcjonalność. Jedyne, co mogę sobie wyobrazić, to załatwianie przetwarzania po stronie serwera. Być może możesz uzyskać migawkę obrazu strony internetowej, którą chcesz wyświetlić, skalować ją na serwerze i podawać klientowi. Byłaby to jednak strona nieinteraktywna. (Może imagemap może mieć link, ale nadal.)

Innym pomysłem byłoby posiadanie komponentu po stronie serwera, który zmieniłby kod HTML. SOrt podobny do funkcji zoom firefox 2.0. to oczywiście nie jest doskonałe powiększanie, ale jest lepsze niż nic.

Poza tym nie mam pomysłów.

Answer 2

Jak powiedziałem, wątpię, czy możesz to zrobić.
Być może możesz przeskalować co najmniej sam tekst, ustawiając styl font-size: 80%;.
Nie przetestowany, nie jest pewien, czy działa i nie zmienia rozmiaru pól ani obrazów.

Answer 3

html {zoom: 0.4;} -?)

Answer 4

Jeżeli HTML jest stylizowany z CSS, prawdopodobnie można powiązać różne arkusze stylów dla różnych rozmiarach.

Answer 5

myślę, że można to zrobić poprzez obliczenie wysokości i szerokości chcesz z javascript (przez document.body.clientWidth itp), a następnie wstrzykując iframe w kodzie HTML tak:

 
var element = document.getElementById("myid"); 
element.innerHTML += "<iframe src='http://www.google.com' height='200' width='" + document.body.clientWidth * 0.8 + "'/>"; 

Nie miałem 't przetestuj to w IE6, ale wydaje się, że działa z tymi dobrymi :)

Answer 6

Znalazłem rozwiązanie, które działa w IE i Firefox (przynajmniej w obecnych wersjach). W Safari/Chrome rozmiar elementu iframe jest zmieniany na 75% pierwotnego rozmiaru, ale zawartość w elemencie iframe nie jest skalowana. W przeglądarce Opera nie działa. To wydaje się nieco ezoteryczne, więc jeśli jest lepszy sposób na to, chętnie przyjmuję sugestie.

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

Uwaga: Musiałem użyć elementu wrap dla przeglądarki Firefox. Z jakiegoś powodu w przeglądarce Firefox, gdy zmniejszysz obiekt o 75%, nadal używa oryginalnego rozmiaru obrazu ze względu na układ. (Spróbuj usunąć div z powyższego przykładowego kodu, a zobaczysz, co mam na myśli.)

Znalazłem niektóre z tego z this question.

Answer 7

Kip's solution powinien działać na Opera i Safari jeśli zmienisz 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> 

kupili także określić overflow: hidden na #frame aby zapobiec przewijania.

Answer 8

Followup do lxs's answer: Zauważyłem problem gdzie posiadającą zarówno zoom i --webkit-transform tagów jednocześnie zdaje się pomieszać Chrome (wersja 15.0.874.15) wykonując coś w rodzaju podwójnego powiększenia efektu. Udało mi się obejść ten problem, zastępując zoom wartością -ms-zoom (kierowaną tylko na IE), pozostawiając Chrome do używania tylko znacznika --webkit-transform i to wyczyściło sprawę.

Answer 9

Dla tych, którzy mają problemy z uruchomieniem tego do pracy w IE, pomocne jest użycie -ms-zoom zgodnie z sugestiami przedstawionymi poniżej i użycie funkcji zoomu na div #wrap, a nie iframe id. Z mojego doświadczenia wynika, że ​​dzięki funkcji zoom próbującej przeskalować element iframe div o wartości #frame, przeskalował on rozmiar elementu iframe, a nie zawartą w nim zawartość (o to chodzi).

Wygląda jak to. Działa dla mnie na IE8, Chrome i FF.

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

Answer 10

Pomyślałem, że podzielę się tym, co wymyśliłem, wykorzystując wiele z tego, co podano powyżej. Nie zaznaczyłem Chrome, ale działa na IE, Firefox i Safari, o ile wiem.

Przesunięcia charakterystyczne i współczynnik powiększenia w tym przykładzie obejmowały obkurczanie i centrowanie dwóch witryn w elementach iframe na kartach Facebooka (szerokość 810 pikseli).

Dwie używane witryny to strona z wordpress i sieć ning. Nie jestem zbyt dobry w html, więc prawdopodobnie można by to zrobić lepiej, ale wynik wydaje się dobry.

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

Answer 11

Nie trzeba owijać elementu iframe dodatkowym znacznikiem. Po prostu upewnij się, że zwiększysz szerokość i wysokość ramki iframe o tę samą wartość, która zostanie zmniejszona w elemencie iframe.

np. skalowanie zawartości iframe do 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; 
} 

Zasadniczo, aby uzyskać ten sam rozmiar iframe trzeba przeskalować wymiary.

Answer 12

Rozwiązanie #wrap #frame działa dobrze, o ile liczba w #wrap wynosi # ramka razy współczynnik skali. Pokazuje tylko tę część zmniejszonej ramki. Można go zobaczyć tutaj skalowanie w dół stron internetowych i umieszczenie go na Pinterest jak postaci (z jQuery plugin Woodmark):

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

Answer 13

To było moje rozwiązanie na stronie z 890px szerokości

#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 14

Po wielu godzinach walki, próbując uruchomić go w IE8, 9 i 10 jest to, co sprawdziło się u mnie.

Ten okrojoną CSS działa w FF 26, Chrome 32, Opera 18, a IE9 -11 dzień 1/7/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; 
} 

Dla IE8, ustawić szerokość/wysokość, aby dopasować iframe i dodać -ms-zoom do div kontenera .wrap:

.wrap 
{ 
    width: 1280px; /* same size as frame */ 
    height: 768px; 
    -ms-zoom: 0.25; /* for IE 8 ONLY */ 
} 

Wystarczy użyć ulubionego sposobu przeglądarce wąchania warunkowo zawierać odpowiedni CSS, zobacz Is there a way to do browser specific conditional CSS inside a *.css file? dla niektórych pomysłów.

IE7 był utraconą przyczyną, ponieważ -ms-zoom nie istniał do IE8.

Oto rzeczywisty HTML testowałem z:

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

Answer 15

Jeśli chcesz iframe i jej zawartość do skali, gdy okno zmienia rozmiar, można ustawić następujące do okna przypadku zmiany rozmiaru jako oraz zdarzenie onrames onload.

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'; 
    }; 

To sprawi iframe i jej zawartość skali do 100% szerokości div oblewania (lub cokolwiek procent chcesz). Dodatkową korzyścią jest to, że nie musisz ustawiać wartości css ramki na wartości zakodowane, ponieważ wszystkie zostaną ustawione dynamicznie, po prostu musisz się martwić o to, jak chcesz, aby wrap wrap wyświetlał się.

Przetestowałem to i to działa w Chrome, IE11 oraz Firefox.

Answer 16

Prawdopodobnie nie jest to najlepsze rozwiązanie, ale wydaje się działać poprawnie.

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

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

Oczywiście nie próbuje naprawić rodzica, po prostu dodając „zoom: 50%” styl do ciała dziecka z odrobiną javascript.

Może ustawić styl „HTML” element, ale nie spróbować.

Answer 17

Zauważyłem, że skalowanie odbywa się automatycznie, kiedy określić szerokość kontenera nadrzędnego (DIV) na stronie docelowej nie w pikselach, ale i tylko w procentach. Zdarza się automatycznie.

1. W moim przypadku definiuję dla exmpl. Szerokość 480px dla elementu div, w którym zostanie ustawiona ramka iframe. 2.Przy ustawieniu 100% szerokości dla elementu iframe. 3. Ustawić 250% szerokości elementu nadrzędnego na stronie docelowej (5 obrazów x 50% szerokości ekranu).

Moim zamiarem jest pokazanie, 2 obrazy (szerokości) w ramce, a dokładnie, co dzieje się w każdym przypadku szerokości ramki.

Dlaczego działa tylko w procentach?

Answer 18

Po prostu przetestowałem i dla mnie żadne z pozostałych rozwiązań nie zadziałało. ja po prostu próbowałem i działało idealnie na Firefox i Chrome, tak jak się spodziewałem:

<div class='wrap'> 
    <iframe ...></iframe> 
</div> 

i css:

.wrap { 
    width: 640px; 
    height: 480px; 
} 

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; 
} 

To skaluje wszystkie treści o 30%. Oczywiście należy odpowiednio dostosować wartości procentowe szerokości/wysokości (1/scale_factor).