Jak przekierować na inną stronę internetową?

7723

Jak mogę przekierować użytkownika z jednej strony na drugą za pomocą jQuery lub czystego JavaScript?

venkatachalam
źródło
147
Wciąż widzę oba window.location = url; i window.location.href = url; Czym się różnią? Czy oni są? BTW, nie wiedziałem o window.location.replace (url). Miły.
David M. Miller,
100
window.locationjest taki sam jak window.location.hrefpod względem zachowania. window.locationzwraca obiekt. Jeśli .hrefnie jest ustawiony, window.locationdomyślnie zmienia się parametr .href. Wniosek: użycie jednego z nich jest w porządku.
Raptor,
10
var url = "nazwa strony" $ (lokalizacja) .attr ('href', url);
Szalony naukowiec
31
@MadScientist To jest odwrotny sposób. Obiekt lokalizacji nie jest elementem HTML, a użycie obiektu jquery do ustawienia go wydaje się błędne. Dlaczego miałbyś korzystać z tego, skoro prosty kod JS jest tak prosty?
Juan Mendes
1
Dlaczego chcesz przekierować? Formularza logowania nie należy przesyłać? I nawet jeśli na stronie docelowej nie ma logiki, nadal będziesz mógł przesłać formularz na inną stronę.
Dimt

Odpowiedzi:

14804

Nie można po prostu przekierowywać za pomocą jQuery

jQuery nie jest konieczne i window.location.replace(...)najlepiej symuluje przekierowanie HTTP.

window.location.replace(...)jest lepsze niż używanie window.location.href, ponieważ replace()nie zachowuje strony źródłowej w historii sesji, co oznacza, że ​​użytkownik nie utknie w niekończącym się fiasku z tyłu.

Jeśli chcesz zasymulować komuś kliknięcie łącza, użyj location.href

Jeśli chcesz zasymulować przekierowanie HTTP, użyj location.replace

Na przykład:

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

// Another method for doing redirecting with JavaScript is this:
window.location = "https://stackoverflow.com";
Ryan McGeary
źródło
78
w przypadku przycisku Prześlij dodaj wartość false; również w ramach twojej funkcji
Abhi
134
Pytanie dotyczy konkretnie javascript, ale warto zauważyć, że odświeżanie meta może być używane jako powrót po awarii w przypadku, gdy użytkownik ma wyłączony javascript
Hoppe
22
@ NicolòMartini If (IE) document.write ("");
Jeff Noel
48
Jeśli już używasz jQuery, po prostu użyj $(location).attr('href',url);. window.location.hrefwydaje się mieć niestałe zachowanie w niektórych przeglądarkach, w rzeczywistości to zupełnie nie działa w mojej wersji Firefox. Słyszałem, że ustawienie window.locationbezpośrednio nie działa w wersjach IE.
Noz
8
„lepiej” należy usunąć. Jak stwierdzono w dalszej części odpowiedzi, najlepszym rozwiązaniem jest sytuacja. OP nie pyta „jak emulować przekierowanie HTTP za pomocą Javascript ...”
MadMaardigan
1684

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

$(location).attr('href', 'http://stackoverflow.com')
Boris Guéry
źródło
63
To jest dosłowna odpowiedź na pytanie. Jeśli korzystasz już z Jquery, a zatem masz już załadowany, użycie skrótu będzie bardziej wydajne i oczywiście bardziej przejrzyste
barrymac
27
Co ważniejsze, czy można to zrobić za pomocą jQuery, która jest absraktowana? To jest tylko opakowanie dla window.location.href = url; Ale jeśli jQuery miał jakąś funkcję, to jeśli window.location.href = url; nie będzie działać w obecnym środowisku (przeglądarka, system operacyjny itp.) JQuery może to zrekompensować?
Chris
271
Zmuszanie jQuery do równania w ten sposób jest po prostu śmieszne i bezcelowe, zwłaszcza, że window.locationnie jest elementem i dlatego nie ma atrybutów.
Tim Down
10
W jakiś sposób wątpię, aby to nadal .attr().setAttribute()
działało
156
@deltaray To nie jest kolejny sposób przekierowania, jak wspomniano powyżej, to bezsensowne opakowanie wokół obiektu lokalizacji, które nawet nie jest elementem! To mi przypomina i.stack.imgur.com/ssRUr.gif
JCM
676

Standardowy „waniliowy” sposób JavaScript na przekierowanie strony

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

Lub prościej: (ponieważ windowjest globalny)

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 przeznaczona dla osób używających HTTP_REFERERjednego z wielu środków bezpieczeństwa (chociaż nie jest to świetny środek ochronny). Jeśli korzystasz z przeglądarki Internet Explorer 8 lub nowszej, zmienne te gubią się podczas korzystania z dowolnej formy przekierowania strony JavaScript (location.href itp.).

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

Testowanie HTTP_REFERER(wklejanie adresów URL, sesja itp.) Może pomóc stwierdzić, czy żądanie jest uzasadnione. ( Uwaga: istnieją również sposoby obejścia / sfałszowania tych stron odsyłających, jak zauważa link 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)

Stosowanie: 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; 
    }
}
Mark Pieszak - Trilon.io
źródło
60
Uwaga: sprawdzanie odsyłacza jako środka bezpieczeństwa jest kiepskim rozwiązaniem. duckduckgo.com/?q=referrer+spoofing
droope
Jeśli masz adres URL odsyłacza HTTP GET w adresie URL strony odsyłającej, możesz go użyć do sprawdzenia poprawności sesji.
Andrew Fox,
@mcpDESIGNS czy na pewno próbowałeś użyć location.assign? Używam w mojej aplikacji z IE8 i nie tracę HTTP_REFERERnagłówka.
Buzinas,
Przynajmniej w 2012 roku nie działało, może naprawiły go późniejsze łaty IE8 - choć dobrze to słyszeć!
Mark Pieszak - Trilon.io
1
Twoja wzmianka HTTP_REFERER pomogły mi zrozumieć problem mam z window.open i znalazłem rozwiązanie tutaj: stackoverflow.com/questions/7580613/... . Nawiasem mówiąc, mam problem w IE11!
Dov Miller,
427

Jest na to 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')
Govind Singh
źródło
8
window.navigatejest tylko w starszej wersji IE (Firefox / Chrome nie obsługuje tego). Jeśli chcesz wymienić wszystkie opcje, nie zapomnij o document.location.
Rob W
document.location = document.referrer; Dodaj go również na liście. To nie działa jak History.back, a raczej powoduje odświeżenie strony.
Ali Humayun
.attr () nie działa na jQuery 3.0.0. zamiast tego użyj .val ().
Rivalus
4
@ LéoLam Właśnie dlatego istnieje wyszukiwarka o nazwie Google. :-) Możesz wyszukać każdy w Google i znaleźć różnicę. Nie chcesz wybierać losowo.
Jestem najbardziej głupią osobą,
Można też zobaczyć dokumenty, developer.mozilla.org/en-US/docs/Web/API/Location
John Balvin Arias
330

Działa to dla każdej przeglądarki:

window.location.href = 'your_url';
Fred
źródło
8
Możesz to również zrobić, document.location.replace(redirectURL)jeśli nie chcesz, aby pierwsza strona była w historii przeglądarki
jazzcat
298

Pomogłoby to, gdybyś był nieco bardziej opisowy w tym, co próbujesz zrobić. Jeśli próbujesz wygenerować dane stronicowane, istnieje kilka opcji, w jaki sposób to zrobić. Możesz wygenerować osobne linki dla każdej strony, do której chcesz mieć bezpośredni dostęp.

<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 obsługiwana inaczej w kodzie i CSS.

Jeśli chcesz, aby dane stronicowane były zmieniane za pomocą AJAX, tutaj wkraczałby jQuery. To, co zrobiłbyś, to dodać moduł obsługi kliknięć do każdego z tagów zakotwiczenia odpowiadających innej stronie. Ten moduł 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. Poniższy przykład zakłada, że ​​masz usługę internetową, 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
    });
});
tvanfosson
źródło
252

Myślę też, że location.replace(URL)to najlepszy sposób, ale jeśli chcesz powiadomić wyszukiwarki o twoim przekierowaniu (nie analizują kodu JavaScript, aby zobaczyć przekierowanie), powinieneś dodać rel="canonical"metatag na swojej stronie.

Dobrym rozwiązaniem jest także dodanie sekcji noscript z metatagem odświeżania HTML. Sugeruję, aby użyć tego narzędzia do przekierowywania JavaScript do tworzenia przekierowań. Obsługuje także przeglądarkę Internet Explorer, aby przekazać odnośnik HTTP.

Przykładowy kod wygląda następująco:

<!-- 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 -->
Patartics Milán
źródło
228

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

window.location = window.location.host

Byłoby pomocne, jeśli masz trzy różne środowiska: programowanie, tworzenie scenariuszy i produkcja.

Możesz eksplorować to okno lub obiekt window.location, po prostu umieszczając te słowa w konsoli Chrome lub konsoli Firebug .

Nadeem Yasin
źródło
window.location.replace (window.location.protocol + "//" + window.location.host)
moala
13
jeszcze prościej: window.location = '/'
Iftah
213

JavaScript zapewnia wiele metod pobierania i zmiany bieżącego adresu URL wyświetlanego na pasku adresu przeglądarki. Wszystkie te metody wykorzystują obiekt Location, który jest własnością obiektu Window. Możesz utworzyć nowy obiekt lokalizacji, który ma bieżący adres URL w następujący sposób.

var currentLocation = window.location;

Podstawowa struktura adresu URL

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

wprowadź opis zdjęcia tutaj

  1. Protokół - określa nazwę protokołu używaną do uzyskania dostępu do zasobu w Internecie. (HTTP (bez SSL) lub HTTPS (z SSL))

  2. nazwa hosta - nazwa hosta określa hosta, który jest 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 rozpoznania określonego procesu, do którego ma zostać przekazany Internet lub inna wiadomość sieciowa, gdy dotrze na serwer.

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

  5. zapytanie - ciąg zapytania podąża za komponentem ścieżki i zawiera ciąg informacji, które zasób może wykorzystać do określonego celu (na przykład jako parametry wyszukiwania lub dane do przetworzenia).

  6. hash - zakotwiczona część adresu URL zawiera znak skrótu (#).

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

  1. hash - Ustawia lub zwraca zakotwiczoną część adresu URL.
  2. host - Ustawia lub zwraca nazwę hosta i port adresu URL.
  3. nazwa hosta - Ustawia lub zwraca nazwę hosta adresu URL.
  4. href - Ustawia lub zwraca cały adres URL.
  5. nazwa ścieżki - 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. szukaj - Ustawia lub zwraca część adresu URL zapytania

Teraz Jeśli chcesz zmienić stronę lub przekierować użytkownika na inną stronę, możesz użyć hrefwłaściwości obiektu Lokalizacja w ten sposób

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

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

Obiekt lokalizacji ma również te trzy metody

  1. assign () - Ładuje nowy dokument.
  2. reload () - Przeładowuje bieżący dokument.
  3. replace () - Zamienia bieżący dokument na nowy

Możesz użyć metody replace () i zamień również, aby przekierować na inne strony takie jak te

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

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

Czym różnią się przypisania () i replace () - Różnica między metodą replace () a metodą replace () polega na tym, że replace () usuwa adres URL bieżącego dokumentu z historii dokumentu, co oznacza, że ​​nie można go użyć przycisk „wstecz”, aby przejść z powrotem do oryginalnego dokumentu. Dlatego użyj metody assign (), jeśli chcesz załadować nowy dokument, i chcesz dać możliwość 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);

I dlatego możesz przekierować użytkownika do innego adresu URL.

Nikhil Agrawal
źródło
203

Zasadniczo jQuery jest po prostu strukturą JavaScript i do robienia takich rzeczy jak przekierowanie w tym przypadku, możesz po prostu użyć czystego JavaScript, więc w tym przypadku masz 3 opcje za pomocą waniliowego JavaScript:

1) Korzystanie z funkcji zamiany lokalizacji 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) Przy użyciu przypisania lokalizacji spowoduje to zachowanie historii, a za pomocą przycisku Wstecz możesz wrócić do oryginalnej strony:

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

3) Zalecam korzystanie z jednego z poprzednich sposobów, ale może to być trzecia opcja z użyciem czystego JavaScript:

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

Możesz także napisać funkcję do obsługi jQuery, ale nie jest to zalecane, ponieważ jest to tylko jedna linia czysta funkcja JavaScript, możesz także 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 to byćlocation.replace("http://stackoverflow.com");

Pokazuję je również na poniższym obrazku:

location.replace location.assign

Alireza
źródło
1
Polecam przy użyciu assign()ciągu href=zbyt jak ten ostatni nie działać prawidłowo dla mnie w niektórych przypadkach.
marsze
169

Zanim zacznę, jQuery jest biblioteką JavaScript używaną do manipulacji DOM. Dlatego nie powinieneś używać jQuery do przekierowania strony.

Cytat z Jquery.com:

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

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

Zatem jQuery nie jest kompletnym 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 milisekundach

<!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 korzystania z zastąpienia 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.hreflubwindow.location.assign . Jeśli skorzystasz z opcji, która pozwala użytkownikowi wrócić do strony przekierowania, pamiętaj, że po wejściu na stronę przekierowania przekieruje cię z powrotem. Weź to pod uwagę, wybierając opcję przekierowania. W warunkach, w których strona przekierowuje tylko wtedy, gdy użytkownik wykona czynność, umieszczenie strony w historii przycisku Wstecz będzie w porządku. Ale jeśli strona automatycznie przekierowuje, powinieneś użyć metody zastępowania, aby użytkownik mógł użyć przycisku Wstecz bez zmuszania do powrotu na stronę, którą wysyła przekierowanie.

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

META Odśwież

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

Lokalizacja META

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

BASE Hijacking

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

Na tej stronie można znaleźć wiele innych metod przekierowywania niczego niepodejrzewającego klienta na stronę, na którą mogą nie chcieć iść (żadna z nich nie jest zależna od jQuery):

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

Chciałbym również zauważyć, że ludzie nie lubią być losowo przekierowywani. Przekierowuj osoby tylko wtedy, gdy są absolutnie potrzebne. Jeśli zaczniesz przekierowywać ludzi losowo, nigdy więcej nie wejdą na Twoją stronę.

Następny akapit jest hipotetyczny:

Możesz również zostać zgłoszony jako złośliwa strona. Jeśli tak się stanie, to gdy użytkownicy klikną link do Twojej witryny, przeglądarka użytkowników może ostrzec ich, że 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 wrażenia z Twojej witryny.

Przeczytaj Wskazówki Google dla webmasterów na temat przekierowań: https://support.google.com/webmasters/answer/2721217?hl=pl&ref_topic=6001971

Oto fajna mała strona, która wykopuje 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 dwa przykłady stron razem, uzyskasz pętlę przekierowań dla niemowląt, która zagwarantuje, że użytkownik nigdy nie będzie chciał ponownie korzystać z Twojej witryny.

Patrick W. McMahon
źródło
5
Odpowiadam na jego prośbę o jQuery, mówiąc, że nie jest potrzebna. JQuery ma wiele przydatnych przydatnych skrótów do JavaScript, ale nie ma potrzeby żadnych skrótów do przekierowań. JQuery to tylko JavaScript. Nic więcej. Normalny sposób wywołania przekierowania będzie działał z jego funkcjami za pomocą jQuery.
Patrick W. McMahon
165
var url = 'asdf.html';
window.location.href = url;
Ben Lee
źródło
145

Możesz to zrobić bez jQuery jako:

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

A jeśli chcesz tylko jQuery, możesz to zrobić w następujący sposób:

$jq(window).attr("location","http://yourdomain.com");
Skorpion
źródło
JQuery jest prawdopodobnie lepszym pomysłem, ponieważ może odciąć przyszłe zmiany / wycofania przeglądarki
Epirocks
@Epirocks Jeśli w jQuery istniał interfejs API, może to być prawidłowy powód (choć wątpliwe, czy ten interfejs API kiedykolwiek by się zmienił), ale w tym przykładzie użyto niewłaściwie funkcji jQuery, w której można zawijać obiekty inne niż DOM i niektóre metody nadal będą działać.
1j01
Fakt, że „niektóre metody nadal będą działać”, właśnie mam na myśli, abstrahując. Tak, możesz to zrobić bez JQuery, ale możesz zrobić wszystko bez JQuery.
Epirocks
144

Działa to z jQuery:

$(window).attr("location", "http://google.fr");
xloadx
źródło
To, że działa, nie oznacza, że ​​powinieneś to zrobić. Jest to bezcelowa pośrednia okolicawindow.location
1j01
89

# Przekierowanie strony HTML za pomocą 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";.

Sakthi Karthik
źródło
„Korzystanie z jQuery” jest niedokładne. Przykład użycia pełnego adresu URL nie zadziała, ponieważ nie jest to pełny adres URL. Nie ma protokołu, więc będzie interpretowany jako względny adres URL.
1j01
80

Musisz wstawić ten wiersz do swojego kodu:

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

Jeśli nie masz jQuery, użyj JavaScript:

window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");
Ashish Ratan
źródło
80

Oryginalne pytanie: „Jak przekierować za pomocą jQuery?”, Stąd odpowiedź implementuje jQuery >> Przypadek użycia bezpłatnego.


Aby po prostu przekierować na stronę z JavaScript:

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. Na stronie możesz znaleźć wszystko, co chcesz, a następnie użyć jQuery, aby dodać efekty specjalne, zareagować na działania użytkownika lub pokazać i ukryć zawartość wewnątrz lub na zewnątrz wybranego elementu. Wszystkie te zadania zaczynają się od umiejętności wyboru elementu lub zdarzenia .

$('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 liniami kodu. Dzięki jQuery możesz połączyć się z tym kodem za pomocą jednej lub dwóch linii.

SergeDirect
źródło
Nagłówek Javascript: czy można zamiast tego zrobić czas w sekundach?
PythonMaster202,
79

Pytanie brzmi: jak zrobić stronę przekierowującą, a nie jak przekierować na stronę internetową?

W tym celu wystarczy użyć JavaScript. Oto mały kod, który utworzy stronę z dynamicznym przekierowaniem.

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

Powiedzmy, że po prostu umieściłeś ten fragment w redirect/index.htmlpliku na swojej stronie, możesz go tak wykorzystać.

http://www.mywebsite.com/redirect?url=http://stackoverflow.com

A jeśli przejdziesz do tego linku, automatycznie przekieruje Cię do stackoverflow.com .

Link do dokumentacji

I tak powstaje prosta strona przekierowująca z JavaScript

Edytować:

Należy również zwrócić uwagę na jedną rzecz. Dodałem window.location.replaceswój kod, ponieważ uważam, że pasuje on do strony przekierowującej, ale musisz wiedzieć, że podczas korzystania z window.location.replaceprzekierowania, gdy naciśniesz przycisk Wstecz w przeglądarce, nie wróci on do strony przekierowującej i będzie wróć do poprzedniej strony, spójrz na to małe demo.

Przykład:

Proces: store home => przekieruj stronę do google => google

Gdy w google: google => przycisk Wstecz w przeglądarce => sklep domu

Jeśli więc odpowiada to Twoim potrzebom, wszystko powinno być w porządku. Jeśli chcesz dołączyć stronę przekierowania do historii przeglądarki, zamień to

if( url ) window.location.replace(url);

z

if( url ) window.location.href = url;
iConnor
źródło
74

W funkcji kliknięcia wystarczy dodać:

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});
Swaprks
źródło
57

jQuery nie jest potrzebny. Możesz to zrobić:

window.open("URL","_self","","")

To takie proste!

Najlepszym sposobem na zainicjowanie żądania HTTP jest użycie document.loacation.href.replace('URL').

MayorMonty
źródło
52

Najpierw napisz poprawnie. Chcesz nawigować w aplikacji w poszukiwaniu innego linku z aplikacji w celu uzyskania innego linku. Oto kod:

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

A jeśli chcesz poruszać się po stronach aplikacji, mam również kod, jeśli chcesz.

Anup
źródło
52

Możesz przekierować w jQuery w następujący sposób:

$(location).attr('href', 'http://yourPage.com/');
Azam Alvi
źródło
45

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

window.location.href="http://google.com";
window.location.replace("page1.html");
Peter Mortensen
źródło
45

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 jest żart.

To „dostarczyło odpowiedź na pytanie” w tym sensie, że poprosiło o rozwiązanie „za pomocą jQuery”, które w tym przypadku pociąga za sobą w jakiś sposób wymuszenie tego równania.

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

Inne odpowiedzi używają jQuery attr()na locationlubwindow niepotrzebnie obiektach .

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

Funkcja jest nazywana, jQueryCodenawet jeśli nie ma w niej nic jQuery, a wywoływanie funkcji somethingCodejest po prostu okropne, szczególnie gdy coś nie jest nawet językiem.

„85 bajtów” odnosi się do Code Golf. Gra w golfa oczywiście nie jest czymś, co powinieneś robić poza golfem kodowanym, a ponadto ta odpowiedź nie jest tak naprawdę golfem.

Zasadniczo kulenie.

1j01
źródło
45

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
lalithkumar
źródło
1
Czy istnieje powód do przechowywania adresu URL w jQuery jako zmiennej, ale nie w Vanilla?
ESR,
43

Za pomocą 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");
Kalpesh Panchal
źródło
41

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

<!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>
Stefan Gruenwald
źródło
5
lepiej zrób to: setTimeout (function () {window.location.href = " google.com "}, opóźnienie);
dikkini
39

Istnieją trzy główne sposoby, aby to zrobić,

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

i...

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

Ostatni jest najlepszy dla tradycyjnego przekierowania, ponieważ nie zapisze strony, na której byłeś przed przekierowaniem w historii wyszukiwania. Jeśli jednak chcesz otworzyć kartę z JavaScriptem, możesz skorzystać z dowolnego z powyższych. 1

EDYCJA: windowPrefiks jest opcjonalny.

Ben
źródło