Blokowanie przeglądarki

29 lutego, 2012 w kategoriach: Web developing, Ajax, JavaScript, Jquery, Podstawy

t24_thumb_template
3,167 2
Dane:
  • Czas pracy: 20 minut
  • Poziom: Podstawowy
Opis:

Skrypt mający na celu zablokowanie treści wybranej przeglądarce

Pliki do pobrania

Pokaż/Ukryj wszystko

Witam. Często jest tak, że chcemy zablokować treść naszej strony pod pewną przeglądarką. Mam tu na myśli stary Internet Explorer 6 :) Jest to dość przestarzała przeglądarka. My jako administratorzy strony powinniśmy użytkowników ‘nawracać’ do nowszej technologi.
Tak więc opiszę tutaj jak w prosty sposób zablokować dostęp do naszej strony przez rozmaite przeglądarki poprzez prosty skrypt napisany oczywiście w Javascript.

Efekt końcowy jaki uzyskamy:

Gdy używamy przeglądarki IE6:

Alt efekt

Gdy używamy innej przeglądarki:

Alt Untitled-1

Przejdźmy pierw do naszego kodu HTML ;)


Wydawnictwo Strefa Kursów

Wiadomo jeśli mamy już gotową stronkę nie tworzymy go. Jeśli jednak nie posiadamy stronki tworzymy plik index.html.
Podstawowa struktura kodu HTML. Importujemy plik css, nasz skrypt. Nadajemy tytuł stronie.

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blokowanie IE6 - Tutorials24</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="skrypt.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

Sekcja body to treść, do której nie będziemy mieli dostępu jeśli mamy określoną przeglądarkę. Stwórzmy więc przykładowy nagłówek i paragraf.

<body>

<h2>Blokowanie IE6 - Tutorials24</h2>

<p>Ten tekst jest widoczny dla wszystkich przeglądarek prócz Internet Explorer 6.</p>

Domykamy tag body i html.

</body>
</html>

Przejdźmy zatem do naszego skryptu w pliku ‘skrypt.js’.

Ustawiamy zmienną ‘browser’, która będzie pobierała nazwę naszej przeglądarki min. może być to ‘Firefox’, ‘Chrome’, ‘Opera’ oraz nasz kochany ‘MSIE6’.

var browser = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;

Gdy mamy przeglądarkę ‘MSIE6’ wywołujemy funkcję, która wyświetli nam okienko pośrodku strony z odpowiednią treścią.

if(browser){

$(function(){

$("<div>")
.css({
'position': 'absolute',
'top': '0px',
'left': '0px',
backgroundColor: 'black',
'opacity': '0.9',
'width': '100%',
'height': $(window).height(),
zIndex: 5
})
.appendTo("body");

$("<div><img src='ie6.png' alt='' style='float: left;'/><p><br /><strong>Przepraszamy! Ta strona nie jest dostępna pod tą przegladarką.</strong><br /><br />Jeśli chcesz w pełni korzystać z tej strony <a href='http://www.google.de/chrome/?hl=pl'>ściągnij inną przeglądarkę</a>.</p>")
.css({
backgroundColor: 'white',
'top': '50%',
'left': '50%',
marginLeft: -210,
marginTop: -100,
width: 410,
paddingRight: 10,
height: 200,
'position': 'absolute',
zIndex: 6000
})
.appendTo("body");
});

Myślę, że wszystko jest tutaj zrozumiałe. Jest to ostylowane okienko, które zasłoni pozostałą zawartość strony. Jeśli używamy IE 6 skrypt zwróci nam okienko, które poprosi nas o ściągnięcie innej przeglądarki (w tym przypadku Google Chrome).
Domykamy naszą instrukcję warunkową.

}

Ustalmy tylko podstawowe wartości. Dajmy kolor tła.

body {
background: #ddd;
}

Kolor przykładowego nagłówka i paragrafu.

h2 {
color: #C00;
}
p {
color: #000;
}

Zapisujemy nasz plik.

Dowiedziałeś się właśnie jak zablokować swoją stronę pod wybraną przeglądarką, ale również jak pobrać nazwę przeglądarki używanej przez użytkownika.

Pozdrawiam, Fisz ;)

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (2 wypowiedzi)

Dodaj odpowiedź

Dodaj komentarz