Ponieważ wszystkie współczesne przeglądarki obsługują transformację od dłuższego czasu, rozważę użycie wersji bez prefiksu (przynajmniej jako alternatywy).
wortwart
55
Znalazłem rozwiązanie, które działa w IE i Firefox (przynajmniej w aktualnych wersjach). W przeglądarce Safari / Chrome rozmiar elementu iframe jest zmieniany do 75% jego oryginalnego rozmiaru, ale zawartość elementu iframe nie jest w ogóle skalowana. W Operze to nie działa. To trochę ezoteryczne, więc jeśli istnieje lepszy sposób, chętnie skorzystam z sugestii.
<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:00;}</style>
...
<p>Some text before the frame</p><divid="wrap"><iframeid="frame"src="test2.html"></iframe></div><p>Some text after the frame</p></body>
Uwaga: musiałem użyć tego wrapelementu w przeglądarce Firefox. Z jakiegoś powodu w Firefoksie, gdy skalujesz 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).
Właśnie przetestowałem i dla mnie żadne inne rozwiązanie nie zadziałało. Po prostu spróbowałem tego i działało idealnie na Firefox i Chrome, tak jak się spodziewałem:
Chcesz także dodać overflow: hidden;do .wrapelementu. Gdy używasz iframe { width: 200%; height: 200%; transform: scale(0.5); }iframe zaczyna się przepełniać.
ozgrozer
To jest najnowocześniejsze podejście. Dzięki!
fuggi
10
Nawiązanie do odpowiedzi LXS męska : Zauważyłem problem gdzie posiadające zarówno zoomi --webkit-transformznaczniki jednocześnie wydaje się pomieszać Chrome (wersja 15.0.874.15) wykonując dwukrotnie powiększyć rodzaj efektu. Byłem w stanie obejść ten problem, zastępując zoomgo -ms-zoom(skierowany tylko na IE), pozostawiając Chromeowi korzystanie z samego --webkit-transformtagu, i to wszystko rozwiązało.
Nie trzeba owijać ramki iframe dodatkowym znacznikiem. Upewnij się tylko, że zwiększysz szerokość i wysokość ramki iframe o tę samą wartość, którą skalujesz w dół ramki.
np. aby skalować zawartość 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:00;}
Zasadniczo, aby uzyskać ten sam rozmiar iframe, należy skalować wymiary.
Wynosi to 0,8 dla 80%, ale jest to zastrzeżony Microsoftizm, więc prawdopodobnie nie jest odpowiedni. Działa to również tylko wtedy, gdy dokument załadowany do ramki może być edytowany, co jest mało prawdopodobne.
Quentin
7
Myślałem, że podzielę się tym, co wymyśliłem, wykorzystując większość tego, co podano powyżej. Nie sprawdziłem Chrome, ale o ile wiem, działa w IE, Firefox i Safari.
Specyficzne przesunięcia i współczynnik powiększenia w tym przykładzie działały na zmniejszenie i wyśrodkowanie dwóch stron internetowych w elementach iframe dla kart Facebooka (szerokość 810 pikseli).
Dwie wykorzystane strony to strona Wordpress i sieć Ning. Nie jestem zbyt dobry w html, więc prawdopodobnie można by to zrobić lepiej, ale wynik wydaje się dobry.
Jeśli chcesz, aby element iframe i jego zawartość skalowały się podczas zmiany rozmiaru okna, możesz ustawić następujące parametry dla zdarzenia zmiany rozmiaru okna, a także zdarzenia obciążenia iframe.
Spowoduje to, że element iframe i jego zawartość zostaną skalowane do 100% szerokości elementu div zawijania (lub dowolnego żądanego procentu). Jako dodatkowy bonus, nie musisz ustawiać css ramki na sztywno zakodowane wartości, ponieważ wszystkie będą ustawiane dynamicznie, musisz tylko martwić się o to, jak chcesz wyświetlać wrap div.
Przetestowałem to i działa na Chrome, IE11 i Firefox.
Myślę, że możesz to zrobić, obliczając żądaną wysokość i szerokość za pomocą javascript (przez document.body.clientWidth itp.), A następnie wstrzykując iframe do swojego HTML w następujący sposób:
Przepraszam za moją ignorancję, ale czy to nie spowodowałoby, że iframe 80% strony źródłowej, zamiast pomniejszyć samą stronę źródłową?
Phill Healey,
3
Dla tych, którzy mają problem z uruchomieniem tego w IE, pomocne jest użycie -ms-zoomzgodnie z sugestią poniżej i użycie funkcji powiększania na #wrapdiv, a nie iframeid. Z mojego doświadczenia wynika, że zoomfunkcja próbująca przeskalować div elementu iframe #framespowodowałaby przeskalowanie rozmiaru elementu iframe, a nie zawartości w nim zawartej (to jest to, o co chodzi).
Rozwiązanie #wrap #frame działa dobrze, o ile liczby w #wrap będą równe #frame razy współczynnik skali. Pokazuje tylko tę część pomniejszonej ramki. Możesz to zobaczyć tutaj, zmniejszając strony internetowe i wprowadzając go do formy przypominającej zainteresowanie (z wtyczką jQuery woodmark):
Nie rób tego Od developer.mozilla.org/en-US/docs/Web/CSS/zoom : „Ta funkcja jest niestandardowa i nie jest na standardowym torze. Nie używaj jej w witrynach produkcyjnych skierowanych do Internetu: nie będzie działać każdego użytkownika. Mogą również występować duże niezgodności między implementacjami, a zachowanie może ulec zmianie w przyszłości. ”
hackel
+1 To (modyfikowanie zawartości iframe, a nie samego iframe) wydaje się lepszym pomysłem. Potrzebowałem sposobu, aby zmniejszyć stronę i wyświetlić ją jako podgląd tej strony, a to podejście rozwiązało problem.
akinuri
@akinuri Tak, właśnie tego użyłem. Przeszedłem przez szereg rozwiązań, ale wydawało się to najłatwiejsze. Właśnie iterowałem po ramkach iframe i zmniejszyłem je wszystkie, aby uzyskać stronę miniatur. Nie są wymagane zmiany stron podrzędnych.
Graham
1
Jeśli Twój HTML jest stylem css, prawdopodobnie możesz połączyć różne arkusze stylów dla różnych rozmiarów.
Nie sądzę, żeby HTML miał taką funkcjonalność. Jedyną rzeczą, jaką mogę sobie wyobrazić, byłaby sztuczka po stronie serwera. Być może możesz uzyskać migawkę obrazu strony internetowej, którą chcesz wyświetlać, skalować na serwerze i podawać klientowi. Byłaby to jednak strona nieinteraktywna. (może mapa obrazu może mieć link, ale nadal).
Innym pomysłem byłoby posiadanie komponentu po stronie serwera, który zmieniałby HTML. Bardzo podobna funkcja zoomu w Firefoksie 2.0. to oczywiście nie jest idealne powiększanie, ale jest lepsze niż nic.
Jak powiedziałem, wątpię, czy możesz to zrobić.
Być może możesz skalować przynajmniej sam tekst, ustawiając styl font-size: 80%;.
Nie przetestowano, nie jestem pewien, czy to działa i nie zmienia rozmiaru pól ani obrazów.
Odpowiedzi:
Rozwiązanie Kip powinno działać na Opera i Safari, jeśli zmienisz CSS na:
Możesz także określić przepełnienie: ukryte na #frame, aby zapobiec paskom przewijania.
źródło
Znalazłem rozwiązanie, które działa w IE i Firefox (przynajmniej w aktualnych wersjach). W przeglądarce Safari / Chrome rozmiar elementu iframe jest zmieniany do 75% jego oryginalnego rozmiaru, ale zawartość elementu iframe nie jest w ogóle skalowana. W Operze to nie działa. To trochę ezoteryczne, więc jeśli istnieje lepszy sposób, chętnie skorzystam z sugestii.
Uwaga: musiałem użyć tego
wrap
elementu w przeglądarce Firefox. Z jakiegoś powodu w Firefoksie, gdy skalujesz 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 trochę tego z tego pytania .
źródło
Po wielu godzinach zmagania się z tym, próbując uruchomić go w IE8, 9 i 10, oto co dla mnie zadziałało.
Ten uproszczony CSS działa w FF 26, Chrome 32, Opera 18 i IE9-11 od 1/7/2014:
W przypadku IE8 ustaw szerokość / wysokość, aby dopasować ramkę iframe, i dodaj -ms-zoom do div kontenera .wrap:
Wystarczy użyć ulubionej metody podsłuchiwania przeglądarki, aby warunkowo dołączyć odpowiedni CSS, zobacz Czy istnieje sposób na wykonanie warunkowego CSS specyficznego dla przeglądarki w pliku * .css? dla niektórych pomysłów.
IE7 był straconą przyczyną, ponieważ -ms-zoom nie istniał aż do IE8.
Oto rzeczywisty kod HTML, który testowałem:
http://jsfiddle.net/esassaman/PnWFY/
źródło
Właśnie przetestowałem i dla mnie żadne inne rozwiązanie nie zadziałało. Po prostu spróbowałem tego i działało idealnie na Firefox i Chrome, tak jak się spodziewałem:
i css:
Skaluje to całą zawartość o 30%. Wartości procentowe szerokości / wysokości należy oczywiście odpowiednio dostosować (1 / współczynnik_skalowy).
źródło
overflow: hidden;
do.wrap
elementu. Gdy używasziframe { width: 200%; height: 200%; transform: scale(0.5); }
iframe zaczyna się przepełniać.Nawiązanie do odpowiedzi LXS męska : Zauważyłem problem gdzie posiadające zarówno
zoom
i--webkit-transform
znaczniki jednocześnie wydaje się pomieszać Chrome (wersja 15.0.874.15) wykonując dwukrotnie powiększyć rodzaj efektu. Byłem w stanie obejść ten problem, zastępujączoom
go-ms-zoom
(skierowany tylko na IE), pozostawiając Chromeowi korzystanie z samego--webkit-transform
tagu, i to wszystko rozwiązało.źródło
Nie trzeba owijać ramki iframe dodatkowym znacznikiem. Upewnij się tylko, że zwiększysz szerokość i wysokość ramki iframe o tę samą wartość, którą skalujesz w dół ramki.
np. aby skalować zawartość iframe do 80%:
Zasadniczo, aby uzyskać ten sam rozmiar iframe, należy skalować wymiary.
źródło
html {zoom: 0.4;}? -)
źródło
Myślałem, że podzielę się tym, co wymyśliłem, wykorzystując większość tego, co podano powyżej. Nie sprawdziłem Chrome, ale o ile wiem, działa w IE, Firefox i Safari.
Specyficzne przesunięcia i współczynnik powiększenia w tym przykładzie działały na zmniejszenie i wyśrodkowanie dwóch stron internetowych w elementach iframe dla kart Facebooka (szerokość 810 pikseli).
Dwie wykorzystane strony to strona Wordpress i sieć Ning. Nie jestem zbyt dobry w html, więc prawdopodobnie można by to zrobić lepiej, ale wynik wydaje się dobry.
źródło
Jeśli chcesz, aby element iframe i jego zawartość skalowały się podczas zmiany rozmiaru okna, możesz ustawić następujące parametry dla zdarzenia zmiany rozmiaru okna, a także zdarzenia obciążenia iframe.
Spowoduje to, że element iframe i jego zawartość zostaną skalowane do 100% szerokości elementu div zawijania (lub dowolnego żądanego procentu). Jako dodatkowy bonus, nie musisz ustawiać css ramki na sztywno zakodowane wartości, ponieważ wszystkie będą ustawiane dynamicznie, musisz tylko martwić się o to, jak chcesz wyświetlać wrap div.
Przetestowałem to i działa na Chrome, IE11 i Firefox.
źródło
Myślę, że możesz to zrobić, obliczając żądaną wysokość i szerokość za pomocą javascript (przez document.body.clientWidth itp.), A następnie wstrzykując iframe do swojego HTML w następujący sposób:
Nie testowałem tego w IE6, ale wydaje się, że działa z tymi dobrymi :)
źródło
Dla tych, którzy mają problem z uruchomieniem tego w IE, pomocne jest użycie
-ms-zoom
zgodnie z sugestią poniżej i użycie funkcji powiększania na#wrap
div, a nieiframe
id. Z mojego doświadczenia wynika, żezoom
funkcja próbująca przeskalować div elementu iframe#frame
spowodowałaby przeskalowanie rozmiaru elementu iframe, a nie zawartości w nim zawartej (to jest to, o co chodzi).Wygląda tak. Działa dla mnie na IE8, Chrome i FF.
źródło
zoom
w trybie normalnym IE8, używaj-ms-zoom
w trybie dziwactw.To było moje rozwiązanie na stronie o szerokości 890 pikseli
źródło
Rozwiązanie #wrap #frame działa dobrze, o ile liczby w #wrap będą równe #frame razy współczynnik skali. Pokazuje tylko tę część pomniejszonej ramki. Możesz to zobaczyć tutaj, zmniejszając strony internetowe i wprowadzając go do formy przypominającej zainteresowanie (z wtyczką jQuery woodmark):
http://www.genautica.com/sandbox/woodmark-index.html
źródło
Prawdopodobnie nie jest to najlepsze rozwiązanie, ale wydaje się działać.
Oczywiście nie próbując naprawić rodzica, po prostu dodając styl „zoom: 50%” do ciała dziecka za pomocą odrobiny javascript.
Może mógł ustawić styl elementu „HTML”, ale tego nie próbował.
źródło
Jeśli Twój HTML jest stylem css, prawdopodobnie możesz połączyć różne arkusze stylów dla różnych rozmiarów.
źródło
Nie sądzę, żeby HTML miał taką funkcjonalność. Jedyną rzeczą, jaką mogę sobie wyobrazić, byłaby sztuczka po stronie serwera. Być może możesz uzyskać migawkę obrazu strony internetowej, którą chcesz wyświetlać, skalować na serwerze i podawać klientowi. Byłaby to jednak strona nieinteraktywna. (może mapa obrazu może mieć link, ale nadal).
Innym pomysłem byłoby posiadanie komponentu po stronie serwera, który zmieniałby HTML. Bardzo podobna funkcja zoomu w Firefoksie 2.0. to oczywiście nie jest idealne powiększanie, ale jest lepsze niż nic.
Poza tym nie mam pomysłów.
źródło
Jak powiedziałem, wątpię, czy możesz to zrobić.
Być może możesz skalować przynajmniej sam tekst, ustawiając styl
font-size: 80%;
.Nie przetestowano, nie jestem pewien, czy to działa i nie zmienia rozmiaru pól ani obrazów.
źródło