Document (rozszerzenie)#
document.readyState#
Właściwość readyState jest bardzo ciekawa, ponieważ przechowuje aktualny status wczytywania dokumentu (current document readiness). Status ten może się zmieniać w czasie pobierania i przetwarzania strony oraz jej zasobów. Dostępne są trzy następujące wartości:
loading- dokument jest tworzonyinteractive- dokument został sparsowany, ale wciąż pobierane są dodatkowe zasoby (np. style, grafika, zawartość ramek)complete- dokument wraz ze wszystkimi zasobami został wczytany
Właściwość readyState jest tylko do odczytu. Kiedy dokument jest tworzony i jest związany z parserem HTML, parserem XML lub procesorem XSLT, zawsze musi mieć ustawiony aktualny status wczytywania dokumentu na początkową wartość tekstową "loading". Na końcu musi zostać podana wartość "complete". W czasie wczytywania strony różne algorytmy mogą dodatkowo wpływać na tę wartość.
Za każdym razem, kiedy wartość readyState ulega zmianie, w aplikacjach klienckich musi zostać automatycznie odpalone zdarzenie readystatechange na obiekcie document. Zdarzenie to można przechwycić np. za pomocą atrybutowego uchwytu onreadystatechange lub za pomocą metody nasłuchującej addEventListener. Prosty przykład:
<script>
document.onreadystatechange = function(){
alert(document.readyState); // Aktualny status
}
// Alternatywnie
document.addEventListener("readystatechange", function(){
alert(document.readyState); // Aktualny status
}, false);
</script>Prawdę mówiąc jest to kolejny sposób pozwalający na uruchamianie skryptów w specyficznych sytuacjach, aczkolwiek żadko stosowany przez programistów. Większość z nich stosuje klasyczne polecenia, np.:
<script>
window.onload = function(){
alert("Wszystkie zasoby wczytane");
}
document.addEventListener("DOMContentLoaded", function(){
alert("Dokument sparsowany");
}, false);
</script>Z tego co widzę zdarzenie load nie jest odpalane dla obiektu document w najnowszych przeglądarkach, chociaż jest definiowane przez specyfikację HTML5.
Nie bez powodu prezentuje te wszystkie sposoby w jednym miejscu. Pomimo że niektóre z nich wydają się robić to samo (np. readyState = "interactive" i DOMContentLoaded), w praktyce jedne będą wykonywać się zawsze minimalnie przed drugimi. Wynika to ze szczegółowego opisu przetwarzania dokumentu w HTML5. Każda zmiana właściwości, każde odpalenie zdarzenia ma swoje określone miejsce i trzeba się z tym liczyć. Przykład:
<script>
window.onload = function(){
alert("window.onload"); // Czwarte
}
document.onreadystatechange = function(){
if (document.readyState == "interactive"){
alert("document.readyState == interactive"); // Pierwsze
}
if (document.readyState == "complete"){
alert("document.readyState == complete"); // Trzecie
}
}
document.addEventListener("DOMContentLoaded", function(){
alert("DOMContentLoaded"); // Drugie
}, false);
</script>Nie jest to problemem kiedy pracujemy z własnymi skryptami, zawsze dobierzemy odpowiednie rozwiązanie. Wiedza taka będzie szczególnie użyteczna przy tworzeniu skryptów uruchamianych w różnych przeglądarkach za pomocą Greasemonke'a, Scriptisha czy Tampermonke'a. Każdy z tych dodatków podczepia skrypty w troszkę inny sposób, ale znając podstawy bardzo łatwo nad tym zapanować i zapewnić pełną przenośność między rozszerzeniami.
Właściwość readyState pojawia się dopiero w specyfikacji HTML5.
Interfejs Web IDL#
readonly attribute DOMString readyState;