Jak przekierować na nową stronę w JavaScript?

By /

JavaScript

Przekierowanie na nową stronę internetową jest jednym z często wykonywanych zadań podczas tworzenia interaktywnych stron internetowych. JavaScript oferuje kilka metod, dzięki którym można łatwo przekierować użytkownika na inną stronę, zarówno w ramach tej samej witryny, jak i do zewnętrznych zasobów. W tej lekcji przyjrzymy się różnym sposobom realizacji przekierowania w JavaScript, wraz z prostymi przykładami.

Użycie window.location do przekierowania

Obiekt window.location w JavaScript dostarcza różne właściwości i metody, które można wykorzystać do manipulacji adresem URL strony. Do przekierowania możemy użyć właściwości href lub metody assign() tego obiektu.

Przykład kodu

Załóżmy, że mamy stronę z przyciskiem, który po kliknięciu przekierowuje użytkownika na inną stronę.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przekierowanie w JavaScript</title>
</head>
<body>
    <button id="redirectButton">Przejdź do Google</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript (script.js)

// Wybranie przycisku po ID
let redirectButton = document.getElementById("redirectButton");

// Dodanie nasłuchiwacza zdarzeń na kliknięcie przycisku
redirectButton.addEventListener("click", function() {
    // Przekierowanie na nową stronę
    window.location.href = "https://www.google.com";
    // Alternatywnie można użyć: window.location.assign("https://www.google.com");
});

Inne metody przekierowania

  • Metoda replace(): Podobnie jak assign(), ale nie pozwala użytkownikowi na powrót do poprzedniej strony za pomocą przycisku “Wstecz” w przeglądarce.
window.location.replace("https://www.google.com");
  • Użycie window.location.reload() do odświeżenia strony: Można to wykorzystać do przekierowania na tę samą stronę.
window.location.reload();

Podsumowanie

Przekierowanie w JavaScript jest prostą operacją, która może być realizowana na kilka różnych sposobów. Najczęściej używa się do tego właściwości window.location.href lub metody window.location.assign(), które pozwalają na łatwe przekierowanie użytkownika na wybraną stronę. Metoda replace() jest przydatna, gdy nie chcemy, aby użytkownik mógł wrócić do poprzedniej strony. Każda z tych metod ma swoje zastosowanie w zależności od potrzeb projektu. Ważne jest, aby pamiętać o zapewnieniu dobrej użytkownikowi nawigacji i intuicyjnego interfejsu, co jest kluczowe dla tworzenia przyjaznych i profesjonalnych stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top