Reklamy Html + JS
Friday, 25. May 2007, 23:39:52
Trochę wcześniej napisałem o koncepcji, aby odnośnie reklam zastąpić obiekty Flash przez obiekty Html. Cóż, trafiła mi się okazja, aby zrealizować to w praktyce. Oczywiście na małą skalę. Właściwie zrobiłem tylko obrazek, który jest co pewien czas zakrywany przez napis. Obrazek i tekst są oczywiście linkami. Bardzo prosty kod JS. I tutaj pojawił się problem.
Oczywiście ową stronkę umieściłem za pomocą tagu object. Co się stało po kliknięciu na link w takim obiekcie, łatwo się domyślić. Nowa strona faktycznie otworzyła się, ale tylko wewnątrz obiektu. Takie zachowanie nie było akceptowalne, więc trzeba było coś z tym zrobić.
Rozwiązanie 1.
Można zastosować owczywiście wersję html/xhtml frameset. W tej wersji jest atrybut target, który może sprawić, że linki będą działały dla całego okna strony. Niestety uparłem się, że będę stosował tylko wersję strict. Ostatecznie więc nie testowałem.
Rozwiązanie 2.
Można pobawić się w Java Script. Do wszystkich linków można przypisać specjalną funkcję na kliknięcie. Funkcja ta będzie pobierała wartość parametru href i aplikowała ją do adresu dokumentu nadrzędnego. Kilka linijek więcej i dostałem kod, który powinien teoretycznie działać. Niestety Opera i Firefox upierały się przy stosowaniu standardowego linku html. Jedna linijka kodu więcej i usunięcie atrybutu href skutecznie zniechęciło obie przeglądarki.
Niestety Internet Explorer okazał się znacznie bardziej problematyczny. Podmiana adresu w dokumencie macierzystym skutkowała podmianą adresu w dokumencie, z którego skrypt był wywoływany. Czytanie adresów jakoś tej przeglądarce jednak dobrze wychodziło. Niestety nie miałem pomysłu, jaką właściwość można sprawdzić, aby wykryć ten błąd. Pozostała mi więc ostateczność, czyli wykrycie po user.agent...
Rozwiązanie 2.1.
Dodałem wykrycie, czy w UA nie ma przypadkiem siągu MSIE. Sprawdziłem też, czy nie jest to przypadkiem Opera (window.opera). W takim wypadku, zamiast owego, specjalnego kodu otwierającego adres w stronie macierzystej i kasującego atrybut href, dodaję tylko atrybut target="_blank" do samego linku ("_top" nie działał). W sumie efekt jest akceptowalny: otwiera się w nowym oknie, ale to Internet Explorer.
Rozwiązanie 2.2.
Przypomniałem sobie o przypisywaniu zdarzeń pod różne elementy. Microsoft wymyślił sobie własny sposób, który postanowiłem zastosować do wykrycia tej przeglądarki. Jest to pewniejsze od wykrywania po UA, a nawet łatwiejsze w implementacji. Poza tym bez zmian w stosunku do 2.1.
Podsumowanie.
Ostatecznie kod Java Script zrobił się trochę złożony. Za to można na takiej reklamie klikać normalnie i środkowym klawiszem myszy. W dodatku roboty, jeśli wczytają obiekt html, nie będą miały problemów z zaindeksowaniem strony, na którą wskazuje. Ponadto taka reklama działa w Operze Mini. Pozostał tylko mały problem. Co się stanie, jak ktoś wyłączy Java Script i nie kliknie środkowym klawiszem?
Wspomniany kod do wglądu:
<http://www.komikslandia.pl/adv/ikmks.php>
Jedna ze stron, gdzie ów kod jest osadzony:
<http://www.komikslandia.pl/>
Oczywiście ową stronkę umieściłem za pomocą tagu object. Co się stało po kliknięciu na link w takim obiekcie, łatwo się domyślić. Nowa strona faktycznie otworzyła się, ale tylko wewnątrz obiektu. Takie zachowanie nie było akceptowalne, więc trzeba było coś z tym zrobić.
Rozwiązanie 1.
Można zastosować owczywiście wersję html/xhtml frameset. W tej wersji jest atrybut target, który może sprawić, że linki będą działały dla całego okna strony. Niestety uparłem się, że będę stosował tylko wersję strict. Ostatecznie więc nie testowałem.
Rozwiązanie 2.
Można pobawić się w Java Script. Do wszystkich linków można przypisać specjalną funkcję na kliknięcie. Funkcja ta będzie pobierała wartość parametru href i aplikowała ją do adresu dokumentu nadrzędnego. Kilka linijek więcej i dostałem kod, który powinien teoretycznie działać. Niestety Opera i Firefox upierały się przy stosowaniu standardowego linku html. Jedna linijka kodu więcej i usunięcie atrybutu href skutecznie zniechęciło obie przeglądarki.
Niestety Internet Explorer okazał się znacznie bardziej problematyczny. Podmiana adresu w dokumencie macierzystym skutkowała podmianą adresu w dokumencie, z którego skrypt był wywoływany. Czytanie adresów jakoś tej przeglądarce jednak dobrze wychodziło. Niestety nie miałem pomysłu, jaką właściwość można sprawdzić, aby wykryć ten błąd. Pozostała mi więc ostateczność, czyli wykrycie po user.agent...
Rozwiązanie 2.1.
Dodałem wykrycie, czy w UA nie ma przypadkiem siągu MSIE. Sprawdziłem też, czy nie jest to przypadkiem Opera (window.opera). W takim wypadku, zamiast owego, specjalnego kodu otwierającego adres w stronie macierzystej i kasującego atrybut href, dodaję tylko atrybut target="_blank" do samego linku ("_top" nie działał). W sumie efekt jest akceptowalny: otwiera się w nowym oknie, ale to Internet Explorer.
Rozwiązanie 2.2.
Przypomniałem sobie o przypisywaniu zdarzeń pod różne elementy. Microsoft wymyślił sobie własny sposób, który postanowiłem zastosować do wykrycia tej przeglądarki. Jest to pewniejsze od wykrywania po UA, a nawet łatwiejsze w implementacji. Poza tym bez zmian w stosunku do 2.1.
Podsumowanie.
Ostatecznie kod Java Script zrobił się trochę złożony. Za to można na takiej reklamie klikać normalnie i środkowym klawiszem myszy. W dodatku roboty, jeśli wczytają obiekt html, nie będą miały problemów z zaindeksowaniem strony, na którą wskazuje. Ponadto taka reklama działa w Operze Mini. Pozostał tylko mały problem. Co się stanie, jak ktoś wyłączy Java Script i nie kliknie środkowym klawiszem?
Wspomniany kod do wglądu:
<http://www.komikslandia.pl/adv/ikmks.php>
Jedna ze stron, gdzie ów kod jest osadzony:
<http://www.komikslandia.pl/>
You must be logged in to write a comment. if you're not a registered member, please 
