Dynamiczna zmiana wysokosci IFRAME - rozwiazanie problemu: Różnice pomiędzy wersjami
Przejdź do nawigacji
Przejdź do wyszukiwania
(Utworzył nową stronę „Nie raz nie dwa korzystamy z IFRAME aby wyswietlić na stronie zewnetrzny dokument i natrafiamy na problem. Okazuje się że wszystko jest super do momentu gdy strona p...”) |
m |
||
| (Nie pokazano 5 wersji utworzonych przez 2 użytkowników) | |||
| Linia 9: | Linia 9: | ||
oto przykład zastosowania : | oto przykład zastosowania : | ||
<pre> | |||
<script language="JavaScript"> | |||
function DynamicznyIframe() { | function DynamicznyIframe() { | ||
| Linia 22: | Linia 23: | ||
<iframe onLoad="DynamicznyIframe();" src="link do dokumentu" width="100%" height="100%" | <iframe onLoad="DynamicznyIframe();" src="link do dokumentu" width="100%" height="100%" | ||
scrolling="no" frameborder="0" scroll="auto" id="ramka" marginwidth="0" | scrolling="no" frameborder="0" scroll="auto" id="ramka" marginwidth="0" | ||
marginheight="0" ></iframe> | marginheight="0" ></iframe> | ||
</pre> | |||
[[Category:HTML]] | |||
[[Category:javascript]] | |||
Aktualna wersja na dzień 21:03, 9 gru 2017
Nie raz nie dwa korzystamy z IFRAME aby wyswietlić na stronie zewnetrzny dokument i natrafiamy na problem. Okazuje się że wszystko jest super do momentu gdy strona pobierana do ramki jest o stałej wysokości, bo ustalamy sobie na sztywno wartość HEIGHT dla IFRAME i problem przewijania strony w pionie znika.
Co jednak gdy pobierany dokument ma różna wysokość w zalezności od akcji na nim wykonanej? Niestety ale jedynym rozwiazaniem jest zastosowanie JavaScript do generowania dynamicznie skalowanej w pionie ramki.
oto przykład zastosowania :
<script language="JavaScript">
function DynamicznyIframe() {
var rozmiar=
document.getElementById(\'ramka\').contentWindow.
document.body.scrollHeight;
document.getElementById(\'ramka\').height=
rozmiar;
}
</script>
<iframe onLoad="DynamicznyIframe();" src="link do dokumentu" width="100%" height="100%"
scrolling="no" frameborder="0" scroll="auto" id="ramka" marginwidth="0"
marginheight="0" ></iframe>