Wprowadzenie do JavaScript
Część 3
Dla przykładu, możesz utworzyć dwie ramki. Jedną z normalnym dokumentem HTML, drugą z paskiem narzędziowym. Pasek mógłby zawierać przyciski, za pomocą których nawigujemy w dokumencie. Pasek narzędziowy będzie zawsze widoczny, nawet gdy do drugiej ramki załadujesz inny dokument HTML. Najpierw chciałbym Ci pokazać jak to będzie wyglądać w praktyce. Po prostu naciśnij poniższy przycisk i przyjrzyj się jak wygląda strona z ramkami. (Jeśli oglądasz tę stronę w sieci, będziesz musiał chwilkę zaczekać, gdyż skrypty są ładowane z serwera).
A oto definicja ramek w języku HTML:
Najpierw informujesz przeglądarkę, ile ramek chcesz wyświetlić. Jest to zdefiniowane w znaczniku <frameset...>. Gdy podasz informację o wierszach, przeglądarka podzieli okno na wiersze. Możesz także utworzyć kolumny, wstawiając cols zamiast rows. Możesz również użyć kilku znaczników <frameset...>. A oto przykład:
Definicja powoduje utworzenie dwóch kolumn, przy czym druga kolumna jest podzielona na trzy równe części. 50%,50% w pierwszym znaczniku <frameset> mówi przeglądarce, jak duże mają być ramki (jak szerokie kolumny).
Myślę, że podstawowe zasady tworzenia ramek są łatwe do zrozumienia. A teraz spójrz na następny przykład:
Kliknięcie na przycisku wyświetli okno, w którym będziesz mógł kolejnymi kliknięciami na przyciskach przywołać tekst w drugiej ramce (po każdym kliknięciu użyj przycisku Back w listwie przeglądarki - przyp. tłum.)
Aby utworzyć ramki, będziesz potrzebował (frames.htm):
Oto źródło frame1.htm:
A teraz frame2.htm:
Wow! Skrypty robią się coraz dłuższe! Co zostało zrobione? Użytkownik ładuje pierwszy plik (frames.htm). Ten z kolei tworzy ramki i ładuje do ramek dokumenty - frame1.htm do ramki o nazwie 'fr1' i frame2.htm do ramki o nazwie 'fr2'. Jak dotąd jest to język HTML. Jak możesz się przekonać, frame1.htm zawiera pewne funkcje JavaScript. Ale nie zostały one wywołane w pierwszym skrypcie. Czy te funkcje w ogóle są do czegoś potrzebne? A może jestem zbyt leniwy, żeby usunąć te niepotrzebne funkcje? Choć z pewnością jestem typem gnuśnego faceta, te akurat funkcje są naprawdę potrzebne. Są one wywoływane przez skrypt drugiej ramki 'frame2.htm'. W tym skrypcie tworzymy przyciski, w taki sam sposób, jaki opisaliśmy w pierwszej części Wprowadzenia. Własność onClick jest już nam także znana. Tylko co oznacza to 'parent.fr1'?
Jeśli są Ci znane obiekty, nie będzie to dla Ciebie nowość. Jak zobaczyliśmy wyżej, frame1.htm i frame2.htm są przywoływane przez frames.htm. Dokument frames.htm jest nazywany ramką nadrzędną dla tych dwóch ramek, te zaś, w konsekwencji, są ramkami podrzędnymi dla frames.htm. Możesz tutaj dostrzec rodzaj pewnej hierarchii, która powoduje interrelacje między różnymi ramkami. Spróbuję pokazać tę ideę za pomocą semigrafiki:
Tego rodzaju układ można oczywiście rozszerzać. Możesz utworzyć dalsze ramki podrzędne dla ramek, które same są już podrzędne.
Jeśli chcesz coś zindeksować w ramce nadrzędnej z frame2.htm, po prostu wstaw parent przed funkcją, którą wywołujesz. Adresowanie funkcji zdefiniowanych w frame1.htm z ramki nadrzędnej może być wykonane przez wstawienie fr1 przed wywołaniem funkcji. Dlaczego fr1? W skrypcie dla ramki nadrzędnej (frames.htm) utworzyłeś różne ramki i nadałeś im odmienne nazwy. Ja sam wybrałem fr1 dla pierwszej ramki. Następny krok jest łatwy. Jak jest wywoływana pierwsza ramka, gdy chcesz się do niej odnieść z poziomu drugiej ramki (trzymanej w drugim okienku, nazwanym fr2)? Jak widzisz, na moim okropnym rysunku nie ma bezpośredniego połączenia między ramkami frame1.htm i frame2.htm. Nie możesz więc bezpośrednio wywoływać z ramki frame2.htm funkcji zdefiniowanych w frame1.htm. Musisz je wywołać za pośrednictwem ramki nadrzędnej. Poprawnym indeksem jest więc parent.fr1. Jeśli chcesz wywołać funkcję hi() z ramki frame2.htm, napisz po prostu parent.fr1.hi(). To jest właśnie to, co zostało zrobione w drugim skrypcie we własności onClick.
Jeśli utworzyłeś jakieś ramki i ktoś korzysta z odsyłacza, ramki nie znikają. Tak jest w porządku, jeśli użytkownik 'pozostaje' w Twojej ramce. Mógłbyć utworzyć pasek z menu, który cały czas pozostaje na ekranie. Ale jeśli Twój czytelnik skacze do innej strony w Internecie, pasek z menu może nie być już wcale potrzebny. Jak więc możesz usunąć ramki, gdy zostały już utworzone?
Po prostu dodaj TARGET=_top do znacznika <a href...>. Wygląda to mniej więcej tak:
Oczywiście musisz dodać TARGET=_top do każdego odsyłacza, który wyprowadza czytelnika 'na zewnątrz'. Jeśli każdy odsyłacz na stronie prowadzi na zewnątrz, możesz także napisać <base target="_top"> w części nagłówkowej Twojego dokumentu HTML. Oznacza to, że każdy odsyłacz na stronie będzie usuwał ramki po kliknięciu.
Wiele osób pyta, jak współpracują ze sobą JavaScript i ramki. Aby widzieć ramki, musisz dysponować Netscape Navigatorem 2.0 lub późniejszym. Jest kilka innych przeglądarek, które akceptują ramki, ale nie potrafią interpretować JavaScript. Ale myślę, że jest to tylko kwestia czasu i pojawią się dalsze programy radzące sobie z jednym i drugim.
W pierwszej kolejności chciałbym powiedzieć kilka słów o ramkach. Wiele podręczników i instrukcji nie zawiera żadnej wzmianki o ramkach, ponieważ jest to nowa konstrukcja. Używając ramek, możesz 'dzielić' okno zawierające dokumenty HTML, na kilka odrębnych części. W ten sposób masz do dyspozycji szereg niezależnych części, do których możesz ładować różne strony. Miłą cechą ramek jest to, że mogą one na siebie wzajemnie oddziaływać. Oznacza to, że mogą wymieniać między sobą informacje.
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frtest1.htm" name="fr1">
<FRAME SRC="frtest2.htm" name="fr2">
</FRAMESET>
</HTML>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
<FRAMESET ROWS="33%,33%,33%">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
<FRAME SRC="cell.html">
</FRAMESET>
</FRAMESET>
Ramkom możesz przypisać nazwy (name). Jest to ważne dla działania JavaScript. W pierwszym przykładzie możesz zobaczyć, jak ramki pobierają dokumenty. Użycie znacznika <frame> mówi przeglądarce, jaki dokument należy załadować.
A oto źródło:
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET ROWS="50%,50%">
<FRAME SRC="frame1.htm" name="fr1" noresize>
<FRAME SRC="frame2.htm" name="fr2">
</FRAMESET>
</HTML>
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Hiding
function hi() {
document.write("Hi!<br>");
}
function yo() {
document.write("Yo!<br>");
}
function bla() {
document.write("bla bla bla<br>");
}
// -->
</script>
</HEAD>
<BODY>
To jest nasza pierwsza ramka!
</BODY>
</HTML>
<HTML>
<body>
To jest nasza druga ramka!
<p>
<FORM NAME="buttonbar">
<INPUT TYPE="button" VALUE="Hi" onClick="parent.fr1.hi()">
<INPUT TYPE="button" VALUE="Yo" onClick="parent.fr1.yo()">
<INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()">
</FORM>
</BODY>
</HTML>
frames.htm nadrzędna
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) podrzędne
frames.htm nadrzędna
/ \
/ \
/ \
fr1(frame1.htm) fr2(frame2.htm) podrzędne szczebla 1
/ \
/ \
/ \
gchild1 gchild2 podrzędne szczebla 2
<a href="goaway.html" TARGET="_top">jeśli nie chcesz się już więcej gapić na moją stronę</a>
Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch