Przekieruj ze strony HTML

1577

Czy można skonfigurować podstawową stronę HTML, aby przekierowywać na inną stronę po załadowaniu?

html redirect xhtml meta html-head chobo
źródło

28

Aby postępować zgodnie ze współczesnymi standardami sieciowymi i zapewnić funkcjonalność w różnych przeglądarkach, wolę używać tego zaawansowanego generatora przekierowań

Patartics Milán,

1

Użyj .htaccess lub odpowiednika IIS, aby wykonać przekierowanie po stronie serwera. W ten sposób, nawet jeśli Twoja fizyczna strona zniknie, przekierowanie będzie nadal działać.

od

1

insider.zone/tools/client-side-url-redirect-generator To ładne małe narzędzie, które zapewnia kompatybilność.

mackycheese21

2

To narzędzie insider.zone sprawiło, że moje przekierowania były pisane małymi literami, powodując 404s. Ponadto nie ma możliwości skontaktowania się z osobą, która utworzyła stronę na ten temat.

Dan Jacobson

2150

Spróbuj użyć:

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

Uwaga: Umieść go w sekcji głowy.

Dodatkowo w przypadku starszych przeglądarek, jeśli dodasz szybki link na wypadek, gdyby nie odświeżył się poprawnie:

<p><a href="http://example.com/">Redirect</a></p>

Pojawi się jako

Przeadresować

To pozwoli ci dotrzeć do miejsca, do którego zmierzasz, dodatkowym kliknięciem.

Valerij
źródło

151

Konsorcjum World Wide Web odradza stosowanie meta odświeżania. Ref: en.wikipedia.org/wiki/Meta_refresh . Zalecane jest więc użycie przekierowania serwera. Przekierowania JavaScript mogą nie działać na wszystkich telefonach komórkowych, ponieważ JavaScript może być wyłączony.

NinethSense

61

FYI, 0oznacza odświeżenie po 0 sekundach. Możesz dać użytkownikowi trochę więcej czasu na zorientowanie się, co się dzieje.

Dennis,

5

@Paul Draper, który zależy od serwera, na którym działasz

Gal Margalit,

9

Dodałem zamknięcie tagu, aby zachować zgodność ze specyfikacjami XHTML5.

ZenLulz

98

Komentarz @ NinethSense sprawia, że odświeżanie meta wygląda jak przekierowanie JavaScript. Odświeżanie meta nie jest JS i nadal będzie działać, gdy JS jest wyłączone.

Druska

1104

Użyłbym zarówno kodu meta , jak i JavaScript i na wszelki wypadek miałbym link.

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="0; url=http://example.com">
        <script type="text/javascript">
            window.location.href = "http://example.com"
        </script>
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
    </body>
</html>

Dla kompletności, myślę, że najlepszym sposobem, jeśli to możliwe, jest użycie przekierowań serwera, więc wyślij kod stanu 301 . Można to łatwo zrobić za .htaccesspomocą plików za pomocą Apache lub licznych wtyczek za pomocą WordPress . Jestem pewien, że istnieją również wtyczki do wszystkich głównych systemów zarządzania treścią. Ponadto cPanel ma bardzo łatwą konfigurację dla przekierowań 301, jeśli są one zainstalowane na serwerze.

Billy Moon
źródło

12

Ta strona przekierowania może być o wiele bardziej zwięzła z HTML5: pastebin.com/2qmfUZMk (który działa we wszystkich przeglądarkach i przechodzi walidację w3c)

enyo

9

@enyo Nie jestem wielkim fanem upuszczania bodytagów i tym podobnych. Być może sprawdza poprawność i być może działa w popularnych przeglądarkach. Jestem pewien, że istnieją pewne poboczne przypadki, które powodują problemy, a korzyść wydaje się niewielka.

Billy Moon,

9

@Fricker, ponieważ mogą nie klikać. Mogą kontrolować za pomocą głosu, stukania lub nawigacji w nieznany sposób. Jest to wskazówka dotycząca dostępności, aby przestrzegać standardów kontroli, takich jak używanie standardowego atrybutu HTML A dla linku, myśleć o nim i przekazywać go jako link, a nie określać, w jaki sposób ktoś musi z nim współdziałać. click hereNie zaleca się również posiadania linku, ponieważ nawigacja po czytniku ekranu będzie trudniejsza. Linki powinny zawierać tekst opisujący miejsce docelowe, aby użytkownik wiedział, dokąd przyjedzie, zanim podąży za nim, i jednak będzie z nim współdziałał.

Billy Moon

2

@BillyMoon, W rzeczywistości znaczenie „kliknięcia” zostało już przeciążone, aby uwzględnić również wszystkie te znaczenia. „kliknięcie” wystarczy.

Pacerier

2

@BillyMoon, w jakich sporadycznych okolicznościach przeglądarka ignoruje 0 wartości metaodświeżania? Dzięki!

Gal Margalit,

125

JavaScript

<script type="text/javascript">
    window.location.href = "http://example.com";
</script>

Metatag

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

amit_g
źródło

39

Chciałbym także dodać link kanoniczny, aby pomóc w pozycjonowaniu ludzi:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>

lrkwz
źródło

3

Używałbyś linku kanonicznego oprócz przekierowania? en.wikipedia.org/wiki/Canonical_link_element mówi, że Google woli używać przekierowania zamiast łącza kanonicznego.

LarsH,

1

@larsH Więc co najważniejsze dla SEO, to link przekierowujący lub strona docelowa?

Chakotay

@Chakotay Zobacz: Kiedy należy wybrać przekierowanie Canonical vs. 301?

Marc.2377,

28

Następujący metatag, umieszczony między głową, każe przeglądarce przekierować:

<meta http-equiv="Refresh" content="seconds; url=URL">

Zastąp sekundy liczbą sekund oczekiwania na przekierowanie i zastąp adres URL adresem URL, na który chcesz przekierować.

Alternatywnie możesz przekierować za pomocą JavaScript. Umieść to wewnątrz tagu skryptu w dowolnym miejscu na stronie:

window.location = "URL"

Peter Olson
źródło

28

Jest to podsumowanie wszystkich poprzednich odpowiedzi oraz dodatkowe rozwiązanie wykorzystujące nagłówek HTTP Refresh Header .htaccess

1. Nagłówek odświeżania HTTP

Przede wszystkim możesz użyć .htaccess, aby ustawić taki nagłówek odświeżania

Header set Refresh "3"

Jest to „statyczny” odpowiednik używania header()funkcji w PHP

header("refresh: 3;");

Pamiętaj, że to rozwiązanie nie jest obsługiwane przez każdą przeglądarkę.

2. JavaScript

Z alternatywnym adresem URL :

<script>
    setTimeout(function(){location.href="http://example.com/alternate_url.html"} , 3000);
</script>

Bez alternatywnego adresu URL:

<script>
    setTimeout("location.reload(true);",timeoutPeriod);
</script>

Przez jQuery:

<script>
    window.location.reload(true);
</script>

3. Meta Refresh

Możesz użyć metaodświeżania, gdy zależności od JavaScript i nagłówków przekierowań są niepożądane

Z alternatywnym adresem URL:

<meta http-equiv="Refresh" content="3; url=http://example.com/alternate_url.html">

Bez alternatywnego adresu URL:

<meta http-equiv="Refresh" content="3">

Używanie <noscript>:

<noscript>
    <meta http-equiv="refresh" content="3" />
</noscript>

Opcjonalnie

Zgodnie z zaleceniami Billy Moon możesz podać link odświeżający na wypadek, gdyby coś poszło nie tak:

Jeśli nie zostaniesz przekierowany automatycznie: <a href='http://example.com/alternat_url.html'>Click here</a>

Zasoby

RafaSashi
źródło

12

Twój przykład „Via jQuery” nie używa żadnego jQuery.

Justin Johnson,

2

Nie dzwoń setTimeoutza pomocą łańcucha. Zamiast tego podaj funkcję.

Oriol

„Odśwież nagłówek HTTP przez .htaccess” - dlaczego pytanie dotyczy przekierowania ze strony HTML?

ograniczenie aktywności

26

Lepiej byłoby skonfigurować przekierowanie 301 . Zobacz artykuł 301 narzędzi Google dla webmasterów .

Alex K.
źródło

13

Pytanie dotyczy w szczególności podstawowej strony .html. Zgaduję, że pytający nie może modyfikować pliku .htaccess lub podobnego (na przykład używając Github Pages lub podobnie ograniczonego hostingu). 301 nie jest wykonalne w takich przypadkach

Nicolas Raoul,

26

Jeśli oczekujesz przestrzegania nowoczesnych standardów internetowych, powinieneś unikać prostych przekierowań meta HTML. Jeśli nie możesz utworzyć kodu po stronie serwera, wybierz zamiast tego przekierowanie JavaScript .

Aby obsługiwać przeglądarki z wyłączoną obsługą JavaScript, dodaj do noscriptelementu linię meta przekierowania HTML . noscriptZagnieżdżona meta przekierowanie połączeniu z canonicaltagiem pomoże pozycję w wyszukiwarkach, jak również.

Jeśli chcesz uniknąć pętli przekierowań, powinieneś użyć location.replace()funkcji JavaScript.

Prawidłowy kod przekierowania adresu URL po stronie klienta wygląda następująco (z Internet Explorerem 8 i nowszą poprawką i bez opóźnień):

<!-- Pleace 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://stackoverflow.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0; URL=https://stackoverflow.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://stackoverflow.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

2

w3.org/TR/WCAG10-HTML-TECHS/#meta-element zawiera szczegółowe informacje o tym, dlaczego <meta http-equiv="refresh"W3C jest przestarzałe.

daxelrod

Argumenty dostarczane przez w3c przeciwko przekierowaniom HTML dotyczą również przekierowań Javascript. Ponadto przekierowania Javascript wymagają włączonej obsługi JavaScript, w przeciwieństwie do przekierowań HTML. Dlatego przekierowania HTML są zdecydowanie lepsze niż przekierowania JavaScript w przypadkach, w których można używać obu.

Maks

17

Możesz użyć „przekierowania” META :

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

lub przekierowanie JavaScript (pamiętaj, że nie wszyscy użytkownicy mają włączoną obsługę JavaScript, dlatego zawsze przygotuj dla nich rozwiązanie do tworzenia kopii zapasowych)

<script language="javascript">
  window.location = "http://new.example.com/address";
</script>

Ale wolę polecić użycie mod_rewrite , jeśli masz taką opcję.

Czechnologia
źródło

5

mod_rewrite (tylko) dotyczy Apache.

Paul Draper,

1

Odnośnie Apache: dlaczego mod_rewrite, a nie prosta dyrektywa przekierowująca bez dodatkowego modułu?

vog

14

Zaraz po załadowaniu strony initfunkcja jest uruchamiana, a strona zostaje przekierowana:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script>
            function init()
            {
               window.location.href = "www.wherever.com";
            }
        </script>
    </head>

    <body onload="init()">
    </body>
</html>

kkk
źródło

10

Umieść następujący kod między znacznikami <HEAD> i </HEAD> kodu HTML:

<meta HTTP-EQUIV="REFRESH" content="0; url=http://example.com/index.html">

Powyższy kod przekierowania HTML natychmiast przekieruje użytkowników na inną stronę internetową. content="0;Może zostać zmieniona na liczbę sekund, które chcesz przeglądarka czekać przed przekierowaniem.

Muhammad Saqib
źródło

9

Umieść następujący kod w <head>sekcji:

<meta http-equiv="refresh" content="0; url=http://address/">

Sebi
źródło

9

Znalazłem problem podczas pracy z aplikacją jQuery Mobile , w której w niektórych przypadkach mój tag nagłówka Meta nie osiągał poprawnie przekierowania (jQuery Mobile nie odczytuje automatycznie nagłówków dla każdej strony, więc wstawienie JavaScript jest również nieskuteczne, chyba że zostanie zawinięte w złożoność). Znalazłem najłatwiejsze rozwiązanie w tym przypadku, aby umieścić przekierowanie JavaScript bezpośrednio w treści dokumentu, w następujący sposób:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="0;url=myURL" />
    </head>

    <body>
        <p>You are not logged in!</p>
        <script language="javascript">
            window.location = "myURL";
        </script>
    </body>
</html>

Wydaje mi się, że to działa w każdym przypadku.

Szkot
źródło

8

Prostym sposobem, który działa na wszystkich typach stron, jest dodanie metatagu w nagłówku:

<html>
    <head>
        ...
        <meta HTTP-EQUIV="REFRESH" content="seconds; url=your.full.url/path/filename">
        ...
    </head>
    <body>
        Don't put much content, just some text and an anchor.
        Actually, you will be redirected in N seconds (as specified in content attribute).
        That's all.
        ...
    </body>
</html>

P. BANERJEE
źródło

7

Powinieneś użyć JavaScript. Umieść następujący kod w tagach głowy:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>

kriscross07
źródło

7

Możesz automatycznie przekierowywać według kodu stanu HTTP 301 lub 302.

Dla PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>

Vô Vị
źródło

6

To nie jest przekierowanie ze strony HTML.

bugmenot123

7

Używam skryptu, który przekierowuje użytkownika z index.html do względnego adresu URL strony logowania

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="/Pages/Login.aspx" id="lnkhome">Go to Login Page<a>
  </body>
</html>

Zolfaghari
źródło

1

Adres przekierowania w powyższej metodzie może być względny. np .: chcesz przekierować na stronę logowania lub dowolną stronę względną przez index.html w katalogu głównym witryny. nie musisz znać swojej nazwy domeny. ale po ustawieniu window.location.href = "xxx"; musisz znać nazwę domeny.

Zolfaghari,

6

Na wszelki wypadek:

<?php
header("Location: [email protected]", TRUE, 303);
exit;
?>

Upewnij się, że nad skryptem nie ma echa, w przeciwnym razie zostanie zignorowany. http://php.net/manual/en/function.header.php

Edward
źródło

9

Pytanie dotyczy w szczególności podstawowej strony .html. Zgaduję, że pytający nie może modyfikować pliku .htaccess lub podobnego (na przykład używając Github Pages lub podobnie ograniczonego hostingu). PHP nie jest dostępne w takich przypadkach.

Nicolas Raoul,

Uważam, że coś wygenerowanego przez PHP (Pre-Hypertext Processor) to „podstawowa strona HTML”. Nigdzie w pytaniu nie wspomniano o typie pliku.

Edward

6

Wystarczy użyć zdarzenia onload tagu body:

<body onload="window.location = 'http://example.com/'">

pat capozzi
źródło

5

Silnik Razor na 5 sekund opóźnienia:

<meta http-equiv="Refresh"
         content="5; [email protected]("Search", "Home", new { id = @Model.UniqueKey }))">

JoshYates1980
źródło

To nie jest przekierowanie ze strony HTML.

zmniejszenie aktywności

5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Redirect to a page</title>
    </head>
    <body onload="window.location.assign('http://example.com')">

    </body>
</html>

PoM
źródło

4

Nie potrzebujesz do tego żadnego kodu JavaScript. Napisz to w <head>sekcji strony HTML:

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

Gdy strona ładuje się po 0 sekundach, możesz przejść do swojej strony.

Yash Jain
źródło

1

jest to już uwzględnione w zaakceptowanej odpowiedzi i najważniejszych komentarzach - rozważ edycję odpowiedzi niż opublikowanie duplikatu

RozzA

3

O ile je rozumiem, wszystkie metody, które widziałem do tej pory, wydają się dodawać starą lokalizację do historii. Aby przekierować stronę, ale nie mam starej lokalizacji w historii, używam replacemetody:

<script>
    window.location.replace("http://example.com");
</script>

Paul Ogilvie
źródło

2

Jest to rozwiązanie przekierowujące ze wszystkim, czego chciałem, ale nie mogłem znaleźć w ładnym, czystym fragmencie do wycinania i wklejania.

Ten fragment kodu ma wiele zalet:

pozwala złapać i zachować wszelkie pytania, które ludzie mają w swoim adresie URL
sprawia, że link staje się niepotrzebny, aby uniknąć niechcianego buforowania
pozwala informować użytkowników o starych i nowych nazwach witryn
pokazuje nastawialne odliczanie
może być użyty do przekierowań precyzyjnych, ponieważ zachowuje parametry

Jak używać:

Jeśli przeprowadziłeś migrację całej witryny, na starym serwerze zatrzymaj oryginalną witrynę i utwórz inną z tym plikiem jako domyślnym plikiem index.html w folderze głównym. Edytuj ustawienia witryny, aby każdy błąd 404 został przekierowany na tę stronę index.html. Dzięki temu każdy, kto uzyskuje dostęp do starej witryny, ma link do strony podrzędnej itp.

Teraz przejdź do znacznika skryptu otwierającego i edytuj adresy strony oldsite i newSite oraz zmień wartość sekund w razie potrzeby.

Zapisz i uruchom swoją stronę internetową. Zadanie wykonane - czas na kawę.

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<style>
body { margin: 200px; font: 12pt helvetica; }
</style>

</head>
<body>

</body>
<script type="text/javascript">

// Edit these to suit your needs.
var oldsite = 'http://theoldsitename.com'
var newSite = "https://thenewsitename.com";
var seconds = 20;  // countdown delay.

var path = location.pathname;
var srch = location.search;
var uniq = Math.floor((Math.random() * 10000) + 1);
var newPath = newSite + path + (srch === '' ? "?" + uniq : srch + "&" + uniq); 


document.write ('<p>As part of hosting improvements, the system has been migrated from ' + oldsite + ' to</p>');
document.write ('<p><a href="' + newPath + '">' + newSite + '</a></p>');
document.write ('<p>Please take note of the new website address.</p>');
document.write ('<p>If you are not automatically redirected please click the link above to proceed.</p>');
document.write ('<p id="dvCountDown">You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.</p>');

function DelayRedirect() {
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            window.location = newPath;
        }
    }, 1000);
}
DelayRedirect()

</script>
</html>

Rozwiń fragment kodu

Pokonany Wombat
źródło

1

Przekieruj za pomocą JavaScript, <noscript>jeśli JS jest wyłączony.

<script>
    window.location.replace("https://google.com");
</script>

<noscript>
    <a href="https://google.com">Click here if you are not redirected automatically.</a>
</noscript>

Aryan Beezadhur
źródło

0

Użyj tego kodu:

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

Proszę zwrócić uwagę: umieść to w nagłówku.

AmerllicA
źródło

Nie wiem, dlaczego moja odpowiedź głosowała dwukrotnie? działa poprawnie

AmerllicA

To samo rozwiązanie opublikowane przez Ciebie jest już opublikowane przez wielu użytkowników wcześniej.

Rahul Shah

0

Możesz to zrobić w javascript:

location = "url";

GameMaster1928
źródło

0

Możesz tego użyć

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

Rozwiń fragment kodu

mgcarpizo
źródło

Przekieruj ze strony HTML

Odpowiedzi:

JavaScript

Metatag