Перенаправлення зі сторінки HTML

1577

Чи можна налаштувати основну сторінку HTML для переадресації на іншу сторінку при завантаженні?

html  redirect  xhtml  meta  html-head 
— чобо
джерело
28
Щоб дотримуватися сучасних веб-стандартів та забезпечувати функціонування крос-браузера, я вважаю за краще використовувати цей просунутий генератор перенаправлення
— Patartics Milán
1
Використовуйте .htaccess або еквівалент IIS, щоб зробити переадресацію на стороні сервера. Таким чином, навіть якщо ваша фізична сторінка зникне, переадресація все одно працюватиме.
— фліт
1
insider.zone/tools/client-side-url-redirect-generator - це приємний маленький інструмент, який забезпечує сумісність.
— mackycheese21
2
Цей інструмент insider.zone змусив мене переспрямовувати всі малі регістри, спричиняючи 404. Плюс до цього немає жодного способу зв’язатись із тим, хто на ньому зробив сторінку.
— Ден Якобсон

Відповіді:

2150

Спробуйте використовувати:

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

Примітка: Помістіть його в розділі голови.

Крім того, для старих веб-переглядачів, якщо ви додасте швидке посилання, якщо воно не оновиться належним чином:

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

З'явиться як

Перенаправлення

Це все одно дозволить вам дістатися до місця, куди ви збираєтесь, додатковим клацанням.

— Валерій
джерело
151
Використання метаоновлення не рекомендує Всесвітньому консорціуму (W3C). Посилання: en.wikipedia.org/wiki/Meta_refresh . Тож рекомендується замість цього використовувати переадресацію сервера. Переспрямування JavaScript може працювати не на всіх мобільних телефонах, оскільки JavaScript може бути відключений.
— NinethSense
61
FYI - 0засіб оновити через 0 секунд. Можливо, ви захочете приділити користувачеві трохи часу, щоб дізнатися, що відбувається.
— Денніс
5
@Paul Draper, це залежить від сервера, на якому ти працюєш
— Gal Margalit
9
Я додав закриття тегу, щоб відповідати специфікаціям XHTML5.
— ZenLulz
98
@ Коментар NinethSense робить мета-оновлення схожим на переспрямування JavaScript. Мета-оновлення не є JS і працюватиме, коли JS вимкнено.
— Друська
1104

Я б використовував як мета , так і JavaScript-код і мав би посилання на всякий випадок.

<!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>

Для повноти, я думаю, що найкращий спосіб, якщо це можливо, це використовувати переадресації сервера, тому надсилайте код статусу 301 . Це легко зробити через .htaccessфайли за допомогою Apache або через численні плагіни за допомогою WordPress . Я впевнений, що також існують плагіни для всіх основних систем управління вмістом. Крім того, cPanel має дуже просту конфігурацію для переадресації 301, якщо вона встановлена ​​на вашому сервері.

— Біллі Мун
джерело
12
Ця сторінка переспрямування може бути набагато більш короткою з HTML5: pastebin.com/2qmfUZMk (яка працює у всіх браузерах і проходить перевірку w3c)
— enyo
9
@enyo Я не є великим прихильником скидання bodyтегів тощо. Можливо, це підтверджує, а можливо, працює у звичайних браузерах. Я впевнений, що є певні випадки, які викликають проблеми, і користь здається невеликою.
— Біллі Мун
9
@Fricker, оскільки вони можуть не натискати. Вони можуть керувати голосом, натисканням або навігацією якимись невідомими способами. Це настанова щодо доступності дотримуватися стандартів контролю, як, наприклад, використовувати стандартний атрибут HTML A для посилання та думати про нього та передавати його як посилання, а не прописувати, як хтось повинен з ним взаємодіяти. Також click hereне рекомендується мати зв'язок, оскільки читачем екрану буде важче орієнтуватися. Посилання повинні містити текст, що описує місце призначення, щоб користувач знав, куди вони прибудуть, перш ніж слідувати за ним, і тим не менш, він взаємодіє з ним.
— Біллі Мун
2
@BillyMoon, насправді значення "клацання" вже перевантажено, щоб включити і всі ці значення. "натиснути" буде добре.
— Печер'є
2
@BillyMoon, при яких випадкових обставинах браузер ігнорує мета-оновлення значення 0? Дякую!
— Гал Маргаліт
125

JavaScript

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

Метатег

<meta http-equiv="refresh" content="0;url=http://example.com">
— amit_g
джерело
39

Я також додам канонічне посилання, щоб допомогти вашим SEO людям:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
— lrkwz
джерело
3
Ви б використовували канонічне посилання на додаток до перенаправлення? en.wikipedia.org/wiki/Canonical_link_element говорить, що Google вважає за краще використовувати перенаправлення замість канонічного посилання.
— LarsH
1
@larsH Отже, що найважливіше для SEO, це посилання на переспрямування або кінцева сторінка призначення?
— Чакотай
— Марк.2377,
28

Наступний метатег, розміщений між головою, скаже браузеру переспрямувати:

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

Замініть секунди на кількість секунд, щоб зачекати, перш ніж воно буде переспрямовано, і замініть URL на URL-адресу, на який потрібно переспрямувати.

Крім того, ви можете перенаправляти за допомогою JavaScript. Розмістіть це всередині тегу сценарію в будь-якому місці сторінки:

window.location = "URL"
— Пітер Олсон
джерело
28

Це підсумок всіх попередніх відповідей плюс додаткове рішення за допомогою заголовка оновлення HTTP через .htaccess

1. Заголовок оновлення HTTP

Перш за все, ви можете використовувати .htaccess, щоб встановити подібний заголовок оновлення

Header set Refresh "3"

Це "статичний" еквівалент використання header()функції в PHP

header("refresh: 3;");

Зауважте, що це рішення підтримується не в усіх браузерах.

2. JavaScript

З альтернативною URL-адресою :

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

Без альтернативної URL-адреси:

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

Через jQuery:

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

3. Meta Refresh

Ви можете використовувати мета-оновлення, коли залежності від JavaScript та заголовків переспрямування небажані

З альтернативною URL-адресою:

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

Без альтернативної URL-адреси:

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

Використання <noscript>:

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

За бажанням

Як рекомендує Біллі Мун, ви можете надати посилання для оновлення, якщо щось піде не так:

Якщо вас не переспрямовано автоматично: <a href='http://example.com/alternat_url.html'>Click here</a>

Ресурси

— Рафасаші
джерело
12
Ваш приклад "Через jQuery" не використовує жодного jQuery.
— Джастін Джонсон
2
Не дзвоніть setTimeoutза допомогою рядка. Передайте замість функції.
— Оріол
"Заголовок оновлення HTTP через .htaccess" - чому доречно запитати про переадресацію зі сторінки HTML?
— зниження активності
26

Було б краще встановити переадресацію 301 . Див . Переспрямування статті 301 щодо Інструментів для веб-майстрів Google .

— Алекс К
джерело
13
Питання спеціально задає основну сторінку .html. Я думаю, що запитувач не може змінити .htaccess або подібне (наприклад, використовуючи Github Pages або аналогічно обмежений хостинг). 301 у таких випадках неможливо
— Ніколас Раул
26

Якщо ви з нетерпінням чекаєте дотримання сучасних веб-стандартів, вам слід уникати звичайних мета-переадресацій HTML. Якщо ви не можете створити код на стороні сервера, вам слід вибрати переадресацію JavaScript .

Для підтримки браузерів з обмеженим JavaScript ви можете додати noscriptелемент елемента мета-переспрямування HTML . noscriptВкладена мета редирект в поєднанні з canonicalтегом допоможе ваш рейтинг в пошукових системах , а також.

Якщо ви хочете уникнути циклів переадресації, вам слід скористатися location.replace() функцією JavaScript.

Правильний код переадресації URL - адреси на стороні клієнта виглядає приблизно так (із Internet Explorer 8 та нижчим виправленням та без зволікань):

<!-- 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
джерело
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element містить відомості про те, чому <meta http-equiv="refresh"W3C застарілий.
— daxelrod
Аргументи, які надає w3c щодо перенаправлень HTML, також застосовуються до переадресацій Javascript. Крім того, переадресація Javascript вимагає включення javascript на відміну від переспрямувань HTML. Тому перенаправлення HTML суворо краще, ніж переадресації Javascript у випадках, коли можна використовувати і те, і інше.
— Макс
17

Ви можете використовувати "переадресацію" META :

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

або переспрямування JavaScript (зауважте, що не у всіх користувачів увімкнено JavaScript, тому завжди готуйте рішення для резервного копіювання)

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

Але я скоріше рекомендую використовувати mod_rewrite , якщо є можливість.

— Чехія
джерело
5
mod_rewrite (лише) застосовується до Apache.
— Пол Дрейпер
1
Щодо Apache: Чому mod_rewrite, а не проста директива перенаправлення без додаткового модуля?
— vog
14

Як тільки сторінка завантажується, initфункція запускається, а сторінку перенаправляється:

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

    <body onload="init()">
    </body>
</html>
— ккк
джерело
10

Розмістіть такий код між тегами <HEAD> та </HEAD> вашого HTML-коду:

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

Вищенаведений код переадресації HTML моментально перенаправить відвідувачів на іншу веб-сторінку. Ви content="0;можете змінити кількість секунд, яку ви хочете, щоб браузер зачекав, перш ніж переспрямувати.

— Мухаммед Сакіб
джерело
9

Помістіть у розділі такий код <head>:

<meta http-equiv="refresh" content="0; url=http://address/">
— Себі
джерело
9

Я виявив проблему під час роботи з додатком jQuery Mobile , де в деяких випадках мій тег заголовка Meta не вдасться досягти перенаправлення належним чином (jQuery Mobile не читає заголовки автоматично для кожної сторінки, тому розміщення JavaScript також є неефективним, якщо не завершити його складність). Я знайшов найпростішим рішенням у цьому випадку було введення переадресації JavaScript безпосередньо в тіло документа, наступним чином:

<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>

Здається, це працює в кожному випадку для мене.

— Шотландець
джерело
8

Найпростіший спосіб роботи для всіх типів сторінок - це просто додати metaтег у голову:

<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
джерело
7

Ви повинні використовувати JavaScript. Помістіть у головному тезі наступний код:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
— kriscross07
джерело
7

Ви можете автоматично перенаправляти за кодом статусу HTTP 301 або 302.

Для PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
— Vô Vị
джерело
6
Це не перенаправлення зі сторінки HTML.
— bugmenot123
7

Я використовую сценарій, який перенаправляє користувача з index.html до відносного URL-адреси сторінки входу

<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>
— Золфагарі
джерело
1
URL-адреса переадресації у наведеному вище способі може бути відносною. наприклад: ви хочете перенаправити на сторінку входу або будь-яку відносну сторінку за index.html в корені веб-сайту. не потрібно знати ваше доменне ім’я. але коли ви встановите window.location.href = "xxx"; ви повинні знати доменне ім’я.
— Золфагарі
6

Тільки на добру міру:

<?php
header("Location: example@example.com", TRUE, 303);
exit;
?>

Переконайтеся, що над сценарієм немає відлуння, інакше воно буде проігноровано. http://php.net/manual/en/function.header.php

— Едвард
джерело
9
Питання спеціально задає основну сторінку .html. Я думаю, що запитувач не може змінити .htaccess або подібне (наприклад, використовуючи Github Pages або аналогічно обмежений хостинг). PHP недоступний у таких випадках.
— Nicolas Raoul
Я б вважав, що щось, що генерується PHP (процесором перед гіпертекстом), "базовою сторінкою HTML". Ніде в питанні не згадується тип файлу.
— Едвард
6

Просто використовуйте подію завантаження тегу body:

<body onload="window.location = 'http://example.com/'">
— пат капозі
джерело
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
джерело
4

Для цього вам не потрібен код JavaScript. Напишіть це у <head>розділі сторінки HTML:

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

Як тільки сторінка завантажується за 0 секунд, ви можете перейти на свою сторінку.

— Яш Джайн
джерело
1
це вже висвітлено у прийнятій відповіді та головних коментарях - розгляньте можливість редагування відповіді, ніж публікацію дубліката
— RozzA
3

Наскільки я їх розумію, всі методи, які я бачив до цього часу для цього питання, схоже, додають старого місця в історію. Щоб перенаправити сторінку, але не має старого місця в історії, я використовую replaceметод:

<script>
    window.location.replace("http://example.com");
</script>
— Пол Огільві
джерело
2

Це рішення для переадресації з усім, що я хотів, але не міг знайти у приємному чистому фрагменті вирізати та вставити.

Цей фрагмент має ряд переваг:

  • дає змогу ловити та зберігати будь-які параметри запитів для людей, що мають їх URL
  • робить посилання unqiue, щоб уникнути небажаного кешування
  • дозволяє інформувати користувачів про старі та нові назви сайтів
  • показує встановлений відлік часу
  • може використовуватися для переадресації з прямим зв'язком, як параметри збереження

Як користуватись:

Якщо ви перенесли цілий сайт, то на старому сервері зупиніть оригінальний сайт та створіть інший із цим файлом як файл за замовчуванням index.html у кореневій папці. Відредагуйте налаштування сайту, щоб будь-яка помилка 404 була переспрямована на цю сторінку index.html. Це залучає всіх, хто має доступ до старого сайту за допомогою посилання на сторінку підрівню тощо.

Тепер перейдіть до тегу сценарію відкриття та відредагуйте веб-адреси oldsite та newSite та змініть значення секунд за потребою.

Збережіть і запустіть свій веб-сайт. Робота виконана - час на каву.

<!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>
Розгорніть фрагмент

— Переможений вомбат
джерело
1

Перенаправлення за допомогою JavaScript, <noscript>якщо JS відключений.

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

<noscript>
    <a href="https://google.com">Click here if you are not redirected automatically.</a>
</noscript>
— Арійський Безаджур
джерело
0

Використовуйте цей код:

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

Зверніть увагу: помістіть його в тег заголовка.

— АмериканськийА
джерело
Я не знаю, чому мою відповідь оскаржую двічі? працює правильно
— AmerllicA
Те саме рішення, яке ви опублікували, вже розміщено кількома користувачами раніше.
— Рахул Шах
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.