Zaczynamy przygodę z JavaScript i tajemniczym zapisem "w ramce"! To może brzmieć skomplikowanie, ale spokojnie, rozłożymy to na czynniki pierwsze.
Co to znaczy "w ramce"?
Wyobraź sobie, że masz stronę internetową. Na tej stronie masz... okno w oknie! To jest właśnie ramka (ang. iframe).
Ramka pozwala umieścić inną stronę internetową wewnątrz Twojej strony. Tak jak obrazek zawieszony w ramce na ścianie.
Pomyśl o telewizorze w telewizorze. Trochę dziwne, prawda? Ale przydatne w pewnych sytuacjach.
W JavaScript, kiedy mówimy o "zapisie w ramce", myślimy o dostępie do elementów i zawartości tej "mniejszej" strony, która jest wewnątrz ramki.
Jak to wygląda w kodzie?
Najpierw, musimy mieć ramkę w naszym kodzie HTML.
<iframe src="inna_strona.html" id="mojaRamka"></iframe>Tutaj widzisz, że stworzyliśmy ramkę. src to adres strony, którą chcemy wyświetlić w ramce. id to unikalny identyfikator naszej ramki. Będzie nam potrzebny w JavaScript.
Teraz, spróbujmy dostać się do czegoś w tej ramce za pomocą JavaScript.
let ramka = document.getElementById("mojaRamka");
let dokumentRamki = ramka.contentDocument || ramka.contentWindow.document;Trochę magii, prawda?
Pierwsza linia znajduje naszą ramkę na stronie, używając jej id.
Druga linia to sprytny sposób, żeby dostać się do document (czyli zawartości) wewnątrz ramki. Robimy to tak, żeby działało w różnych przeglądarkach.
Co możemy zrobić z tym dokumentem ramki?
Mając dostęp do document wewnątrz ramki, możemy robić prawie wszystko, co normalnie robimy na stronie internetowej!
Na przykład, możemy znaleźć element:
let elementWRamce = dokumentRamki.getElementById("jakisElement");Lub zmienić jego zawartość:
elementWRamce.innerHTML = "Nowa zawartość!";Wyobraź sobie, że masz zdalny pilot do telewizora w ramce. Możesz zmieniać kanały (zawartość), głośność (style), i tak dalej.
Dlaczego to jest przydatne?
Ramki są użyteczne w wielu sytuacjach:
Osadzanie zewnętrznych treści
Możemy umieścić na naszej stronie mapę Google Maps, film z YouTube, albo post z Facebooka. Często te serwisy dają nam gotowy kod iframe do wklejenia.
Pomyśl o tym jak o gotowych modułach, które wstawiasz do swojej konstrukcji.
Izolacja treści
Ramka tworzy pewnego rodzaju "piaskownicę". Kod JavaScript w ramce nie ma bezpośredniego dostępu do całej naszej strony, a kod naszej strony nie ma dostępu do kodu w ramce (chyba że mu na to pozwolimy). To zwiększa bezpieczeństwo.
Traktuj to jak oddzielne pokoje w domu. Jeden pokój nie wpływa bezpośrednio na drugi.
Strony z różnymi domenami
Jeśli ramka zawiera stronę z innej domeny niż Twoja, dostęp do jej zawartości jest ograniczony ze względów bezpieczeństwa (zasada Same-Origin Policy). Ale nadal możesz umieścić taką stronę w ramce. Czasami potrzebne są specjalne techniki (np. postMessage), żeby się z nią komunikować.
Wyobraź sobie dwóch sąsiadów. Mieszkają obok siebie (na tej samej stronie), ale mają osobne domy (domeny). Mogą rozmawiać przez płot (postMessage), ale nie mogą swobodnie wchodzić do swoich domów.
Podsumowanie
Zapis "w ramce" w JavaScript oznacza dostęp do zawartości strony internetowej, która jest wyświetlana wewnątrz elementu iframe.
Używamy contentDocument lub contentWindow.document, żeby dostać się do document wewnątrz ramki.
Możemy wtedy manipulować zawartością ramki, tak jakbyśmy pracowali z normalną stroną internetową.
Ramki są przydatne do osadzania treści zewnętrznych, izolacji kodu i tworzenia modułowych stron.
Pamiętaj, praktyka czyni mistrza! Poeksperymentuj z ramkami i kodem, żeby lepiej zrozumieć, jak to wszystko działa.
Mam nadzieję, że teraz zapis "w ramce" nie brzmi już tak strasznie. Powodzenia w dalszej nauce JavaScript!
