Mini porady JavaScript i jQuery

Power JavaScript

Poziom średnio-zaawansowany

Kolejny artykuł z serii tricki i porady JavaScript (jQuery, CSS i inne również), jednak w nowej odsłonie – krótkich porad.

Szybkie porady JavaScript i jQuery

1. Klikalne tło strony

Chodzi o przypadek, gdy chcemy zrobić klikalne tło strony, przykładowo reklamę odsyłającą gdzieś użytkownika po kliknięciu w tło. Opakowanie (wrapper) contentu strony, lub dodanie zdarzenia onclick dla tła, czy inne rozwiązania, które jako pierwsze przychodzą na myśl.

Tutaj mamy proste i skuteczne rozwiązanie. Ustawiamy nasz obraz tła:


var img = "http://our-page.com/image.png";
var link = "http://target-website.com";

document.body.style.backgroundImage = "url('" + img + "')";

Następnie obsługa kliknięcia – działająca oraz blokująca otwieranie nowej strony / zakładki wielokrotnie:


$('body').click(function(e) {
  e.stopPropagation();

  if (e.target === this) {
    // window.open(link);
    window.location = link;
  }
});

To wszystko.

Wydawnictwo Strefa Kursów

2. JS, jQuery i wczytywanie zewnętrznej strony

Nasz projekt może mieć wymaganie, aby wczytać zawartość zewnętrznej strony. Można to zrobić różnymi sposobami, np. poprzez Ajax (ale nie zapominajmy o CORS).

Niektórzy próbują z użyciem elementu HTML Object lub Iframe.

W naszym przykładzie posłużymy się właśnie iframe. Rozwiązania które powinny działać są w porządku w przypadku wczytywania kilku URLi, natomiast próba wczytania kolejnego z różnych przyczyn zawodzi całkowicie.

W przypadku gdy musimy wczytać stronę zewnętrzną, np. w celu podglądu, możemy użyć iframe i jQuery. Takie rozwiązanie zadziała praktycznie zawsze.

TAK, to rodzi security issues, których musimy być świadomi. Jeśli jednak musimy zrobić coś takiego, możemy zrobić to tak:

<iframe id="content" src="about:blank" style="overflow-y: visible;" 
  sandbox="allow-forms allow-popups allow-scripts"></iframe>

Tym sposobem wczytamy cały content strony i będzie on widoczny. Na uwagę zasługuje tutaj parametr HTML5 dla iframe – sandbox.

Nasze ustawienia m.in. wyświetlają formularze zewnętrznej strony oraz pozwalają na wykonanie skryptów, ale pomagają np. na ifrme buster, blokując przekierowania.

Więcej o sandbox:

http://www.w3schools.com/tags/att_iframe_sandbox.asp

Dalej sprawa jest prosta – ustawiamy w jQuery atrybut src naszego iframe, podając url strony do wczytania:

var the_url = "http://our-website.com";
// ...
$(document).ready(function() {
  $("#content").attr("src", the_url);

  $("#content").css("width", "100%");
  $("#content").css("height", "1080px");
});

I to właściwie wszystko w tej kwestii.

3. Sprawdzanie połączenia z Internetem w JavaScript

Czyli sprawdź w JavaScript czy aplikacja WWW ma połączenie w Internetem, oraz podejmij jakąś akcję, gdy połączenia nie ma.

Nasze aplikacje web potrzebują połączenia z siecią właściwie do wykonania większości operacji. Szczególnie w przypadku operacji krytycznych jego brak może być problemem.

Możemy to jednak wykryć i obsłużyć unikając błędów. Można też przykładowo przełączyć zbieranie danych przez naszą aplikację lokalnie, choćby w web storage. Natomiast po powrocie online dokonać synchronizacji.


Jeśli chodzi natomiast o samo wykrywanie czy połączenie istnieje, zostało szczegółowo opisane tutaj:

http://www.kirupa.com/html5/check_if_internet_connection_exists_in_javascript.htm

Podsumowanie

Dobrze jest zbierać u publikować dla innych różne drobne rozwiązania, z którymi samemu trzeba było się zetknąć podczas realizacji różnych zadań.

Wkrótce pojawi się więcej trików i porad. Wszakże w codziennej pracy bardzo często rozwiązuje się przeróżne issues, a wiele z nich może być ciekawą informacją do opublikowania, która może pomóc innym znaleźć sprawdzone rozwiązanie czegoś choćby trochę szybciej.

Web Developer ze sporym bagażem doświadczeń.
Języki: xhtml, html5, css3, js, php, python, java.
Hobby: programowanie gier (browser, mobile).

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+0Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.