În acest articol, vă vom arăta cum puteți organiza o redirecționare dintr-o pagină folosind o locație JavaScript. Redirecționările neașteptate sunt considerate foarte enervante din punctul de vedere al utilizatorului, deoarece afectează negativ experiența generală. De exemplu, dacă redirecționați utilizatorii către un alt site imediat după ce aceștia merg pe al dvs. De asemenea, dacă direcționați către o pagină terță cu un temporizator sau după ce au efectuat o anumită acțiune. Acest lucru va determina utilizatorul să dorească să părăsească site-ul dvs. imediat.

În plus, motoarele de căutare nu favorizează resursele care folosesc redirecționări, mai ales dacă induc în eroare utilizatorii. Dar există cazuri în care redirecționarea poate fi utilă. Prin urmare, vă lăsăm să decideți dacă utilizați sau nu redirecționarea apelurilor.

Metode de redirecționare JavaScript

În JavaScript, locația ferestrei sau obiectul locație este folosit pentru a obține informații despre locația paginii web curente (document), precum și pentru a o modifica. Mai jos este o listă de modalități care pot fi utilizate pentru a implementa redirecționări JavaScript:

// Setează noua locație a ferestrei curente. window.location = „http://www.example.com”; // Setează un nou hyperlink (URL) pentru fereastra curentă. window.location.href = "http://www.example.com"; // Atribuiți o nouă adresă URL ferestrei curente. window.location.assign ("http://www.example.com"); // Înlocuiește poziția ferestrei curente cu una nouă. window.location.replace ("http://www.example.com"); // Setează locația ferestrei curente în sine. self.location = „http://www.example.com”; // Setează poziția celei mai înalte ferestre în raport cu cea curentă. top.location = „http://www.example.com”;

Deși liniile de cod JavaScript de mai sus fac o treabă similară, ele au diferențe minore. De exemplu, dacă utilizați o redirecționare top.location în interiorul unui iframe, atunci aceasta va forța redirecționarea către fereastra principală. Un alt punct de reținut: location.replace () înlocuiește documentul curent, eliminându-l din istoric și făcându-l inaccesibil folosind butonul înapoi din browser.

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

De asemenea, puteți vizita această pagină pentru a afla mai multe despre cum funcționează window.location.

Redirecționare JavaScript: redirecționare la încărcare

Pentru a redirecționa un utilizator către un alt site imediat după deschiderea site-ului dvs., puteți utiliza următorul cod din partea de sus a paginii dvs., în interiorul unui element ... Sau, dacă utilizați un fișier .js separat, introduceți următorul cod în acel fișier și nu uitați să faceți un link către el în antetul paginii dvs.:

Doar înlocuiți adresa URL din exemplu cu cea către care doriți să redirecționați. Trebuie remarcat faptul că, cu acest tip de redirecționare, vizitatorii nu vor vedea deloc pagina ta web și vor fi redirecționați instantaneu către adresa țintă.

Redirecționare JavaScript: redirecționare după o anumită perioadă de timp

Pentru a redirecționa un utilizator către un alt site după o anumită perioadă de timp, se poate folosi următorul cod:

Locația JavaScript href de mai sus va redirecționa utilizatorul departe de pagină la 3 secunde după încărcarea completă. Puteți modifica valoarea 3000 ( 3 x 1000 în milisecunde) la discretia ta.

Redirecționare JavaScript: redirecționare de pe o pagină după un eveniment sau o acțiune a utilizatorului

Uneori trebuie să trimiteți un utilizator pe o altă pagină după un anumit eveniment sau acțiune. În astfel de cazuri, puteți utiliza o verificare a stării sau puteți atașa un eveniment elementului pentru a efectua o redirecționare. Luați în considerare următoarele două exemple:

Codul de mai sus Locația documentului JavaScript href va redirecționa dacă condiția este adevărată.

O zi buna, abonati si invitati ai blogului meu. Astăzi vreau să vă spun un material foarte important și solicitat, ale cărui mecanisme sunt folosite pe multe site-uri și servicii web. Și anume, voi explica ce este redirecționarea în JavaScript.

În această postare veți găsi o mulțime de informații utile despre redirecționări, aflați despre industria sa principală. De asemenea, vă voi arăta cum puteți crea o redirecționare folosind php, html și chiar .htaccess. Și, desigur, vei găsi exemple după fiecare capitol cheie. Acum să trecem la debriefing!

Ce este redirecționarea și în ce scop a fost creată?

Tradus din engleză redirecționare înseamnă „redirecționare, redirecționare”. Într-adevăr, cu ajutorul redirecționării, utilizatorii sunt redirecționați automat către alte pagini de resurse web folosind o ancoră (link) predeterminată.

Fiecare dintre voi cel puțin o dată s-a confruntat cu astfel de situații când mergeți la una, iar el vă redirecționează către aceeași, aflată doar pe un nou link. De asemenea, se întâmplă ca utilizatorii să fie redirecționați către alte pagini sau reclame. Toate acestea se fac folosind redirecționări.

Datorită acestui mecanism, puteți gestiona flexibil redirecționarea: setați tranziția către pagini noi cu întârziere, în cazul unei schimbări de domeniu, redirecționați utilizatorul către o nouă adresă prin url fără acțiuni suplimentare ale acestuia din urmă, deschideți pagini într-un filă nouă, organizați o redirecționare înapoi în cazul redirecționării nereușite etc.

Obiectul este responsabil pentru astfel de acțiuni. document.locaţie... De fapt, acest obiect are o serie de proprietăți care sunt necesare pentru a obține informații complete despre pagina web (pagina).

Deocamdată, voi vorbi despre o proprietate care este folosită pentru a redirecționa paginile - href. Dacă doriți să vă aprofundați cunoștințele, atunci căutați informații în documentație.

Cum implementez redirecționarea folosind document.location.href?

Asa de, document.location.href conține calea completă către paginile serviciului web. Dacă acum rulați linia document.write (document.location.href) oriunde, veți primi un link complet către fila în care ați scris-o în răspuns.

Pentru a implementa o redirecționare, trebuie doar să atribuiți o altă adresă acestei proprietăți.

Am decis să dau un exemplu pe o anumită sarcină, care se găsește adesea printre sarcinile din proiecte reale.

Deci, aveți un fel de resursă web aflată la link, de exemplu, http://pfd.ru. Dar, de-a lungul timpului, ați achiziționat un domeniu nou, mai potrivit și, prin urmare, site-ul a fost mutat la o nouă adresă - http://ddd.ru.

Deoarece utilizatorii sunt obișnuiți cu vechea legătură sau au marcat acest serviciu sub vechea adresă, trebuie să implementați o tranziție automată. În același timp, trebuie să implementați sarcina, astfel încât clienții să poată vedea modificările. Pentru a face acest lucru, trebuie să scrieți următoarea implementare software:

Acum site-ul companiei „****” se află la o nouă adresă: http://ddd.ru... După 6 secunde, veți fi redirecționat automat către acesta. Dacă tranziția nu a avut loc automat, atunci urmați linkul specificat: http://ddd.ru

Ca un mic bonus, am decis să atașez un alt exemplu de cod care este întrebări foarte frecvente. Uneori există și alte situații când, împreună cu redirecționarea, trebuie să transferați unele date către pagina deschisă prin metoda POST. Acest mecanism poate fi implementat și prin js.

Eticheta este folosită pentru a trimite orice informații în marcajul html

Acum, folosind o funcție scrisă în JavaScript, datele sunt trimise:

V-am arătat cum să implementați redirecționări folosind limbajul js. Și acum să trecem la analiza aceluiași mecanism, dar în alte limbaje de programare.

Redirecționează către html

Pentru a redirecționa utilizatorul către un alt serviciu, utilizați eticheta .

În exemplu, vă voi redirecționa către site-ul oficial W3C. Rulați codul atașat în orice editor disponibil și analizați activitatea acestuia.

Vă voi spune puțin despre atributele etichetelor .

înseamnă că se va deschide un fișier nou în fereastra curentă a browserului. Elementul de conținut este responsabil pentru timpul de redirecționare (în acest caz, 3 secunde) și adresa la care se va face tranziția.

Cu toate acestea, această abordare nu funcționează întotdeauna.

Redirecționare PHP

În php se folosește și locația și se încadrează în antet, ca în versiunea anterioară. Arata cam asa:

antet ("Locație: https://www.w3.org/");

După procesarea liniei, va reveni un cod de stare de redirecționare din trei cifre. Dacă tipul de redirecționare nu este specificat în atributele antetului, i.e. codul 201 sau 3**, apoi 302 este returnat automat, ceea ce indică o mișcare temporară.

Vreau să subliniez un detaliu important. Astăzi, toți dezvoltatorii care se respectă folosesc redirecționarea 301. Vă permite să:

• Rezumați indicatori importanți ai serviciilor web, în ​​urma cărora, chiar și la mutarea la o nouă adresă, site-ul nu își pierde pozițiile în motoarele de căutare;
• Lipiți nume de domenii cu și fără un „www” triplu;
• Redirecționați roboții și utilizatorii către pagini web funcționale noi în loc de cele învechite.

Directiva Htaccess

Aici ajungem fără probleme la o directivă importantă, foarte utilă, dar și complexă .htaccess. Este un document de configurare pentru Apache și servere similare. Efectul său se aplică numai directorului în care se află. Posibilitățile se aplică și subdirectoarelor.

Redirecţiona(din engleză. redirecţiona- redirecționare) este o redirecționare a unei pagini de site către o altă pagină sau un alt site. O redirecționare se poate face în diferite moduri, principalul dintre acestea fiind discutat aici., Și anume redirecționează către php, javascript, redirecționează cu htmlși folosind fișierul htaccess.

Printre modurile enumerate, cele mai relevante sunt redirecționarea php și redirecționarea .htaccess... Faptul este că aceste metode permit nu numai redirecționarea paginii, ci și returnarea unui special Eroare 301(301 Redirecționare permanentă). Pentru ce este? Și aveți nevoie de el pentru motoarele de căutare.

Să presupunem că am avut un site promovat cu un număr mare de vizitatori. Apoi site-ul a fost mutat pe un nou domeniu. Motorul de căutare nu știe încă. O redirecționare 301 vă permite să „lipiți” adresa veche și cea nouă, păstrând în același timp toate acele elemente de optimizare care au fost realizate pentru acest site, păstrând astfel traficul și audiența site-ului în sine.

Acum să ne uităm la toate opțiunile enumerate pentru redirecționări și să începem cu o redirecționare către php.

Redirecționare PHP (301)

Redirecționarea către php, precum și în alte limbaje de programare, se bazează pe specificarea protocolului HTTP și anume, trimiterea antetelor necesare. Cum functioneaza? Destul de simplu. De fiecare dată când accesăm o pagină de pe Internet, primim un răspuns HTTP de la server, care conține anteturile (header) și corpul (body). În corpul răspunsului

antet („HTTP / 1.1 301 Mutat permanent”);
antet („Locație: http://site.com/pagename.html”);
?>

redirecționare HTML

Limbajul de marcare HTML are o metaetichetă specială pentru redirecționări.

Se modifică doar câmpul de conținut, care indică numărul de secunde înainte de redirecționare și linkul real unde va fi făcută redirecționarea. Inutil să spun că eticheta este plasată în codul html între etichetele head.

redirecționare JavaScript

Poate cea mai nesigură redirecționare, deoarece utilizatorul poate oricând dezactiva JavaScript în browser. Acest lucru se face, totuși, rar, așa că metoda are dreptul de a exista.

În acest cod, o funcție este creată cu o redirecționare către pagina necesară și apoi apelată în funcția setTimeout, care permite redirecționarea după timpul necesar.

Redirecționare Htaccess (301)

Fișierul .htaccess este un fișier de serviciu cu diferite setări suplimentare pentru serverul Apache. Este plasat manual, în cazul nostru, la rădăcina site-ului. Cu ajutorul lui, puteți aranja redirecționări 301, totuși, pentru aceasta, modulele necesare trebuie să fie activate în Apache.

Folosind directivele modulului mod_alias

Există trei directive în acest modul: Redirect, RedirectPermanent și RedirectMatch. Primele două par a fi identice în proprietățile lor, al treilea se desparte. Pentru primele două exemple:

Redirecționare 301 / http://site.com
Redirecționează permanent /index.html http://site.com
RedirectPermanent /index.html http://site.com/default.html

Liniile sunt similare. Dar se pare că există un dezavantaj - pentru a redirecționa toate paginile, aveți nevoie de toate și vor fi indicate în listă. Pentru a ușura lucrurile puțin, există acea altă directivă:

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

Puteți seta expresii regulate pentru a redirecționa de la vechea adresă URL la cea nouă.

Folosind directivele modulului mod_rewrite

Pentru a evita citirea dublă a acelorași pagini de către motoarele de căutare, uneori trebuie să redirecționați toate adresele de la un domeniu fără www către un domeniu cu www. De exemplu,

# activați modulul și opțiunea suplimentară necesară
RewriteEngine Pornit
Opțiuni + FollowSymLinks
# două linii pentru redirecționarea de la „fără bbw” la „cu bbw”
RewriteCond% (HTTP_HOST) ^ site.com
RewriteRule (. *) Http://www.site.com/$1

În loc de o concluzie

Dacă încă ești chinuit de întrebarea unde să-ți oprești alegerea (bineînțeles că te chinuiește, cu menghină și foarfece - nota editorului), atunci este timpul să nu mai suferi (despre ce vorbești! - nota editorului). Să nu ne mai uităm la redirecționarea php (sau alt limbaj de programare care nu a fost discutat aici, de exemplu Perl) și redirecționarea folosind fișierul .htaccess, deoarece vă permit să transferați site-ul fără pierderi pentru optimizarea motorului de căutare. Dacă nu este important, atunci orice metodă va funcționa. Și de fapt pe această notă finală (sare? La? Si? - nota editorului) Închei această postare.

Patru opțiuni pentru redirecționarea (redirecționarea) utilizatorilor, clar și cu exemple.

1. Redirecționare prin Java Script - va funcționa numai dacă utilizatorul are suportul JS activat pe dispozitiv. Nu vă faceți griji, procentul de utilizatori fără JS este neglijabil. Dacă doriți să verificați cât de incomod este, dezactivați JS în browser pentru o zi.

Cod de redirecționare de lucru:

2. Redirecționare HTML

Acest exemplu redirecționează utilizatorul la adresa corectă cu o întârziere de 1 secundă.

Îmi amintesc că în IE nu a funcționat corect sau, mai degrabă, nu a funcționat deloc. Dacă îl folosești, verifică-l, pentru orice eventualitate.

3. Redirecționați către php

Simplu și de bun gust, un fișier .php cu următorul conținut:

4. Redirecționează prin .htaccess

Redirecționare / http://url4trafic.ru

La redirecționarea traficului de pe rețelele de socializare, în cazuri generale, cea mai relevantă opțiune este din exemplul #1, cu o mică adăugare - și anume, folosirea markupului ogp. Pentru a fi puțin mai clar - Open Graph markup este un protocol de marcare a conținutului paginii pentru trimiterea conținutului său către rețelele sociale. Când publicați un link către o rețea socială, puteți specifica „manual” ce imagine în miniatură și descrierea să fie afișate.

Un exemplu de lucru (sunt posibile inexactități și deficiențe, dar încă funcționează :)

Cum arată când este publicat în Contact:

O scurtă defalcare a punctelor:
- indică faptul că va fi utilizat marcajul Open Graph
- - completați o descriere tentantă - în exemplul de mai sus este „John Cena a numit data întoarcerii sale”
- - titlu intrigant - în exemplul de mai sus este „John Cena Returns to Live - WWE Wrestling News”
- - aceasta este calea către imaginea care va fi încărcată - în exemplul de mai sus, acesta este același bărbat într-un tricou albastru.
Pentru ca linkul să fie frumos și mare, imaginea trebuie să fie inițial de dimensiune suficientă. Pentru vKontakte, de exemplu, aceasta este mai mult de 537x240 pixeli. Mai mult e mai bine.

Locație = "http://url4trafic.ru" - aceasta este, ați ghicit, adresa URL la care vom trimite utilizatorul.

Redirecţiona este redirecționarea automată a unui utilizator de la o adresă la alta. Adică o persoană vizitează un site, dar ajunge pe unul complet diferit (sau pe o altă pagină a unui site). Cred că ai văzut asta destul de des. Uneori redirecționarea se face cu întârziere... În general, subiectul este foarte important și îl voi trata în acest articol.

În general, vom vorbi acum despre Obiect de locație care este proprietatea obiectului Document... Avea Obiect de locație există o proprietate href, cu ajutorul căruia redirecționare JavaScript... Această proprietate este disponibilă atât pentru citire, cât și pentru scris. În primul rând, să o citim:

Document.write (document.location.href);

Ca rezultat, veți vedea adresa completă a scriptului dvs.

Acum să facem cel mai simplu redirecționare JavaScript:

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

Astfel, toți utilizatorii care rulează acest script vor merge automat pe site: " http: // site-ul".

Acum să facem o sarcină clasică care se face foarte des. Să presupunem că ai un site web: http://a.ru... Apoi ați cumpărat un domeniu nou pentru site-ul dvs. și adresa acestuia a devenit: http://b.ru... Și vrei să plece toți vizitatorii de la http://a.ru pe nou http://b.ru... Mai mult, vrei să știe că site-ul tău are o nouă adresă. Sună cunoscută situația? Deci, acest lucru este implementat folosind o redirecționare întârziată:

Site-ul nostru are o nouă adresă: http://b.ru... În 5 secunde vei fi redirecționat către el. Dacă acest lucru nu se întâmplă, atunci mergeți la dvs.: http://b.ru

În primul rând, utilizatorul va vedea mesajul și apoi 5 secunde va merge la noua adresă. Dacă brusc utilizatorul s-a dezactivat JavaScript apoi poate merge pe cont propriu făcând clic pe link.