Przejdź do treści

AutoIFRAME

Skrypt

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(); });
W wyróżnionych miejscach podano:
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.

Dotacje

Pomogła Ci ta strona? Chcesz, aby dalej się rozwijała?
Dotpay - Bezpieczne transakcje internetowePayPalWpłać dobrowolną dotację...