Перенаправление со страницы HTML

1580

Можно ли настроить базовую страницу HTML для перенаправления на другую страницу при загрузке?

html  redirect  xhtml  meta  html-head 
— chobo
источник
28
Чтобы следовать современным веб-стандартам и обеспечить кросс-браузерную функциональность, я предпочитаю использовать этот продвинутый генератор перенаправления
— Patartics Milán
1
Используйте .htaccess или IIS эквивалент для выполнения перенаправления на стороне сервера. Таким образом, даже если ваша физическая страница исчезнет, ​​перенаправление все равно будет работать.
— flith
1
insider.zone/tools/client-side-url-redirect-generator Это симпатичный маленький инструмент, который обеспечивает совместимость.
— mackycheese21
2
Этот инструмент insider.zone заставил меня перенаправить все строчные буквы, вызвав 404. Плюс нет способа связаться с тем, кто сделал страницу об этом.
— Дэн Якобсон

Ответы:

2152

Попробуйте использовать:

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

Примечание: поместите его в головной части.

Кроме того, для старых браузеров, если вы добавите быструю ссылку, если она не обновляется правильно:

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

Появится как

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

Это все еще позволит вам попасть туда, куда вы собираетесь, с помощью дополнительного клика.

— Valerij
источник
151
Использование метаобновления не рекомендуется Консорциумом World Wide Web (W3C). Ссылка: en.wikipedia.org/wiki/Meta_refresh . Поэтому рекомендуется использовать перенаправление сервера. Перенаправления JavaScript могут работать не на всех мобильных телефонах, поскольку JavaScript может быть отключен.
— NinethSense
61
К вашему сведению, 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
@ Фрикер, потому что они могут не щелкать. Они могут управлять с помощью голоса, прослушивания или навигации каким-то неизвестным способом. Это руководство по доступности, чтобы следовать стандартам для элементов управления, таким как использование стандартного атрибута HTML A для ссылки, и думать об этом, и передавать его как ссылку, а не предписывать, как кто-то должен взаимодействовать с ним. Кроме того, click hereуказывать ссылку не рекомендуется, так как на экране будет сложнее ориентироваться. Ссылки должны быть на тексте, описывающем пункт назначения, чтобы пользователь знал, куда он прибудет, прежде чем следовать за ним, и тем не менее он взаимодействует с ним.
— Билли Мун
2
@BillyMoon, на самом деле значение «щелчка» уже было перегружено, чтобы включить все эти значения. «клик» подойдет.
— Pacerier
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
источник
40

Я также добавил бы каноническую ссылку, чтобы помочь вашим 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, это ссылка для перенаправления или конечная страница назначения?
— Чакотай
— 23
28

Следующий метатег, помещенный между внутри головы, скажет браузеру перенаправить:

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

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

Кроме того, вы можете перенаправить с помощью JavaScript. Поместите это внутри тега script в любом месте страницы:

window.location = "URL"
— Питер Олсон
источник
28

Это сумма всех предыдущих ответов плюс дополнительное решение с использованием HTTP Refresh Header через .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. Мета Обновление

Вы можете использовать метаобновление, когда нежелательны зависимости от 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>

По выбору

В соответствии с рекомендациями Billy Moon вы можете предоставить ссылку для обновления на случай, если что-то пойдет не так:

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

Ресурсы

— RafaSashi
источник
12
Ваш пример "Via jQuery" не использует jQuery.
— Джастин Джонсон
2
Не звоните setTimeoutсо строкой. Передайте функцию вместо.
— Oriol
«HTTP Refresh Header via .htaccess» - почему это актуально в вопросе о перенаправлении со страницы HTML?
— снижение активности
26

Было бы лучше настроить редирект 301 . См. Перенаправления статьи 301 Google Инструменты для веб-мастеров .

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

Если вы хотите следовать современным веб-стандартам, вам следует избегать простого перенаправления мета-HTML. Если вы не можете создать код на стороне сервера, вам следует вместо этого выбрать перенаправление JavaScript .

Для поддержки браузеров с отключенным JavaScript добавьте строку HTML-перенаправления мета в noscriptэлемент. 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 -->
— Патартикс Милан
источник
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element содержит подробную информацию о том, почему <meta http-equiv="refresh"W3C устарела.
— Дакселрод,
Аргументы, которые w3c предоставляет против перенаправлений HTML, также применяются к перенаправлениям Javascript. Кроме того, Javascript перенаправления требуют включения JavaScript, в отличие от перенаправлений HTML. Поэтому перенаправления HTML строго лучше, чем перенаправления Javascript в тех случаях, когда можно использовать оба.
— Макс
17

Вы можете использовать META "redirect":

<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 , если у вас есть возможность.

— Czechnology
источник
5
mod_rewrite (только) применяется к Apache.
— Пол Дрэйпер
1
Относительно Apache: почему mod_rewrite, а не простая директива Redirect без дополнительного модуля?
— 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>
— KKK
источник
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/">
— Sebi
источник
9

Я обнаружил проблему при работе с приложением jQuery Mobile , когда в некоторых случаях мой мета-тег заголовка не достигал перенаправления должным образом (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>
— П. БАНЕРДЖИ
источник
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>
— Zolfaghari
источник
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 страницу. Я предполагаю, что asker не может изменить .htaccess или подобное (например, используя Github Pages или аналогично ограниченный хостинг). PHP не доступен в таких случаях.
— Николас Рауль
Я бы посчитал что-то, сгенерированное PHP (Pre-Hypertext Processor) «базовой HTML-страницей». Нигде в вопросе не упоминается тип файла.
— Эдвард
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
  • делает ссылку необязательной, чтобы избежать нежелательного кэширования
  • позволяет информировать пользователей о старых и новых именах сайтов
  • показывает устанавливаемый обратный отсчет
  • может использоваться для переадресации с глубокими связями, так как сохраняет параметры

Как пользоваться:

Если вы перенесли весь сайт, то на старом сервере остановите исходный сайт и создайте другой с этим файлом в качестве файла 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
источник
Я не знаю, почему мой ответ понизил дважды? это работает должным образом
— AmerllicA
Одно и то же решение, опубликованное вами, уже было опубликовано несколькими пользователями ранее.
— Рахул Шах
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.