Javascript - automatyczne odświeżanie strony (faza projektowa - układ i kolory).

Modyfikacja: 2012-01-31

Dobierając odpowiednią kolorystykę oraz układ elementów na stronie WWW warto je przeglądać w przeglądarce internetowej - na dzień dzisiejszy najlepiej używać Firefox, ponieważ jest najbardziej zgodna ze specyfikacją techniczną języka (X)HTML oraz css. Jeżeli jesteście sceptyczni co do tej przeglądarki warto zastosować Operę, Chrome.

Następnie należy przytestować w innych przeglądarkach (np.: IE) i usunąć najbardziej rażące problemy z wyświetleniem elementów (sama radość :)

Niektórzy twórcy stosują profesjonalne narzędzia, umożliwiające na bieżąco podglądnięcie wyników pracy w trakcie pisania strony internetowej. Jednak nie zawsze programy te są dostępne za darmo, a wersje darmowe często nie prawidłowo interpretują układ strony zapisany za pomocą arkusza stylów jak i użyte kolory.

Pisanie strony w edytorze (X)HTML oraz jej ciągłe odświeżanie w przeglądarce internetowej może nie być zbyt przyjemną czynnością, możemy zaradzić chociaż temu drugiemu ;) i zautomatyzować odświeżanie strony.

Można to rozwiązać stosując skrypt javascript, który będzie odświeżał co pewien czas stronę w przeglądarce internetowej oraz nie będzie miał wpływu na układ elementów jak i kolorystykę.

Poniżej zamieszczam przykład skryptu, który umożliwi automatyzację odświeżania strony w przeglądarce. W tagu body wpisz jako wartość atrybutu onload nazwę funkcji odpowiedzialnej za wykonanie odświeżania w tym przypadku to: createDivStatic(wait).

Drukuj Zaznacz kod
function deleteAllElements(obj){
    for (;obj.childNodes.length > 0;){
        obj.removeChild(obj.firstChild);
    }
}

function reloadPage(wait){	
    if (wait == 0)
        document.location.reload();
    else {
        deleteAllElements(document.getElementById('TIME'));
        var text = document.createTextNode(wait);
        document.getElementById('TIME').appendChild(text);
        setTimeout("reloadPage("+ (wait-1) +")", 1000);
    }
}

function createDivStatic(wait){
    var divStatic = document.createElement("div");
    divStatic.setAttribute("id", "TIME");
    divStatic.setAttribute("style", "position:absolute; top:0px; border:1px solid red; color:red;");
        
    document.getElementsByTagName('body')[0].appendChild(divStatic);
    reloadPage(wait);
}