Wprowadzenie do JavaScript
Część 3

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.

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:

    <HTML>
    <HEAD>
    <title>Frames</title>
    </HEAD>
        <FRAMESET ROWS="50%,50%">
        <FRAME SRC="frtest1.htm" name="fr1">
        <FRAME SRC="frtest2.htm" name="fr2">
      </FRAMESET>
    </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:

    <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>

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).
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ć.

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.)
A oto źródło:

Aby utworzyć ramki, będziesz potrzebował (frames.htm):

    <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>

Oto źródło frame1.htm:

    <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>

A teraz frame2.htm:

    <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>

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:

                  frames.htm                nadrzędna
                   /      \
                  /        \
                 /          \
      fr1(frame1.htm)     fr2(frame2.htm)   podrzędne

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.

                  frames.htm                nadrzędna
                   /      \
                  /        \
                 /          \
      fr1(frame1.htm)     fr2(frame2.htm)   podrzędne szczebla 1
              /  \
             /    \
            /      \
        gchild1  gchild2                    podrzędne szczebla 2

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:

    <a href="goaway.html" TARGET="_top">jeśli nie chcesz się już więcej gapić na moją stronę</a>

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.

####
Indeks - Część 1 - Część 2 - Część 4 - Część 5 - Część 6 - Część 7

Aktualizacja: 11 maja 96
(c) 1996 by Stefan Koch