Czy wysokość iframe = 100% jest obsługiwana we wszystkich przeglądarkach?
Używam doctype jako:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
W moim kodzie iframe, jeśli powiem:
<iframe src="xyz.pdf" width="100%" height="100%" />
Mam na myśli, czy rzeczywiście zajmie wysokość pozostałej strony (ponieważ na górze jest inna ramka o stałej wysokości 50 pikseli) Czy jest to obsługiwane we wszystkich głównych przeglądarkach (IE / Firefox / Safari)?
Również w odniesieniu do pasków przewijania, chociaż mówię scrolling="no"
, widzę wyłączone paski przewijania w przeglądarce Firefox ... Jak całkowicie ukryć paski przewijania i automatycznie ustawić wysokość ramki iframe?
javascript
html
css
iframe
html-frames
testndtv
źródło
źródło
Odpowiedzi:
Można użyć zestawu ramek, jak stwierdzono w poprzedniej odpowiedzi, ale jeśli nalega się na użycie ramek iFrames, powinny wystarczyć 2 poniższe przykłady:
Alternatywa:
Aby ukryć przewijanie z 2 alternatywami, jak pokazano powyżej:
Hack z drugim przykładem:
Aby ukryć paski przewijania w ramce iFrame, element nadrzędny jest
overflow: hidden
ukrywany, a ramka iFrame ma zwiększać szerokość i wysokość do 150%, co powoduje, że paski przewijania są przesuwane poza stronę, a ponieważ ciało nie ma pasków przewijania nie można oczekiwać, że ramka iframe przekroczy granice strony. Ukrywa paski przewijania ramki iFrame na całej szerokości!źródło
3 podejścia do tworzenia pełnego ekranu
iframe
:Podejście 1 - procentowe długości rzutni
W obsługiwanych przeglądarkach można używać procentowych długości rzutni, takich jak
height: 100vh
.Gdzie
100vh
reprezentuje wysokość rzutni i podobnie100vw
reprezentuje szerokość.Przykład tutaj
Podejście 2 - Naprawiono pozycjonowanie
To podejście jest dość proste. Wystarczy ustawić pozycję
fixed
elementu i dodaćheight
/width
z100%
.Przykład tutaj
Podejście 3
Dla tej ostatniej metody, po prostu ustawić
height
zbody
/html
/iframe
elementy100%
.Przykład tutaj
źródło
display: block
zrobiło sztuczkę, aby zapobiec podwójnemu1. Zmień DOCTYPE na coś mniej surowego. Nie używaj XHTML; to jest głupie. Wystarczy użyć typu HTML 5 i jesteś dobry:
2. Może być konieczne upewnienie się (w zależności od przeglądarki), że rodzic elementu iframe ma wysokość. I jego rodzic. I jego rodzic. Itp:
źródło
Wpadłem na ten sam problem, ciągnąłem iframe do diva. Spróbuj tego:
Wysokość jest ustawiona na 100vh, co oznacza wysokość rzutni. Ponadto szerokość można ustawić na 100vw, chociaż prawdopodobnie wystąpią problemy, jeśli plik źródłowy będzie reagować (ramka stanie się bardzo szeroka).
źródło
Działa to bardzo dobrze dla mnie (tylko jeśli zawartość iframe pochodzi z tej samej domeny ):
źródło
iframe
src
jest w tej samej domenie co strona nadrzędna, w przeciwnym razie pojawi się błąd odmowy uprawnieńcontentWindow.document
.źródło
źródło
Następujące przetestowane działanie
źródło
Oprócz odpowiedzi Akshit Soota: ważne jest, aby jawnie ustawić wysokość każdego elementu nadrzędnego, również tabeli i kolumny, jeśli takie istnieją:
źródło
Najpierw dodajesz css
To będzie html:
źródło
Oto zwięzły kod. To zależy od metody jquery, aby znaleźć bieżącą wysokość okna. Po załadowaniu iFrame ustawia wysokość ramki iframe na taką samą jak bieżące okno. Następnie, aby obsłużyć zmianę rozmiaru strony, znacznik treści ma moduł obsługi zdarzeń onresize, który ustawia wysokość ramki iframe za każdym razem, gdy zmienia się rozmiar dokumentu.
Oto działająca próbka: http://jsbin.com/soqeq/1/
źródło
Kolejny sposób na zbudowanie płynnego pełnego ekranu
iframe
:Osadzone wideo wypełnia całość
viewport
obszar podczas ładowania stronyŁadne podejście do stron docelowych z wideo lub dowolną zawartością osadzoną. Poniżej możesz umieścić dowolną dodatkową zawartość osadzonego wideo, która jest ujawniana podczas przewijania strony w dół.
Przykład:
CSS i kod HTML.
źródło
http://embedresponsively.com/
To świetny zasób i działał bardzo dobrze, kilka razy go użyłem. Tworzy następujący kod ....
źródło
Tylko to zadziałało dla mnie (ale dla „tej samej domeny”):
możesz użyć:
lub
źródło
Zgodnie z https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe wartości procentowe nie są już dozwolone. Ale następujące działało dla mnie
Chociaż
width:100%
działa,height:100%
nie działa. Więcwindow.innerHeight
zostało wykorzystane. Możesz także użyć pikseli css dla wysokości.Działający kod: Link Działająca strona: Link
źródło
źródło
Możesz wywołać funkcję, która obliczy wysokość ciała elementu iframe po załadowaniu elementu iframe:
źródło