U ovom članku ćemo vam pokazati kako možete organizirati preusmjeravanje sa stranice pomoću JavaScript lokacije. Neočekivana preusmjeravanja smatraju se vrlo neugodnim s korisničke točke gledišta 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. To će uzrokovati da korisnik želi odmah napustiti vašu stranicu.

Osim toga, tražilice ne favoriziraju resurse koji koriste preusmjeravanja, pogotovo ako obmanjuju korisnike. Ali postoje slučajevi u kojima preusmjeravanje može biti korisno. Stoga prepuštamo vama da odlučite hoćete li koristiti prosljeđivanje poziva ili ne.

JavaScript metode preusmjeravanja

U JavaScript-u se lokacija prozora ili objekt lokacije koristi za dobivanje informacija o lokaciji trenutne web stranice (dokumenta), kao i za njezinu promjenu. U nastavku je popis 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 položaj trenutnog prozora novim. window.location.replace ("http://www.example.com"); // Postavlja mjesto samog trenutnog prozora. self.location = "http://www.example.com"; // Postavlja položaj najvišeg prozora u odnosu na trenutni. top.location = "http://www.example.com";

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

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

Također možete posjetiti ovu stranicu kako biste saznali više o tome kako window.location radi.

JavaScript preusmjeravanje: preusmjeravanje pri učitavanju

Da biste korisnika preusmjerili na drugu web-lokaciju odmah nakon otvaranja vaše stranice, možete upotrijebiti 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 nju u zaglavlju stranice:

Samo zamijenite URL iz primjera onim na koji želite preusmjeriti. Valja napomenuti da s 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 razdoblja

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

Gore navedeni JavaScript lokacija href preusmjerit će korisnika sa stranice 3 sekunde nakon potpunog učitavanja. Možete promijeniti vrijednost 3000 ( 3 x 1000 u milisekundama) prema vlastitom nahođenju.

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

Ponekad trebate poslati korisnika na drugu stranicu nakon određenog događaja ili radnje. U takvim slučajevima možete koristiti provjeru uvjeta 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 uslugama. Naime, objasnit ću što je to preusmjeravanje u JavaScriptu.

U ovom ćete postu pronaći puno korisnih informacija o preusmjeravanju, saznati više o njegovoj glavnoj djelatnosti. Također ću vam pokazati kako možete stvoriti preusmjeravanje koristeći php, html, pa čak i .htaccess. I naravno, naći ćete primjere nakon svakog ključnog poglavlja. A sada prijeđimo na ispitivanje!

Što je preusmjeravanje i za koju svrhu je stvoreno?

U prijevodu s 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).

Svatko od vas se barem jednom suočio s takvim situacijama kada ode na jednu, a on vas preusmjeri na istu, samo što se nalazi na novom linku. Također se događa 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 s odgodom, u slučaju promjene domene, preusmjeriti korisnika na novu adresu putem url-a bez dodatnih radnji potonjeg, otvoriti stranice u nova kartica, organizirati preusmjeravanje natrag u slučaju neuspješnog prosljeđivanja itd.

Objekt je odgovoran za takve radnje. dokument.lokacija... Zapravo, ovaj objekt ima niz svojstava koja su potrebna za dobivanje potpunih informacija o web stranici (stranici).

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

Kako mogu implementirati preusmjeravanje pomoću document.location.href?

Tako, dokument.lokacija.href sadrži puni put do stranica web usluge. Ako sada pokrenete redak document.write (document.location.href) bilo gdje, dobit ćete punu poveznicu na karticu u kojoj je to napisano u odgovoru.

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

Odlučio sam dati primjer konkretnog zadatka, koji se često može naći među zadacima u stvarnim projektima.

Dakle, imate neku vrstu web-resursa koji se nalazi na poveznici, 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.

Budući da su korisnici navikli na staru vezu ili su ovu uslugu označili pod starom adresom, morate implementirati automatski prijelaz. Istodobno, morate implementirati zadatak kako bi kupci mogli vidjeti promjene. Da biste to učinili, morate napisati sljedeću softversku implementaciju:

Sada se stranica tvrtke "****" 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 priložiti 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đer može implementirati kroz js.

Oznaka se koristi za slanje bilo koje informacije u html oznaci

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

Pokazao sam vam kako implementirati preusmjeravanja koristeći js jezik. A sada prijeđ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 preglednika. 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đer koristi lokacija i uklapa se u zaglavlje, kao u prethodnoj verziji. izgleda ovako:

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

Nakon obrade linije, vratit će se troznamenkasti statusni kod preusmjeravanja. Ako vrsta preusmjeravanja nije navedena u atributima zaglavlja, t.j. kod 201 ili 3 **, tada se automatski vraća 302, što ukazuje na privremeno kretanje.

Želim istaknuti jedan važan detalj. Danas svi programeri koji poštuju samoga sebe koriste preusmjeravanje 301. Omogućuje vam:

• Sažmite važne pokazatelje web usluga, zbog kojih, čak i pri preseljenju na novu adresu, stranica ne gubi svoje pozicije u tražilicama;
• Zalijepite nazive 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 poslužitelje. Njegov učinak se odnosi samo na imenik u kojem se nalazi. Mogućnosti se također odnose na poddirektorije.

Preusmjeravanje(iz engleskog. preusmjeriti- preusmjeravanje) je preusmjeravanje stranice stranice na neku drugu stranicu ili drugu stranicu. Preusmjeravanje se može izvesti na različite načine, od kojih će se ovdje raspravljati o glavnom., Naime preusmjeriti na php, javascript, preusmjeriti s html i pomoću datoteke htaccess.

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

Recimo da smo imali promoviranu stranicu s velikim brojem posjetitelja. Zatim je stranica premještena na novu domenu. Tražilica to još ne zna. 301 preusmjeravanje vam omogućuje 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, temelji se na specifikaciji HTTP protokola, odnosno slanju potrebnih zaglavlja. Kako radi? Prilično jednostavno. Svaki put kada pristupimo stranici na Internetu, primamo HTTP odgovor od poslužitelja 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 označni jezik ima posebnu meta oznaku za preusmjeravanja.

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

JavaScript preusmjeravanje

Možda najnepouzdanije preusmjeravanje, budući da korisnik uvijek može onemogućiti javascript u pregledniku. To se radi, međutim, rijetko, tako da metoda ima pravo na postojanje.

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

Htaccess preusmjeravanje (301)

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

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
Trajno preusmjeravanje /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, trebate ih sve i bit će naznačene na popisu. Da bismo malo olakšali stvari, postoji ona 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

Kako biste izbjegli dvostruko čitanje istih stranica od strane tražilica, ponekad trebate proslijediti sve adrese s domene bez www na domenu s www. Na primjer,

# omogućite modul i potrebnu dodatnu opciju
RewriteEngine uključen
Opcije + FollowSymLinks
# dva retka za preusmjeravanje s "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 gdje zaustaviti svoj izbor (naravno da vas muči, škripcem i škarama - bilješka urednika), onda je vrijeme da prestaneš patiti (o čemu ti pričaš! - bilješka urednika). Prestanimo gledati na php preusmjeravanje (ili neki drugi programski jezik o kojem ovdje nije bilo riječi, na primjer Perl) i preusmjeravanje pomoću .htaccess datoteke, budući da vam omogućuju prijenos stranice bez ikakvih gubitaka za optimizaciju tražilice. Ako nije važno, bilo koja metoda će poslužiti. I zapravo na ovoj završnoj noti (sol? La? Si? - bilješka urednika) Završavam ovaj post.

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

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

Radni kod za preusmjeravanje:

2. Html preusmjeravanje

Ovaj primjer preusmjerava korisnika na ispravnu adresu s odgodom od 1 sekunde.

Sjećam se da u IE-u nije radilo kako treba, odnosno uopće nije išlo. Ako ga koristite, provjerite, za svaki slučaj.

3. Preusmjerite na php

Jednostavna i ukusna, .php datoteka 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 je opcija iz primjera # 1, s malim dodatkom - naime, korištenjem ogp oznake. Da bude malo jasnije – Open Graph markup je protokol za označavanje sadržaja stranice za slanje sadržaja na društvene mreže. Kada objavljujete poveznicu na društvenu mrežu, možete "ručno" odrediti koju sličicu i opis prikazati.

Radni primjer (moguće su netočnosti i nedostaci, ali i dalje radi :)

Kako to izgleda kada se objavi u Kontaktu:

Kratak pregled točaka:
- označava da će se koristiti oznaka Open Graph
- - ispunite primamljiv opis - u gornjem primjeru to je "John Cena je imenovao datum svog povratka"
- - intrigantan naslov - u gornjem primjeru to 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 poveznica bila lijepa i velika, slika u početku mora biti dovoljne veličine. Za vKontakte, na primjer, to 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.

Općenito govoreći, sada ćemo govoriti o Lokacija objekta koji je svojstvo objekta Document... Imati Lokacija objekta postoji imanje href, uz pomoć kojega JavaScript preusmjeravanje... Ova nekretnina je dostupna i za čitanje i za pisanje. Prvo, pročitajmo ga:

Document.write (document.location.href);

Kao rezultat toga, vidjet ćete punu adresu svoje skripte.

Sada napravimo najjednostavnije JavaScript preusmjeravanje:

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

Stoga će svi korisnici koji pokreću ovu skriptu automatski otići na stranicu: " http: // stranica".

Sada napravimo klasični zadatak koji se vrlo često radi. Recimo da ste imali web stranicu: http://a.ru... Zatim ste kupili novu domenu za svoju stranicu i njena adresa je postala: http://b.ru... I želite da odu svi posjetitelji http://a.ru na novom http://b.ru... Štoviše, želite da znaju da vaša stranica ima novu adresu. Zvuči li vam situacija poznato? Dakle, ovo se implementira pomoću odgođ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 ići će na novu adresu. Ako je korisnik odjednom onemogućio JavaScript onda može ići sam jednostavnim klikom na poveznicu.