: Home / JavaScript / artykuły / Pływająca ramka zamiast AJAX

Warning: file_get_contents(http://graph.facebook.com/http://youthcoders.net/javascript/artykuly/268-pseudoajax-na-iframe.html): failed to open stream: HTTP request failed! HTTP/1.0 403 Forbidden in /var/www/old-yc/plugins/content/addthis.php on line 38
Pływająca ramka zamiast AJAX
Ocena użytkowników: / 1
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
sobota, 28 listopada 2009 18:21

W ostatnim czasie AJAX bije wszelkie rekordy popularności. Tak - jest to wygodna "technologia" (w cudzysłowie, ponieważ to zbitek istniejących wcześniej technologii, a nie coś nowego).

Jednak czy zawsze trzeba używać Ajaksa? Nie. Choć często jest rozwiązaniem lepszym od tego, co mam zamiar tu zaprezentować.

Na swoim blogu niedawno opisałem dużo dokładniej ten pomysł - wraz z działającym kodem. Zapraszam: Ajaks w oparciu o pływającą ramkę.

Pływająca ramka - iframe

Pływająca ramka to taki "wycinek" strony, na który mnożemy wstawić inną stronę... Brzmi zawile. Może kod powie więcej:

...<!-- tu nagłowek, sekcja head itp -->
<body>
   <p>To jest na tej stronie</p>
   <iframe name="example" src="/druga_strona.htm" width="200" height="100">Ten tekst będzie widoczny, jeśli twoja przeglądarka nie obsługuje ramek</iframe>
</body>
</html>

W prostokąt o rozmiarach 200x100px zostanie wczytana strona `druga_strona.htm'. I będzie żyć swoim własnym życiem. Czy możemy się do tej ramki jakoś dobrać? Tak - wykorzystując JS (dla skrócenia kodu używam innerHTML, nie znaczy to, że to jest najlepszy i najwłaściwszy sposób).

Pobieranie danych

Aby pobrać dane z pływającej ramki można wykorzystać taki kod JS:

window.frames['example'].document.innerHTML

Przykładowe zastosowanie można zobaczyć na mojej stronie (wstęp do własnego edytora typu TinyMCE itp.): yarpo.republika.pl/studia/editor.

Nowy request HTTP

Po prostu otwieramy w ramcę nową stronę, np. tak:

<a href="/skrypt.php?id=2132&a=sdsd&b=323" target="example">Wykonaj</a>

Ta strona zostanie wywołana w pływającej ramce. Następnie kodem, który pokazalem chwilę wcześniej odczytujemy wszystko co się tam wyświetliło i odpowiednio interpretujemy.

Ale to widać!

Starczy zatem zmniejszyć rozmiar pływającej ramki do 1x1 [nie jestem pewien, czy w każdej przeglądarce 0x0 będzie akceptowane], a następnie dodać taką regułę CSS (do zewnętrznego pliku, albo do definicji stylów w sekcji head):

iframe[name="example"] { position: absolute; top: 0; left:0; visibility: hidden; }

i problem zniknął - razem z pływającą ramką.

Atrybut target

Pozwala nam sterować gdzie powinna się pokazać strona. Jest zakazany w XHTML-u oraz w HTML 4.01 strict. Słusznie, z resztą. Nie powinno się decydować za usera, gdzie On chce otworzyć stronę. Tu podajemy nazwę naszej ramki, dlatego skrypt php (a raczej wynik jego działania) pojawi się w pływającej ramce.

Czy warto to stosować?

Najczęśniej nie. Dlaczego? Ponieważ nie mamy tu takich informacji jak status requesta, nie możemy wywołać tego tak banalnie asynchrnocznie jak w przypadku Ajaksa. Czasem jednak może się okazać przydatna wiedza, ze coś takiego istnieje.

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Komentarze 

 
0 #1 Patryk yarpo Jar 2011-10-17 12:51
Na swoim blogu opisałem dokładniej taką metodę:
http://www.yarpo.pl/2011/03/23/ajax-w-oparciu-o-plywajaca-ramke/
Cytować
 

Dodaj komentarz


Kod antysapmowy
Odśwież