Programista-web: Przekazywanie parametrów w kodzie HTML

Przekazywanie dodatkowych parametrów, które winny być uwzględnione w procesie tworzenia strony wydaje się trywialnym zagadnieniem. Takie dodatkowe parametry są potrzebne, gdy nie można (lub jest utrudnione) wstawienie odpowiedniej dane bezpośrednio do źródła HTML. Przykładem może strona główna z aplikacji invoicer, która do programu zadawana jest jako szablon, na której chcemy umieścić aktualny numer wersji programu. Jedno z rozwiązań polega na sparsowaniu pliku szablonu, odszukaniu słów kluczowych i na ich podstawie modyfikacji go w locie. Poniżej fragment kodu z ustawień bloggera.

body {
font: $(body.font);
}

Zamiast opracować odpowiednią notację szablonu, umożliwiającą programowi sparsowanie szablonu i jej zaimplementowanie, znalezienie odpowiedniego miejsca i wstawienie numeru można zlecić przeglądarce.

tworzenie szablonu

Szablon strony głównej
W źródle szablonu tworzymy własny element wyświetlający nr wersji, jedynym elementem wyróżniającym jest id

<span id="md-version"><a href="http://www.invoicer.pl"><div >  </div></a></span>

przygotowanie skryptów

Równolegle do szablonu tworzony jest funkcja w skrypcie, której celem przeniesienie parametru

function StartMain(){
..
try{
var xUser=document.getElementById('idversion').innerHTML;
document.getElementById('md-version').innerHTML=xUser;
} catch(ee) { };
..
}

Aby uniezależnić się od konstrukcji szablonu, który może zwyczajnie nie przewidywać miejsca na nr wersji dobrze jest wyłapać wyjątek. Wtedy nie będzie to miało wpływu na pozostałe części skryptu.

To co musi zrobić program:

Przed wysłaniem strony do szablonu doklejane są dodatkowe informacje konieczne do zbudowania poprawnej strony. Przyjęto konwencję że szablon zawiera sekcję body docelowej strony, a aplikacja jest odpowiedzialna za uzupełnienie kodu początkowego i końcowego. Ponieważ przyjęto również zasadę pomijania tagu body aplikacja może swobodnie uzupełnić kod o dodatkowe parametry.

'<body onload="StartMain();" oncontextmenu="return true;">'
....
'<div id="idversion" style="display:none;">Invoicer 248</div>';

Początkowo próbowałem przesyłać parametry w sekcji head jako elementy meta, niestety metoda ta nie jest akceptowana przez wszystkie przeglądarki. Dlatego pewniejsze jest wykorzystanie niewyświetlanych elementów div style="display:none"

Funkcja startMain jest wywoływana przez przeglądarkę po załadowaniu strony. Przyjąłem konwencję że jest ona definiowana w pliku o nazwie takiej samej jak nazwa pliku szablonu (tylko rozszerzenie zmienione na ".js").

Funkcja podpięta do onload w nagłówku body wywoływana jest jedynie przy pełnym wywołaniu strony konieczne jest również wywołanie jej przy aktualizacji asynchronicznej via XMLHttpRequest, ale to już należy wbudować w procedurę obsługi.

rezultat

Technika ta została zastosowana również do przekazywania loginu, bazy danych, wersji językowej.

Programista-web

piątek, 28 października 2011

Przekazywanie parametrów w kodzie HTML

body {
font: $(body.font);
}

tworzenie szablonu

<span id="md-version"><a href="http://www.invoicer.pl"><div >  </div></a></span>

przygotowanie skryptów

function StartMain(){
..
try{
var xUser=document.getElementById('idversion').innerHTML;
document.getElementById('md-version').innerHTML=xUser;
} catch(ee) { };
..
}

To co musi zrobić program:

'<body onload="StartMain();" oncontextmenu="return true;">'
....
'<div id="idversion" style="display:none;">Invoicer 248</div>';

rezultat

Brak komentarzy:

Prześlij komentarz

piątek, 28 października 2011

Przekazywanie parametrów w kodzie HTML

body { font: $(body.font); }

tworzenie szablonu

<span id="md-version"><a href="http://www.invoicer.pl"><div > &nbsp;</div></a></span>

przygotowanie skryptów

function StartMain(){ .. try{ var xUser=document.getElementById('idversion').innerHTML; document.getElementById('md-version').innerHTML=xUser; } catch(ee) { }; .. }

To co musi zrobić program:

'<body onload="StartMain();" oncontextmenu="return true;">' .... '<div id="idversion" style="display:none;">Invoicer 248</div>';

rezultat

Brak komentarzy:

Prześlij komentarz

body {
font: $(body.font);
}

<span id="md-version"><a href="http://www.invoicer.pl"><div > </div></a></span>

function StartMain(){
..
try{
var xUser=document.getElementById('idversion').innerHTML;
document.getElementById('md-version').innerHTML=xUser;
} catch(ee) { };
..
}

'<body onload="StartMain();" oncontextmenu="return true;">'
....
'<div id="idversion" style="display:none;">Invoicer 248</div>';