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

1213

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

  • 24
    Чтобы следовать современным веб-стандартам и обеспечивать кросс-браузерную функциональность, я предпочитаю использовать этот продвинутый генератор перенаправления
  • 0
    Используйте .htaccess или IIS эквивалент для выполнения перенаправления на стороне сервера. Таким образом, даже если ваша физическая страница исчезнет, перенаправление все равно будет работать.
Показать ещё 2 комментария
Теги:
meta
xhtml
html-head

23 ответа

1858
Лучший ответ

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

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

Примечание. Поместите его в раздел головы.

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

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

Появится как

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

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

Поделиться
  • 149
    Использование метаобновления не рекомендуется Консорциумом World Wide Web (W3C). Ссылка: en.wikipedia.org/wiki/Meta_refresh . Поэтому рекомендуется вместо этого использовать перенаправление сервера. Перенаправления JavaScript могут работать не на всех мобильных телефонах, поскольку JavaScript может быть отключен.
  • 0
    проверить ответ на Alex K, также РНР header и nodejs' response.writeHead
Показать ещё 16 комментариев
874

Я бы использовал как мета, так и код JavaScript и имел бы ссылку на всякий случай. Кроме того, я думаю, что это хорошая идея установить частоту обновления до 1 для случайных ситуаций, когда браузер игнорирует обновление метаданных 0.

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="1; 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 переадресации, если у вас это установлено на вашем сервере.

Поделиться
  • 8
    Эта страница перенаправления может быть намного более краткой с HTML5: pastebin.com/2qmfUZMk (которая работает во всех браузерах и проходит проверку w3c)
  • 6
    @enyo Я не большой поклонник бросать теги body и тому подобное. Возможно, это подтверждает, и, возможно, работает в обычных браузерах. Я уверен, что есть некоторые дополнительные случаи, это вызывает проблемы, и выгода кажется небольшой.
Показать ещё 14 комментариев
100

JavaScript

<script language="javascript">
    window.location.href = "http://example.com"
</script>

Метатег

<meta http-equiv="refresh" content="0;url=http://example.com">
Поделиться
35

Я бы добавил каноническую ссылку, чтобы помочь вам SEO:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
Поделиться
  • 3
    Вы бы использовали каноническую ссылку в дополнение к перенаправлению? en.wikipedia.org/wiki/Canonical_link_element говорит, что Google предпочитает использовать перенаправление вместо канонической ссылки.
  • 1
    @larsH Итак, что самое важное для SEO, это ссылка для перенаправления или конечная страница назначения?
26

Это сумма всех предыдущих ответов плюс дополнительное решение с использованием HTTP Refresh Header через .htaccess

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

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

Header set Refresh "3"

Это "статический" эквивалент использования функции header() в PHP

header("refresh: 3;");

Обратите внимание, что это решение не поддерживается каждым браузером.

2. JavaScript/JQuery

С альтернативным 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​​strong >

Вы можете использовать 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>

Ресурсы

Поделиться
  • 11
    Ваш пример "Via jQuery" не использует jQuery.
  • 2
    Не вызывайте setTimeout со строкой. Передайте функцию вместо.
Показать ещё 1 комментарий
25

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

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

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

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

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

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

window.location = "URL"
Поделиться
17

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

Чтобы поддерживать отключенные браузеры JS, добавьте строку перенаправления a HTML meta в элемент noscript. Вложенная мета-редирекция noscript в сочетании с тегом canonical также поможет вашему ранжированию в поисковых системах.

Я бы хотел избежать циклов перенаправления, вы должны использовать функцию location.replace() JavaScript.

Правильный клиентский URL redirect код выглядит следующим образом (с IE 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 -->
Поделиться
16

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

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

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

    <body onload="init()">
    </body>
</html>
Поделиться
8

Вы можете автоматически перенаправлять по HTTP-статусу 301 или 302.

Для PHP:

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

Подробнее о другом исходном коде в Как автоматически перенаправить по HTTP-статусу 301 или 302

Поделиться
  • 5
    Это не редирект со страницы HTML.
8

Поместите следующий код между тегами и тегами вашего HTML-кода.

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

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

Поделиться
8

Поместите следующий код в раздел <head>:

<meta http-equiv="refresh" content="0; url=http://address/">
Поделиться
7

Я обнаружил проблему при работе с приложением 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>

Кажется, это работает в каждом случае для меня.

Поделиться
6

Просто для хорошей меры:

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

Убедитесь, что нет эха над script, иначе он будет проигнорирован. http://php.net/manual/en/function.header.php

Поделиться
  • 9
    Вопрос, в частности, требует базовой страницы .html. Я предполагаю, что asker не может изменить .htaccess или аналогичный (например, используя Github Pages или аналогично ограниченный хостинг). PHP не доступен в таких случаях.
  • 0
    Я бы посчитал что-то, сгенерированное PHP (Pre-Hypertext Processor) «базовой HTML-страницей». Нигде в вопросе не упоминается тип файла.
5

Я использую script, который перенаправляет пользователя из index.html в home.html

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="Home.html" id="lnkhome">Go to Home Page<a>
  </body>
</html>
Поделиться
  • 0
    URL перенаправления в вышеуказанном методе может быть относительным. Например: вы хотите перенаправить на страницу входа или любую относительную страницу с помощью index.html в корне сайта. не нужно знать ваше доменное имя. но когда вы устанавливаете window.location.href = "xxx"; Вы должны знать доменное имя.
5

Простым способом, который работает для всех типов страниц, является просто добавить тег 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 all.
        ...
    </body>
</html>
Поделиться
5

Вы должны использовать JavaScript. Поместите следующий код в свои заголовки:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
Поделиться
  • 0
    Или, может быть ... location='http://example.com'
4

Razor engine для задержки 5 секунд:

<meta http-equiv="Refresh"
         content="5; [email protected]("Search", "Home", new { id = @Model.UniqueKey }))">
Поделиться
  • 0
    Это не перенаправление со страницы HTML.
3 
<!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>
Поделиться
3

Просто используйте событие onload тега body.

<body onload="window.location = 'http://example.com/'">
Поделиться
3

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

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

Как только страница загружается через 0 секунд, вы можете перейти на свою страницу.

Поделиться
  • 0
    это уже отражено в принятом ответе и главных комментариях - рассмотрите возможность редактирования ответа, а не публикации дубликата.
1

Переадресация 301 - это постоянная переадресация с одного URL на другой. 301 перенаправляет посетителей сайта и поисковые системы на другой URL-адрес, чем тот, который они изначально ввели в свой браузер или выбрали на странице результатов поиска. Эти перенаправления также связывают различные URL-адреса под одним зонтиком, поэтому поисковые системы оценивают все адреса на основе полномочий домена из входящих ссылок. Подробнее о.... Перенаправить веб-страницу

Rj

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню