W Internecie dosyć popularnym rozwiązaniem, stosowanym na wielu stronach, jest budowanie struktury serwisu w oparciu o tabele (lub elementy <div>...</div>) i ramki <iframe>...</iframe> (przykład takiego właśnie szablonu znajdziesz w rozdziale Struktura tabeli). Jest to wygodne o tyle, że pozwala szybko zbudować stronę elastyczną w aktualizacji, bez wykorzystania języków skryptowych po stronie serwera (np. PHP). Niestety takie rozwiązanie ma przynajmniej jedną poważną wadę: trudno jest dopasować wysokość ramki IFRAME tak, aby była odpowiednia dla każdej rozdzielczości ekranu. Jeśli ustalimy za duży rozmiar, użytkownicy w niskiej rozdzielczości będą mieli problem z przewijaniem zawartości ramki. Natomiast jeśli ustalimy za mały, w wyższej rozdzielczości pojawi się niewielkie "okienko", w którym trudno nawigować. Pewnym rozwiązanie mogłoby być określenie na tyle dużej wysokości, aby treść ramki zawsze się w niej w całości mieściła bez konieczności pokazywania suwaków do przewijania - wtedy będzie tylko jeden suwak pionowy do przewijania całej strony głównej. Niestety takie rozwiązanie nie zawsze jest możliwe, bo na początku nie wiemy jak długie będą nasze podstrony. Poza tym jeśli ustalimy zbyt dużą wysokość, cała strona główna bardzo się rozciągnie, a po wczytaniu do ramki lokalnej krótkiej treści, na jej końcu pozostanie bardzo dużo wolnego miejsca, co będzie wyglądało dosyć dziwnie i na pewno nie będzie wygodne dla użytkownika.
Czy można sobie zatem jakoś poradzić? Oczywiście! Skrypt przedstawiony na tej stronie potrafi całkowicie automatycznie dopasować wysokość ramki IFRAME do długości aktualnie wyświetlanej w niej treści podstrony. Robi to tak, aby nigdy nie pojawił się pionowy suwak do przewijania ramki lokalnej. Wysokość nie będzie ani za duża ani za mała, ale zawsze po prostu idealnie dopasowana.
Aby zastosować taki skrypt, należy na stronie głównej do znacznika <iframe>...</iframe> dodać atrybut id="autoiframe", np.:
<iframe src="..." name="..." id="autoiframe" width="100%" height="560">...</iframe>
UWAGA!
Pamiętaj, aby podać taką wysokość ramki (height="..."), która będzie wygodna w przypadku, gdyby skrypt nie zadziałał!
Teraz na wszystkie podstrony, które będą wczytywane do ramki lokalnej, należy wstawić następujący kod (trzeba to zrobić koniecznie w nagłówku dokumentu, czyli w ramach <head>...</head>):
<script type="text/javascript" src="autoiframe.js"></script>
Następnie na samym końcu podstrony (tuż przed znacznikiem zamykającym </body>) należy wkleić kod:
<script type="text/javascript"> // <![CDATA[ autoiframe(null, 200); // ]]> </script>
W wyróżnionym miejscu (w nawiasie) można podać wartość dodatkowego wstępnego "marginesu" pionowego na końcu podstrony. Jest on szczególnie przydatny, jeśli na stronie znajdują się zdjęcia o niezdefiniowanych wymiarach za pomocą atrybutów width="..." oraz height="..." znacznika <img />. W takim przypadku margines ten należy dobrać na tyle duży, aby podczas doczytywania obrazów - a tym samym stopniowej zmiany wysokości treści - nie pojawił się pionowy suwak do przewijania ramki. Jest to tylko wartość wstępna (tymczasowa), ponieważ po wczytaniu wszystkiego, wysokość i tak się automatycznie dopasuje w drugim kroku. Jeśli chcemy zrezygnować z podawania marginesu, należy po prostu zupełnie pominąć wstawianie tej części kodu na podstronach.
Ostatnim krokiem będzie stworzenie nowego pliku autoiframe.js (w tym samym katalogu co podstrony) i zapisanie w nim:
/**
* @author Sławomir Kokłowski {@link http://www.kurshtml.edu.pl}
* @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
*/
// Domyślny identyfikator IFRAME:
var autoiframe_id = 'autoiframe';
// Domyślny dolny margines:
var autoiframe_margin = 50;
var autoiframe_timer = null;
function autoiframe(id, margin)
{
if (parent != self && document.body && document.body.offsetHeight && document.body.scrollHeight)
{
clearTimeout(autoiframe_timer)
if (typeof id != 'undefined' && id) autoiframe_id = id;
parent.document.getElementById(autoiframe_id).height = 1;
autoiframe_timer = setTimeout("parent.document.getElementById(autoiframe_id).height = Math.max(document.body.offsetHeight, document.body.scrollHeight) + " + (typeof margin == 'undefined' || isNaN(parseInt(margin)) ? autoiframe_margin : parseInt(margin)), 1);
}
}
if (window.addEventListener) window.addEventListener('load', function() { autoiframe(); }, false);
else if (window.attachEvent) window.attachEvent('onload', function() { autoiframe(); });id="..." ramki <iframe>...</iframe> na stronie nadrzędnej, której wysokością chcemy sterować.Czasami zachodzi potrzeba umieszczenia na jednej stronie kilku ramek <iframe>...</iframe>, których wysokość powinna się automatycznie dopasowywać do zawartości. Oczywiście dla każdej takiej ramki proces dostosowywania wysokości musi zachodzić niezależnie. Aby to zrobić, należy dla każdej takiej ramki należy ustawić odrębny identyfikator id="...". Na przykład tak mógłby wyglądać fragment strony głównej serwisu:
<iframe src="..." name="..." id="autoiframe" width="100%" height="560">...</iframe> <iframe src="..." name="..." id="autoiframe2" width="100%" height="560">...</iframe>
Nic nie stoi na przeszkodzie, aby wstawić więcej niż dwie ramki <iframe>...</iframe> - każda kolejna z innym identyfikatorem id="...". Następnie na końcu wszystkich podstron wczytywanych do ramki id="autoiframe" - nazwijmy ją ramką główną - umieszczamy taki kod jak poprzednio, tzn.:
<script type="text/javascript"> // <![CDATA[ autoiframe(null, 200); // ]]> </script>lub
<script type="text/javascript">
// <![CDATA[
autoiframe('autoiframe', 200);
// ]]>
</script>Natomiast na podstronach, które będą wczytywane do ramki id="autoiframe2", umieszczamy, również na końcu, nieco zmienioną formę kodu, podając w nim wartość identyfikatora tej właśnie ramki (wstawioną w apostrofach):
<script type="text/javascript">
// <![CDATA[
autoiframe('autoiframe2', 200);
// ]]>
</script>Oczywiście oprócz tego w nagłówku wszystkich podstron - wczytywanych do obu (lub więcej) ramek - należy osadzić skrypt:
<script type="text/javascript" src="autoiframe.js"></script>
oraz sam plik skryptu autoiframe.js (przedstawiony wcześniej), w którym nie należy dokonywać żadnych zmian.
Przedstawiony tutaj skrypt był testowany w kilkunastu wersjach różnych przeglądarek - w tym we wszystkich najpopularniejszych: Microsoft Internet Explorer, Mozilla, Firefox, Opera. Jeżeli skrypt nie działa, istnieje duże prawdopodobieństwo, że został nieprawidłowo wstawiony na stronę:
<iframe>...</iframe> z odpowiednim atrybutem id="..."? Czy wartość tego atrybutu jest taka sama, jak w skrypcie (domyślnie "autoiframe")? A może identyfikator zawiera nieprawidłowe znaki, jak np. spacje lub polskie litery?<iframe>...</iframe> zostało umieszczone w nagłówku odwołanie do pliku skryptu autoiframe.js? Czy odwołanie aby nie zostało wstawione w miejscu innym niż nagłówek dokumentu (<head>...</head>)?<iframe>...</iframe>? Może to mieć miejsce, jeżeli np. korzystasz z darmowych komponentów księgi gości, forum itp., które wczytujesz do ramki AutoIFRAME. Niestety w takim przypadku skrypt nie będzie działał i nie ma na to rady :-(