• Artykuł

          

Kurs JavaScript - Jak uruchomić skrypt podczas ładowania i opuszczania strony  Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-12-07

Podczas tworzenia strony WWW, istnieje możliwość zdefiniowania odpowiednich akcji (wywołania funkcji JavaScript), przy ładowaniu strony, jak również przy jej opuszczaniu (np. poprzez zamknięcie okna przeglądarki). Aby dodać taką funkcjonalność do strony, należy posłużyć się następującymi zdarzeniami: onload(), które odpowiada za akcję ładowania strony, oraz onunload(),które służy do wywołania zdefiniowanej akcji podczas jej opuszczania. Warto jednak zaznaczyć, że o ile onload() jest często używane na stronach WWW do wywołania skryptów JavaScript (często również przezroczystych dla użytkownika), o tyle używanie metody onunload() należy ograniczyć do absolutnego minimum. Jest to spowodowane faktem, że wyświetlanie komunikatów lub akcji przy kończeniu pracy ze stroną, w większości wypadków może odstraszyć użytkowników.

Aby użyć wymienionych wyżej metod, należy umieścić ich deklarację w znaczniku <body>. W takim wypadku znacznik <body> przyjmuje następującą konstrukcję:

<body onload="funkcja_javascript_przy_ladowaniu;"
onunload="funkcja_javascript_przy_opuszczaniu;">

Przykład

Poniżej zaprezentowane zostało przykładowe wykorzystanie zdarzeniaonload(), które wywołuje funkcję JavaScript, wyświetlającą informację o czasie spędzonym na stronie (Rys. 1.):

<!DOCTYPE html>
<html>
<head>
<title>Czas na stronie</title>
    <scripttype="text/javascript">
    var c=0;

    function zegar() {
    document.getElementById('txt').innerHTML = "Czas spędzony na stronie " + c + " sekund";
    c = c + 1;
    setTimeout("zegar()", 1000);
    }
    </script>
</head>
<body onload="zegar();">
    <p id="txt"></p>
</body>
</html>

Rys. 1. Przykładowe zastosowanie zdarzenia onload().

Drugi przykład prezentuje zastosowanie zdarzenia onunload(), wraz ze zdarzeniem onload(). Przy próbie opuszczenia strony przez użytkownika, wyświetlany jest komunikat informujący o długości czasu spędzonego na stronie (Rys. 2.). Jednak, tak jak zostało to wcześniej wspomniane, nie należy nadużywać tego typu rozwiązań, a wręcz ograniczyć je do minimum.

<!DOCTYPE html>
<html>
<head>
<title>Czas na stronie</title>
    <scripttype="text/javascript">
    var c=0;

    function zegar() {
    document.getElementById('txt').innerHTML = "Czas spędzony na stronie " + c +    " sekund";  
    c = c + 1;
    setTimeout("zegar()", 1000);
    }

    functionwyjscie() {
    alert("Spędziłeś na stronie " + c + " sekund");
    }
    </script>
</head>
<body onload="zegar();" onunload="wyjscie();">
    <p id="txt"></p>
</body>
</html>

Rys. 2. Przykładowe zastosowanie zdarzeń onload() oraz onunload().

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać powyższe informacje w samouczku: