U ovom članku ćemo vam pokazati kako možete organizirati preusmjeravanje sa stranice koristeći JavaScript lokaciju. Neočekivana preusmjeravanja se smatraju vrlo neugodnim sa stanovišta korisnika jer negativno utječu na cjelokupno iskustvo. Na primjer, ako preusmjerite korisnike na drugu stranicu odmah nakon što odu na vašu. Također, ako usmjerite na stranicu treće strane na tajmeru ili nakon što su izvršili određenu radnju. Ovo će uzrokovati da korisnik želi odmah napustiti vašu stranicu.

Osim toga, pretraživači ne favoriziraju resurse koji koriste preusmjeravanja, posebno ako obmanjuju korisnike. Ali postoje slučajevi u kojima preusmjeravanje može biti korisno. Stoga ostavljamo vama da odlučite hoćete li koristiti prosljeđivanje poziva ili ne.

JavaScript metode preusmjeravanja

U JavaScript-u, lokacija prozora ili objekt lokacija se koristi za dobivanje informacija o lokaciji trenutne web stranice (dokumenta), kao i za promjenu iste. Ispod je lista načina koji se mogu koristiti za implementaciju JavaScript preusmjeravanja:

// Postavlja novu lokaciju trenutnog prozora. window.location = "http://www.example.com"; // Postavlja novu hipervezu (URL) za trenutni prozor. window.location.href = "http://www.example.com"; // Dodijelite novi URL trenutnom prozoru. window.location.assign ("http://www.example.com"); // Zamjenjuje poziciju trenutnog prozora novim. window.location.replace ("http://www.example.com"); // Postavlja lokaciju samog trenutnog prozora. self.location = "http://www.example.com"; // Postavlja poziciju najvišeg prozora u odnosu na trenutni. top.location = "http://www.example.com";

Dok gornje linije JavaScript koda rade sličan posao, one imaju manje razlike. Na primjer, ako koristite preusmjeravanje top.location unutar iframe-a, to će prisiliti preusmjeravanje na glavni prozor. Još jedna stvar koju treba imati na umu: location.replace () zamjenjuje trenutni dokument, uklanja ga iz historije i čini ga nedostupnim pomoću dugmeta za povratak u pretraživaču.

window.location.href = "http://www.example.com";

Također možete posjetiti ovu stranicu da saznate više o tome kako window.location funkcionira.

JavaScript preusmjeravanje: preusmjeravanje pri učitavanju

Da biste preusmjerili korisnika na drugu web stranicu odmah nakon otvaranja vaše stranice, možete koristiti sljedeći kod na vrhu stranice, unutar elementa ... Ili, ako koristite zasebnu .js datoteku, stavite sljedeći kod u tu datoteku i ne zaboravite povezati na njega u zaglavlju vaše stranice:

Samo zamijenite URL iz primjera onim na koji želite preusmjeriti. Treba napomenuti da sa ovom vrstom preusmjeravanja posjetitelji uopće neće vidjeti vašu web stranicu i odmah će biti preusmjereni na ciljnu adresu.

JavaScript preusmjeravanje: preusmjeravanje nakon određenog vremenskog perioda

Za preusmjeravanje korisnika na drugu stranicu nakon određenog vremenskog perioda, može se koristiti sljedeći kod:

JavaScript lokacija href iznad će preusmjeriti korisnika sa stranice 3 sekunde nakon potpunog učitavanja. Možete promijeniti vrijednost 3000 ( 3 x 1000 u milisekundama) po vašem nahođenju.

JavaScript preusmjeravanje: preusmjeravanje sa stranice nakon događaja ili radnje korisnika

Ponekad morate poslati korisnika na drugu stranicu nakon određenog događaja ili radnje. U takvim slučajevima, možete koristiti provjeru stanja ili priložiti događaj elementu da izvršite preusmjeravanje. Razmotrite sljedeća dva primjera:

Gornji kod JavaScript lokacija dokumenta hrefće preusmjeriti ako je uvjet istinit.

Dobar dan, pretplatnici i gosti mog bloga. Danas vam želim reći vrlo važan i tražen materijal, čiji se mehanizmi koriste na mnogim stranicama i web servisima. Naime, objasnit ću šta je to preusmjeravanje u JavaScript-u.

U ovom postu ćete pronaći mnogo korisnih informacija o preusmjeravanju, saznati više o njegovoj glavnoj industriji. Takođe ću vam pokazati kako možete kreirati preusmjeravanje koristeći php, html, pa čak i .htaccess. I naravno, naći ćete primjere nakon svakog ključnog poglavlja. Sada pređimo na debrifing!

Šta je preusmjeravanje i za koju svrhu je stvoreno?

Prevedeno sa engleskog redirect znači "preusmjeravanje, preusmjeravanje". Doista, uz pomoć preusmjeravanja, korisnici se automatski preusmjeravaju na druge stranice web resursa koristeći unaprijed određeno sidro (link).

Svako od vas se barem jednom suočio sa ovakvim situacijama kada ode na jednu, a on vas preusmjeri na istu, samo što se nalazi na novom linku. Takođe se dešava da korisnici budu preusmjereni na druge stranice ili reklame. Sve se to radi pomoću preusmjeravanja.

Zahvaljujući ovom mehanizmu, možete fleksibilno upravljati preusmjeravanjem: postaviti prijelaz na nove stranice sa zakašnjenjem, u slučaju promjene domene, preusmjeriti korisnika na novu adresu po url-u bez dodatnih radnji potonjeg, otvoriti stranice u nova kartica, organizirati preusmjeravanje nazad u slučaju neuspješnog prosljeđivanja itd.

Objekt je odgovoran za takve radnje. dokument.lokacija... Zapravo, ovaj objekat ima niz svojstava koja su potrebna da bi se dobile potpune informacije o web stranici (stranici).

Za sada ću govoriti o jednom svojstvu koje se koristi za preusmjeravanje stranica - href. Ako želite da produbite svoje znanje, potražite informacije u dokumentaciji.

Kako da implementiram preusmjeravanje koristeći document.location.href?

dakle, document.location.href sadrži punu putanju do stranica web servisa. Ako sada pokrenete red document.write (document.location.href) bilo gdje, dobit ćete punu vezu do kartice u kojoj je to napisano u odgovoru.

Da biste implementirali preusmjeravanje, samo trebate dodijeliti drugu adresu ovom svojstvu.

Odlučio sam dati primjer za određeni zadatak, koji se često može naći među zadacima u stvarnim projektima.

Dakle, imate neku vrstu web resursa koji se nalazi na linku, na primjer, http://pfd.ru. Ali s vremenom ste stekli novu, prikladniju domenu i stoga je stranica premještena na novu adresu - http://ddd.ru.

Pošto su korisnici navikli na staru vezu ili su ovu uslugu označili pod starom adresom, potrebno je da implementirate automatsku tranziciju. Istovremeno, morate implementirati zadatak kako bi kupci mogli vidjeti promjene. Da biste to učinili, morate napisati sljedeću softversku implementaciju:

Sada se sajt kompanije "****" nalazi na novoj adresi: http://ddd.ru... Nakon 6 sekundi, automatski ćete biti preusmjereni na njega. Ako se prijelaz nije dogodio automatski, slijedite navedenu vezu: http://ddd.ru

Kao mali bonus, odlučio sam da priložim još jedan primjer koda koji je vrlo često postavljana pitanja. Ponekad postoje i druge situacije kada uz preusmjeravanje trebate prenijeti neke podatke na otvorenu stranicu POST metodom. Ovaj mehanizam se takođe može implementirati kroz js.

Oznaka se koristi za slanje bilo koje informacije u html oznaci

Sada, koristeći funkciju napisanu u JavaScript-u, podaci se šalju:

Pokazao sam vam kako implementirati preusmjeravanja koristeći js jezik. A sada pređimo na analizu istog mehanizma, ali u drugim programskim jezicima.

Preusmjeravanje na html

Za preusmjeravanje korisnika na drugu uslugu koristite oznaku .

U primjeru ću vas preusmjeriti na službenu W3C stranicu. Pokrenite priloženi kod u bilo kojem dostupnom uređivaču i analizirajte njegov rad.

Reći ću vam malo o atributima oznaka .

znači da će se nova datoteka otvoriti u trenutnom prozoru pretraživača. Element sadržaja odgovoran je za vrijeme preusmjeravanja (u ovom slučaju 3 sekunde) i adresu na koju će se izvršiti prijelaz.

Međutim, ovaj pristup ne funkcionira uvijek.

PHP preusmjeravanje

U php-u se takođe koristi lokacija i ona se uklapa u zaglavlje, kao iu prethodnoj verziji. izgleda ovako:

zaglavlje ("Lokacija: https://www.w3.org/");

Nakon obrade linije, vratit će se trocifreni statusni kod preusmjeravanja. Ako tip preusmjeravanja nije naveden u atributima zaglavlja, tj. kod 201 ili 3 **, zatim se automatski vraća 302, što ukazuje na privremeno kretanje.

Želim da istaknem jedan važan detalj. Danas svi programeri koji poštuju sebe koriste preusmjeravanje 301. Omogućava vam:

• Sumirajte važne pokazatelje web servisa, zbog kojih, čak i pri preseljenju na novu adresu, stranica ne gubi svoje pozicije u pretraživačima;
• Zalijepite imena domena sa i bez trostrukog "www";
• Preusmjerite robote i korisnike na nove funkcionalne web stranice umjesto na zastarjele.

Htaccess direktiva

Ovdje glatko dolazimo do važne, vrlo korisne, ali i složene direktive .htaccess. To je konfiguracijski dokument za Apache i slične servere. Njegov učinak se odnosi samo na direktorij u kojem se nalazi. Mogućnosti se odnose i na poddirektorije.

Preusmjeravanje(sa engleskog. preusmjeravanje- preusmjeravanje) je preusmjeravanje stranice stranice na neku drugu stranicu ili drugu stranicu. Preusmjeravanje se može izvršiti na različite načine, od kojih će se ovdje govoriti o glavnom, naime preusmjeravanje na php, javascript, preusmjeriti sa html i koristeći fajl htaccess.

Među navedenim načinima, najrelevantnije su php preusmjeravanje i .htaccess preusmjeravanje... Činjenica je da upravo ove metode omogućavaju ne samo preusmjeravanje stranice, već i vraćanje posebnog Greška 301(301 Permament Redirect). čemu služi? I potreban vam je za pretraživače.

Recimo da smo imali promovisan sajt sa velikim brojem posetilaca. Zatim je stranica premještena na novu domenu. Pretraživač to još ne zna. 301 preusmjeravanje vam omogućava da "zalijepite" staru i novu adresu, a da pritom sačuvate sve one elemente optimizacije koji su napravljeni za ovu stranicu, čime se očuva promet i publika same stranice.

Pogledajmo sada sve navedene opcije za preusmjeravanja i počnimo s preusmjeravanjem na php.

PHP preusmjeravanje (301)

Preusmjeravanje na php, kao i u drugim programskim jezicima, zasniva se na specifikaciji HTTP protokola, odnosno slanju potrebnih zaglavlja. Kako radi? Prilično jednostavno. Svaki put kada pristupimo stranici na Internetu, dobijamo HTTP odgovor od servera, koji sadrži zaglavlja (header) i tijelo (body). U tijelu odgovora

zaglavlje (“HTTP / 1.1 301 Trajno premješteno”);
zaglavlje (“Lokacija: http://site.com/pagename.html”);
?>

HTML preusmjeravanje

HTML jezik za označavanje ima posebnu meta oznaku za preusmjeravanja.

Mijenja se samo polje sadržaja koje označava broj sekundi prije preusmjeravanja i stvarnu vezu na kojoj će se izvršiti preusmjeravanje. Nepotrebno je reći da se oznaka nalazi u html kodu između oznaka head.

JavaScript preusmjeravanje

Možda najnepouzdanije preusmeravanje, pošto korisnik uvek može da onemogući javascript u pretraživaču. To se radi, međutim, rijetko, tako da metoda ima pravo na postojanje.

U ovom kodu se kreira funkcija s preusmjeravanjem na potrebnu stranicu, a zatim se poziva u funkciji setTimeout, koja omogućava preusmjeravanje nakon potrebnog vremena.

Htaccess preusmjeravanje (301)

Datoteka .htaccess je servisna datoteka sa raznim dodatnim postavkama za Apache server. Postavlja se ručno, u našem slučaju, u korijenu stranice. Uz njegovu pomoć možete organizirati 301 preusmjeravanje, međutim, za to moraju biti omogućeni potrebni moduli u Apacheu.

Korištenje direktiva modula mod_alias

U ovom modulu postoje tri direktive: Redirect, RedirectPermanent i RedirectMatch. Čini se da su prva dva identična po svojim svojstvima, treći se raspada. Za prva dva primjera:

Preusmjeravanje 301 / http://site.com
Preusmjerite trajno /index.html http://site.com
PreusmjeravanjePermanent /index.html http://site.com/default.html

Linije su slične. Ali čini se da postoji jedan nedostatak - da biste preusmjerili sve stranice, potrebne su vam sve i bit će naznačene na listi. Da stvari malo olakšamo, postoji druga direktiva:

RedirectMatch /(.*)\.html$ /$1.php

Možete postaviti regularne izraze za preusmjeravanje sa starog URL-a na novi.

Korištenje direktiva modula mod_rewrite

Da biste izbjegli dvostruko čitanje istih stranica od strane pretraživača, ponekad morate prosljediti sve adrese sa domene bez www na domenu sa www. Na primjer,

# omogućite modul i potrebnu dodatnu opciju
RewriteEngine On
Opcije + FollowSymLinks
# dva reda za preusmjeravanje sa "no bbw" na "with bbw"
RewriteCond% (HTTP_HOST) ^ site.com
RewriteRule (. *) Http://www.site.com/$1

Umjesto zaključka

Ako vas i dalje muči pitanje gde da zaustavite svoj izbor (naravno da vas muči, sa škripcem i makazama - napomena urednika), onda je vrijeme da prestaneš da patiš (o čemu ti pričaš! - napomena urednika). Hajde da prestanemo da gledamo na php preusmjeravanje (ili neki drugi programski jezik o kojem ovdje nije bilo riječi, na primjer Perl) i preusmjeravanje pomoću .htaccess fajla, jer vam omogućavaju da bez gubitaka prenesete sajt za optimizaciju pretraživača. Ako nije važno, bilo koja metoda će poslužiti. I zapravo na ovoj završnoj noti (sol? La? Si? - napomena urednika) Završavam ovaj post.

Četiri opcije za preusmjeravanje (preusmjeravanje) korisnika, jasno i sa primjerima.

1. Preusmjeravanje putem Java Script-a - radit će samo ako korisnik ima omogućenu JS podršku na uređaju. Ne brinite, postotak korisnika bez JS-a je zanemarljiv. Ako želite provjeriti koliko je to neugodno, samo onemogućite JS u svom pretraživaču na jedan dan.

Radni kod za preusmjeravanje:

2. Html preusmjeravanje

Ovaj primjer preusmjerava korisnika na ispravnu adresu sa zakašnjenjem od 1 sekunde.

Sjećam se da u IE-u nije funkcionisalo kako treba, ili bolje rečeno, uopće nije funkcioniralo. Ako ga koristite, pogledajte, za svaki slučaj.

3. Preusmjerite na php

Jednostavan i ukusan, .php fajl sa sljedećim sadržajem:

4. Preusmjeravanje putem .htaccess

Preusmjeravanje / http://url4trafic.ru

Prilikom preusmjeravanja prometa s društvenih mreža, u općim slučajevima, najrelevantnija opcija je iz primjera #1, uz mali dodatak - naime, korištenje ogp markupa. Da bude malo jasnije - Open Graph markup je protokol za označavanje sadržaja stranice za slanje njenog sadržaja na društvene mreže. Kada objavljujete link na društvenu mrežu, možete "ručno" odrediti koju sličicu i opis želite prikazati.

Radni primjer (moguće su nepreciznosti i nedostaci, ali i dalje radi :)

Kako to izgleda kada se objavi u Kontaktu:

Kratak pregled tačaka:
- označava da će se koristiti oznake Open Graph
- - ispunite primamljiv opis - u primjeru iznad je "John Cena je imenovao datum svog povratka"
- - intrigantan naslov - u primjeru iznad je "John Cena se vraća u život - WWE Wrestling News"
- - ovo je put do slike koja će se učitati - u gornjem primjeru, ovo je isti čovjek u plavoj majici.
Da bi link bio lijep i velik, slika u početku mora biti dovoljne veličine. Za vKontakte, na primjer, ovo je više od 537x240 piksela. Više je bolje.

Location = "http://url4trafic.ru" - ovo je, pogađate, url na koji ćemo poslati korisnika.

Preusmjeravanje je automatsko preusmjeravanje korisnika s jedne adrese na drugu. Odnosno, osoba posjeti jednu stranicu, ali završi na potpuno drugoj (ili na drugoj stranici jedne stranice). Mislim da ste ovo viđali prilično često. Ponekad preusmjeravanje se vrši sa zakašnjenjem... Općenito, tema je vrlo važna, a ja ću je obraditi u ovom članku.

Uopšteno govoreći, sada ćemo razgovarati o tome Lokacija objekta koji je svojstvo objekta Document... Imati Lokacija objekta postoji nekretnina href, uz pomoć kojih JavaScript preusmjeravanje... Ova nekretnina je dostupna i za čitanje i za pisanje. Prvo, pročitajmo:

Document.write (document.location.href);

Kao rezultat, vidjet ćete punu adresu vaše skripte.

Sada uradimo najjednostavnije JavaScript preusmjeravanje:

Document.location.href = "http: // stranica";

Dakle, svi korisnici koji pokrenu ovu skriptu će automatski otići na stranicu: " http: // stranica".

Sada uradimo klasičan zadatak koji se vrlo često radi. Recimo da imate web stranicu: http://a.ru... Tada ste kupili novu domenu za svoju web lokaciju i njena adresa je postala: http://b.ru... I želite da svi posjetioci odu http://a.ru na novom http://b.ru... Štaviše, želite da znaju da vaša stranica ima novu adresu. Da li situacija zvuči poznato? Dakle, ovo se implementira pomoću odloženog preusmjeravanja:

Naša web stranica ima novu adresu: http://b.ru... Za 5 sekundi bit ćete preusmjereni na njega. Ako se to ne dogodi, idite do sebe: http://b.ru

Prvo će korisnik vidjeti poruku, a potom 5 sekundi će ići na novu adresu. Ako je korisnik odjednom onemogućio JavaScript onda može ići sam jednostavnim klikom na vezu.