Standardowy "waniliowy" sposób przekierowywania strony w JavaScript

window.location.href = 'newPage.html';

Lub prościej: (ponieważ window jest globalne)

location.href = 'newPage.html';

Jeśli jesteś tutaj, ponieważ tracisz HTTP_REFERER podczas przekierowywania, czytaj dalej:

(W przeciwnym razie zignoruj ​​tę ostatnią część)

Poniższa sekcja jest dla tych, którzy używają HTTP_REFERER jako jednego z wielu środków bezpieczeństwa (chociaż nie jest to świetny środek ochronny). Jeśli używasz Internet Explorer 8 lub starszego, te zmienne zostaną utracone podczas korzystania z dowolnej formy JavaScript przekierowanie strony (lokalizacja.href itp.).

Poniżej zaimplementujemy alternatywę dla IE8 i niższych, aby nie stracić HTTP_REFERER. W przeciwnym razie prawie zawsze możesz po prostu użyć window.location.href.

Testowanie na HTTP_REFERER (wklejanie adresu URL, sesja itp.) może pomóc w ustaleniu, czy żądanie jest uzasadnione. (Uwaga: istnieją również sposoby obejścia / sfałszowania tych odsyłających, jak zaznaczono w linku droopa w komentarzach)

Proste rozwiązanie do testowania w różnych przeglądarkach (powrót do window.location.href dla Internet Explorer 9+ i wszystkich innych przeglądarek)

Użycie: redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}

Można to zrobić na wiele sposobów.

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')

Pomogłoby, gdybyś był trochę bardziej opisowy w tym, co próbujesz zrobić. Jeśli próbujesz wygenerować dane stronicowane, możesz to zrobić na kilka sposobów. Możesz wygenerować osobne linki dla każdej strony, na którą chcesz przejść bezpośrednio.

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

Zauważ, że bieżąca strona w przykładzie jest inaczej obsługiwana w kodzie i CSS.

Jeśli chcesz, aby dane stronicowane były zmieniane za pośrednictwem AJAX, w tym miejscu pojawi się jQuery. To, co byś zrobił, to dodanie obsługi kliknięć do każdego tagu kotwicy odpowiadającego innej stronie. Ten program obsługi kliknięć wywołałby kod jQuery, który przechodzi i pobiera następną stronę za pośrednictwem AJAX i aktualizuje tabelę o nowe dane. W poniższym przykładzie założono, że masz usługę sieciową, która zwraca dane nowej strony.

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});

Uważam też, że location.replace(URL) jest najlepszym sposobem, ale jeśli chcesz powiadomić wyszukiwarki o Twoim przekierowaniu (nie analizują one kodu JavaScript, aby zobaczyć przekierowanie) powinieneś dodać metatag rel="canonical" do Twojej witryny.

Dobrym rozwiązaniem jest również dodanie sekcji noscript z metatagiem odświeżania HTML. Proponuję użyć tego JavaScript narzędzie do przekierowywania do tworzenia przekierowań. Ma też obsługę Internet Explorera do przekazywania strony odsyłającej HTTP.

Przykładowy kod bez opóźnień wygląda tak:

<!-- Place this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->

Ale jeśli ktoś chce przekierować z powrotem na stronę główną, może użyć poniższego fragmentu.

window.location = window.location.host

Byłoby pomocne, gdybyś miał trzy różne środowiska: programistyczne, pomostowe i produkcyjne.

Możesz przeglądać to okno lub obiekt window.location, umieszczając te słowa w Konsoli Chrome lub w Firebug Konsola.

OSTRZEŻENIE: ta odpowiedź została podana jedynie jako możliwe rozwiązanie; jest to oczywiście nie najlepsze rozwiązanie, ponieważ wymaga jQuery. Zamiast tego preferuj czyste rozwiązanie JavaScript.

$(location).prop('href', 'http://stackoverflow.com')

Zanim zacznę, jQuery to biblioteka JavaScript używana do manipulacji DOM. Nie powinieneś więc używać jQuery do przekierowywania strony.

Cytat z Jquery.com:

Chociaż jQuery może działać bez większych problemów w starszych wersjach przeglądarek, nie testujemy w nich aktywnie jQuery i generalnie nie naprawiamy błędów, które mogą się w nich pojawiać.

Znaleziono go tutaj: https://jquery.com/browser-support/

Tak więc jQuery nie jest ostatecznym rozwiązaniem zapewniającym kompatybilność wsteczną.

Poniższe rozwiązanie wykorzystujące surowy JavaScript działa we wszystkich przeglądarkach i od dawna jest standardem, więc nie potrzebujesz żadnych bibliotek do obsługi wielu przeglądarek.

Ta strona przekieruje do Google po 3000 milisekund

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

Różne opcje są następujące:

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"

Podczas używania zamiany przycisk Wstecz nie wróci do strony przekierowania, tak jakby nigdy nie był w historii. Jeśli chcesz, aby użytkownik mógł wrócić do strony przekierowania, użyj window.location.href lub window.location.assign. Jeśli korzystasz z opcji, która pozwala użytkownikowi wrócić do strony przekierowania, pamiętaj, że po wejściu na stronę przekierowania przekieruje Cię ona z powrotem. Weź to pod uwagę, wybierając opcję przekierowania. W warunkach, w których strona przekierowuje tylko wtedy, gdy użytkownik wykona jakąś akcję, umieszczenie strony w historii przycisku wstecz będzie w porządku. Ale jeśli strona automatycznie przekierowuje, powinieneś użyć opcji Replace, aby użytkownik mógł użyć przycisku Wstecz bez zmuszania do powrotu do strony, którą wysyła przekierowanie.

Możesz także użyć metadanych, aby uruchomić przekierowanie strony w następujący sposób.

Odświeżanie META

<meta http-equiv="refresh" content="0;url=http://evil.com/" />

Lokalizacja META

<meta http-equiv="location" content="URL=http://evil.com" />

Przejęcie kontroli BASE

<base href="http://evil.com/" />

Wiele innych metod przekierowania niczego niepodejrzewającego klienta na stronę, na którą może nie chcieć można znaleźć na tej stronie (żadna z nich nie jest zależna od jQuery):

https://code.google.com/p/html5security/wiki/RedirectionMethods

Chciałbym też zaznaczyć, że ludzie nie lubią być losowo przekierowywani. Przekierowuj ludzi tylko wtedy, gdy jest to absolutnie konieczne. Jeśli zaczniesz przekierowywać ludzi losowo, nigdy więcej nie wrócą do Twojej witryny.

Następny akapit jest hipotetyczny:

Możesz również zostać zgłoszony jako złośliwa witryna. Jeśli tak się stanie, gdy ludzie klikną link do Twojej witryny, przeglądarka użytkowników może ostrzec ich, że Twoja witryna jest złośliwa. Może się również zdarzyć, że wyszukiwarki mogą zacząć obniżać Twoją ocenę, jeśli ludzie zgłaszają złe doświadczenia w Twojej witrynie.

Zapoznaj się ze wskazówkami Google dla webmasterów dotyczącymi przekierowań: https://support.google.com/webmasters/answer/2721217?hl =pl&ref_topic=6001971

Oto zabawna mała strona, która wyrzuca cię ze strony.

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

Jeśli połączysz ze sobą dwa przykłady stron, uzyskasz małą pętlę przekierowywania, która zagwarantuje, że Twój użytkownik nigdy więcej nie będzie chciał korzystać z Twojej witryny.

Najpierw napisz poprawnie. Chcesz nawigować w aplikacji dla innego łącza z aplikacji dla innego łącza. Oto kod:

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

A jeśli chcesz nawigować po stronach w swojej aplikacji, to mam też kod, jeśli chcesz.

Możesz przekierować w jQuery w ten sposób:

$(location).attr('href', 'http://yourPage.com/');

W JavaScript i jQuery możemy użyć poniższego kodu, aby przekierować jedną stronę na inną:

window.location.href="http://google.com";
window.location.replace("page1.html");

ECMAScript 6 + jQuery, 85 bajtów

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

Proszę, nie zabijaj mnie, to żart. To żart. To żart.

Dało to „odpowiedź na pytanie” w tym sensie, że prosiło o rozwiązanie „za pomocą jQuery”, co w tym przypadku oznaczało wrzucenie go jakoś do równania.

Ferrybig najwyraźniej potrzebuje wyjaśnienia żartu (wciąż żartuję, jestem pewien, że w formularzu recenzji są ograniczone opcje), więc bez zbędnych ceregieli:

Inne odpowiedzi niepotrzebnie używają attr() jQuery na obiektach location lub window.

Ta odpowiedź również ją nadużywa, ale w bardziej absurdalny sposób. Zamiast używać go do ustawienia lokalizacji, używa attr() do pobrania funkcji, która ustawia lokalizację.

Funkcja nosi nazwę jQueryCode, mimo że nie ma w niej nic jQuery, a wywołanie funkcji somethingCode jest po prostu okropne, zwłaszcza gdy coś nie jest nawet językiem.

"85 bajtów" to odniesienie do Code Golfa. Gra w golfa nie jest oczywiście czymś, co powinieneś robić poza kodem golfowym, a ponadto ta odpowiedź wyraźnie nie dotyczy golfa.

Zasadniczo kulisz się.

JavaScript:

window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');

JQuery:

var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window

Używanie JavaScript:

Metoda 1:

window.location.href="http://google.com";

Metoda 2:

window.location.replace("http://google.com");

Korzystanie z jQuery:

Metoda 1: $(lokalizacja)

$(location).attr('href', 'http://google.com');

Metoda 2: Funkcja wielokrotnego użytku

jQuery.fn.redirectTo = function(url){
    window.location.href = url;
}

jQuery(window).redirectTo("http://google.com");

Oto przekierowanie z opóźnieniem czasowym. Możesz ustawić czas opóźnienia na dowolny:

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>

JavaScript zapewnia wiele metod pobierania i zmiany bieżącego adresu URL, który jest wyświetlany w pasku adresu przeglądarki. Wszystkie te metody wykorzystują obiekt Location, który jest właściwością obiektu Window. Możesz utworzyć nowy obiekt Location z bieżącym adresem URL w następujący sposób..

var currentLocation = window.location;

Podstawowa struktura adresu URL

<protocol>//<hostname>:<port>/<pathname><search><hash>

1. Protokół — określa nazwę protokołu używanego do uzyskiwania dostępu do zasobu w Internecie. (HTTP (bez SSL) lub HTTPS (z SSL))

2. hostname — nazwa hosta określa hosta będącego właścicielem zasobu. Na przykład www.stackoverflow.com. Serwer świadczy usługi przy użyciu nazwy hosta.

3. port — numer portu używany do rozpoznawania określonego procesu, do którego ma zostać przekazana wiadomość z Internetu lub innej sieci, gdy dotrze ona do serwera.

4. pathname — ścieżka zawiera informacje o konkretnym zasobie na hoście, do którego klient sieci Web chce uzyskać dostęp. Na przykład stackoverflow.com/index.html.

5. zapytanie — ciąg zapytania następuje po komponencie ścieżki i dostarcza ciąg informacji, które zasób może wykorzystać do określonego celu (na przykład jako parametry wyszukiwania lub jako dane do przetworzenia).

6. hash — część kotwicy adresu URL zawiera znak hash (#).

Dzięki tym właściwościom obiektu Location możesz uzyskać dostęp do wszystkich tych komponentów adresu URL

1. hash – ustawia lub zwraca część kotwicy adresu URL.
2. host — zestawy lub zwraca nazwę hosta i port adresu URL.
3. nazwa hosta — ustawia lub zwraca nazwę hosta adresu URL.
4. href — Ustawia lub zwraca całą wartość URL.
5. pathname — ustawia lub zwraca nazwę ścieżki adresu URL.
6. port — ustawia lub zwraca numer portu, którego serwer używa dla adresu URL.
7. protokół — ustawia lub zwraca protokół adresu URL.
8. wyszukaj – zestawy lub zwraca część zapytania adresu URL

Teraz Jeśli chcesz zmienićstronęlub przekierowaćużytkownika do innej strony możesz użyćwłaściwości href obiektu Location w ten sposób

Możesz użyć właściwości href obiektu Location.

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

Obiekt lokalizacji również ma te trzy metody

1. assign() — ładuje nowy dokument.
2. reload() — ponownie ładuje bieżący dokument.
3. replace() — zastępuje bieżący dokument nowym

Możesz użyć assign() i zastąpić metod również do przekierowywania na inne strony, takie jak te

location.assign("http://www.stackoverflow.com");

location.replace("http://www.stackoverflow.com");

Czym różnią się metody assign() i replace() — różnica między metodą replace() a metodą assign()() polega na tym, że replace() usuwa adres URL aktualny dokument z historii dokumentu, oznacza to, że nie można użyć przycisku „wstecz”, aby przejść z powrotem do oryginalnego dokumentu. Więc Użyj metody assign(), jeśli chcesz załadować nowy dokument i chcesz dać opcję powrotu do oryginalnego dokumentu.

Możesz zmienić właściwość href obiektu lokalizacji za pomocą jQuery również w ten sposób

$(location).attr('href',url);

A zatem możesz przekierować użytkownika na inny adres URL.

Zasadniczo jQuery jest po prostu frameworkiem JavaScript i do wykonywania niektórych czynności, takich jak przekierowanie w tym przypadku, możesz po prostu użyć czystego JavaScript, więc w w takim przypadku masz 3 opcje za pomocą waniliowego JavaScript:

1) Użycie lokalizacji zamień spowoduje zastąpienie bieżącej historii strony, co oznacza, że ​​nie można użyć przycisku wstecz, aby wrócić do oryginalnej strony.

window.location.replace("http://stackoverflow.com");

2) Korzystając z lokalizacji przypisz, zachowasz dla Ciebie historię, a za pomocą przycisku Wstecz możesz wrócić do oryginalnej strony:

window.location.assign("http://stackoverflow.com");

3) Zalecam użycie jednego z tych poprzednich sposobów, ale może to być trzecia opcja przy użyciu czystego JavaScript:

window.location.href="http://stackoverflow.com";

Możesz również napisać funkcję w jQuery, aby to obsłużyć, ale nie jest to zalecane, ponieważ jest to tylko jedna linia czysta funkcja JavaScript, możesz również użyć wszystkich powyższych funkcji bez okna, jeśli jesteś już w zakresie okna, na przykład window.location.replace("http://stackoverflow.com"); może być location.replace("http://stackoverflow.com");

Również pokazuję je wszystkie na poniższym obrazku:

Musiałem tylko zaktualizować tę śmieszność kolejną nowszą metodą jQuery:

var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);

Można to zrobić na trzy główne sposoby:

window.location.href='blaah.com';
window.location.assign('blaah.com');

I...

window.location.replace('blaah.com');

Ten ostatni jest najlepszy dla tradycyjnego przekierowania, ponieważ nie zapisze strony, na którą przeszedłeś przed przekierowaniem w historii wyszukiwania. Jeśli jednak chcesz tylko otworzyć kartę z JavaScriptem, możesz użyć dowolnego z powyższych. 1

EDYCJA: Prefiks window jest opcjonalny.

JavaScript jest bardzo rozbudowany. Jeśli chcesz przejść do innej strony, masz trzy opcje.

 window.location.href='otherpage.com';
 window.location.assign('otherpage.com');
 //and...

 window.location.replace('otherpage.com');

Ponieważ chcesz przejść na inną stronę, możesz użyć dowolnej z nich, jeśli jest to Twoje wymaganie. Jednak wszystkie trzy opcje są ograniczone do różnych sytuacji. Wybieraj mądrze zgodnie ze swoimi wymaganiami.

Jeśli jesteś zainteresowany większą wiedzą na temat koncepcji, możesz przejść dalej.

window.location.href; // Returns the href (URL) of the current page
window.location.hostname; // Returns the domain name of the web host
window.location.pathname; // Returns the path and filename of the current page
window.location.protocol; // Returns the web protocol used (http: or https:)
window.location.assign; // Loads a new document
window.location.replace; // RReplace the current location with new one.

Działa to w każdej przeglądarce:

window.location.href = 'your_url';

Powinien po prostu móc ustawić za pomocą window.location.

Przykład:

window.location = "https://stackoverflow.com/";

Oto post z przeszłości na ten temat: Jak to zrobić przekierować do innej strony internetowej?

var url = 'asdf.html';
window.location.href = url;

Możesz to zrobić bez jQuery jako:

window.location = "http://yourdomain.com";

A jeśli chcesz tylko jQuery, możesz to zrobić tak:

$jq(window).attr("location","http://yourdomain.com");

# Przekierowanie strony HTML przy użyciu metody jQuery/JavaScript

Wypróbuj ten przykładowy kod:

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "Login.php";
    else
        window.location = "Logout.php";
}

Jeśli chcesz podać pełny adres URL jako window.location = "www.google.co.in";.

Pierwotne pytanie: „Jak przekierować za pomocą jQuery?”, stąd odpowiedź implementuje jQuery >> Bezpłatne przypadki użycia.

Aby po prostu przekierować na stronę z JavaScriptem:

window.location.href = "/contact/";

Lub jeśli potrzebujesz opóźnienia:

setTimeout(function () {
  window.location.href = "/contact/";
}, 2000);   // Time in milliseconds

JQuery pozwala z łatwością wybierać elementy ze strony internetowej. Możesz znaleźć na stronie wszystko, co chcesz, a następnie użyć jQuery, aby dodać efekty specjalne, reagować na działania użytkownika lub wyświetlać i ukrywać zawartość wewnątrz lub na zewnątrz wybranego elementu. Wszystkie te zadania zaczynają się od znajomości jak wybrać element lub zdarzenie .

$('a,img').on('click',function(e){
  e.preventDefault();
  $(this).animate({
    opacity: 0 //Put some CSS animation here
  }, 500);
  setTimeout(function(){
    // OK, finished jQuery staff, let's go redirect
    window.location.href = "/contact/";
  },500);
});

Wyobraź sobie, że ktoś napisał skrypt/wtyczkę z 10000 wierszami kodu. Dzięki jQuery możesz połączyć się z tym kodem za pomocą jednej lub dwóch linijek.

Musisz umieścić tę linię w swoim kodzie:

$(location).attr("href","http://stackoverflow.com");

Jeśli nie masz jQuery, skorzystaj z JavaScript:

window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");