JavaScript:Jak přesměrovat na jinou webovou stránku

Úvod

Často potřebujeme uživatele přesměrovat na jiný web nebo jinou webovou stránku na stejném webu. Existuje několik způsobů přesměrování, mezi které patří přesměrování JavaScript , přesměrování na straně serveru a Přesměrování metadat HTML aktualizace . Přesměrování je v podstatě mechanismus, který uživatele posílá na jinou URL adresu.

Motivace k použití přesměrování se může lišit, ve většině případů je to proto, že:

  • Z jakéhokoli důvodu jste se přestěhovali do jiné domény, takže můžete uživatele přesměrovat na novou doménu, když přistupují k obsahu ve starší doméně.

  • Máte několik stránek, jejichž obsah se liší podle umístění, jazyka, prohlížečů nebo jiných faktorů, na základě kterých přesměrováváte uživatele na nejvhodnější stránku.

  • Neověřené nebo neautorizované požadavky uživatelů přesměrujete na zdroje na přihlašovací stránku.

  • Posíláte uživatele na jiné stránky související s obsahem aktuálního webu.

Toho všeho je prakticky dosaženo pomocí Location objekt, který obsahuje informace o adrese URL . Existuje několik způsobů, jak to udělat, pohrát si s různými vlastnostmi Location objekt. V tomto tutoriálu se podíváme na to, jak přesměrovat uživatele na jinou webovou stránku v JavaScriptu a na co si dát pozor, abyste minimalizovali potenciální negativní dopad SEO.

window.location Vlastnost

window.location objekt označuje aktuální umístění nebo spíše URL okna/uživatele. Technicky je to pouze pro čtení vlastnost, přesto s ní můžeme manipulovat přiřazením nových hodnot (DOMString s) na jeho vlastnosti. windows prefix v windows.location objekt lze vynechat, protože je hierarchicky umístěn v horní části rozsahu.

Přesměrovat uživatele pomocí location.href

location.href vlastnost označuje aktuální URL jako řetězec. Změna href vlastnost také automaticky naviguje uživatele do nového href hodnota. Změna href vlastnost je tak snadné, jak jí jednoduše přiřadit novou hodnotu:

location.href = "https://stackabuse.com/";

Poznámka: Funkčně ekvivalentní řádek kódu je:

windows.location = "https://stackabuse.com";

Za zmínku stojí, že uživatele můžete přesměrovat na doménu jiná než doména, na které se s tímto přístupem v současnosti pohybují, z toho však mohou vyvstat bezpečnostní problémy, takže této praxi je třeba se pokud možno vyhnout.

Přesměrování je obvykle vázané na nějakou událost, jako je stisknutí tlačítka, které uživatele přesměruje na jinou webovou stránku, nebo jiné události, jako když uživatel provádí nějakou operaci na webu (nahrání obrázku na sociální média, po kterém je přesměrován na například ten příspěvek). Pojďme napsat jednoduchou funkci, která přesměruje uživatele po kliknutí na tlačítko:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Redirection</title>
    <script type = "text/javascript">
        function Redirect() {
         window.location.href = "https://stackabuse.com/";
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Redirect()"/>
</body>
</html>

Nastavení href vlastnost je podobná jako kliknutí myší by udělal.

Přesměrovat uživatele pomocí location.assign()

location.assign(url) metoda načte zdroj v poskytnutém url a zobrazí jej v window . Toto je ve skutečnosti preferovaný přístup k přesměrování uživatelů ve srovnání s nastavením href vlastnost, protože také kontroluje bezpečnost z poskytnutých url , vyvolá výjimku, pokud to není bezpečný cíl. Další výhodou je, že vytvoří nový záznam v historii prohlížeče , což uživateli umožňuje ladně přejít "Zpět" pokud by chtěli.

Za zmínku také stojí location.assign() nepovoluje křížový původ přesměrování. Přesměrovat můžete pouze na stejnou doménu, ve které je hovor uskutečněn, což má pozitivní dopad na bezpečnost.

Kromě toho jej lze použít v podstatě stejným způsobem jako přiřadit novou hodnotu location.href . Pojďme přepsat naši stránku tak, aby používala assign() funkce místo toho:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Assigning</title>
    <script type = "text/javascript">
        function Assign() {
         window.location.assign("https://stackabuse.com/");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Assign()" />
</body>
</html>

Přesměrovat uživatele pomocí location.replace()

replace(url) metodu lze použít k nahrazení aktuální zdroj na window se zdrojem načteným z url . Ve skutečnosti to nepřesměruje uživatele a neukládá se do historie prohlížeče. Existují stejná bezpečnostní omezení jako u assign() metoda, díky které je tato metoda vhodná, pokud chcete nahradit obsah jinou stránkou:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Replacing</title>
    <script type = "text/javascript">
        function Replace() {
         window.location.Replace("https://stackabuse.com");
        }
    </script>
</head>
<body>
    <input type="button" value="Redirect Me" onclick="Replace()" />
</body>
</html>

Za zmínku také stojí assign() metoda má vážný, potenciál, kon. Pokud se má uživatel vrátit na stránku, která automaticky spustí assign() metodou, budou přesměrováni zpět na stránku, ze které se pokusili zpět vrátit . Poté by vstoupili do smyčky „zpět“ pomocí tlačítka Zpět , ale je přesměrován na jinou stránku kvůli assign() metoda.

Pokud používáte assign() , ujistěte se, že není automaticky volána na stránku a že její vyvolání vyžaduje akci uživatele, jako je její vyvolání stisknutím tlačítka. Pokud ne - použijte location.replace() .

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

Navíc location.replace() je nejblíže přesměrování HTTP , protože původní odkaz se do historie prohlížeče nepřidá.

Bezpečnostní důsledky a vedlejší účinky

Uvedené zabezpečení platí pro všechny výše uvedené metody a týká se následujících aspektů:

  • Pokud původ skriptu, který metodu volá, není stejný jako původ aktuální stránky – bude to považováno za porušení zabezpečení a výjimku DOME SECURITY_ERROR typ bude vyhozen. To znamená, že externí knihovny a služby vložené do vaší vlastní stránky nebudou moci uživatele přesměrovat.
  • Pokud je uložená adresa URL neplatná, zobrazí se DOMException bude vyhozen.
  • Pokud uživatele přesměrováváte na jinou doménu, než ve které se již nacházel, CORS může zasáhnout a zabránit tomu.

Některé z možných vedlejších účinků, které by mohly nastat kvůli problémům s designem způsobeným člověkem, jsou:

  • Při přesměrování (jiné než replace() ) dochází příliš rychle (tj. za méně než 3 sekundy), může způsobit poškození tlačítka Zpět v prohlížeči. To znamená, že pokaždé, když se pokusíte vrátit zpět na předchozí stránku, dojde k přesměrování téměř okamžitě znovu a vytvoří se nekonečná smyčka.
  • Lze to považovat za Doorway Page (tj. stránky vytvořené pro manipulaci s indexy SEO), což se nedoporučuje
  • Špatně naplánovaná a používaná přesměrování mohou způsobit řetězová přesměrování, přesměrování mezi dvěma nebo více stránkami.

Vliv na SEO

Je jich mnoho faktory, které ovlivňují SEO, a spousta z nich není ve skutečnosti veřejně známá, aby nedošlo k jejich zneužití. Jisté však je, že špatně optimalizovaný kód může mít negativní dopad na SEO. Může to vést k dlouhé době načítání, řetězcům přesměrování nebo dokonce smyčkám. Mnoho webových prohledávačů nespustí kód JavaScript, což může negativně ovlivnit hodnocení stránky.

Nejlepší způsob, jak tyto problémy překonat, může být:

  • Chcete-li ether správně provést, zadejte přesměrování HTTP na straně serveru s libovolným stavovým kódem přesměrování (301..308 ) nebo vystavit 404 pro stránky, které již nechcete hostovat nebo na které chcete přesměrovávat.

  • Chcete-li informovat vyhledávače o duplicitní stránce přidáním <link rel="canonical" href="https://original_link"/> v <head></head> sekce. Implementace je snazší než provádění jakékoli další práce na straně serveru, ale mějte na paměti, že ne všechny webové prohledávače to ocení.

Závěr

V tomto tutoriálu jsme si prošli, jak provést přesměrování používání JavaScriptu, stejně jako bezpečnostní důsledky a potenciální vliv na SEO.