Skrypt AutoIFRAME
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 src="autoiframe.js"></script>
Następnie na samym końcu podstrony (tuż przed znacznikiem zamykającym </body>) należy wkleić kod:
<script> 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 https://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(); });- autoiframe
- Domyślna wartość atrybutu
id="..."ramki<iframe>...</iframe>na stronie nadrzędnej, której wysokością chcemy sterować. - 50
- Dodatkowy ostateczny "margines" pionowy na końcu podstrony, na wypadek gdyby dobrana automatycznie wysokość była jednak trochę za mała, co skutkowałoby wyświetleniem paska przewijania ramki lokalnej. Został on dobrany tak, aby nie był zbyt niski w większości przeglądarkach, jednak jeśli zajdzie potrzeba, można go oczywiście zwiększyć. Należy zauważyć, że zwykle będzie on miał wartość mniejszą niż analogiczny parametr wstępny wpisywany we wcześniejszym bloku kodu na końcu każdej z podstron, ponieważ określa margines już po wczytaniu wszystkich obrazów i innych elementów strony. Jest to wartość ostateczna tego parametru i nie będzie ona już dalej zmieniana.