Главная
Web-дизайн
Страница с автоматической переадресацией

Страница с автоматической переадресацией

Автоматическая переадресация

Доброго времени суток. 🙂

Иногда приходится на время закрыть сайт или перенести его на новый домен. В то же время старый домен продолжает работать еще некоторое время. Для того, чтобы посетители не видели пустого сайта, предлагаю один способ, как вывести сообщение, о том что сайт закрыт и посетитель будет перенаправлен через определенное время на другой сайт. Также этот метод можно использовать для автоматического перенаправления с одной страницы на другую.

Суть способа заключается в том, что перед пользователем появится сообщение, которое затемнит основной контент и укажет о причине переадресации. Также под сообщением будет индикатор, на подобии полосы загрузки. Он будет показывать, сколько осталось до переадресации. По истечению заданного времени, будет совершен переход на новую страницу или сайт.



Пример

Давайте приступим к работе.

Для начала в шапку страницы перед закрывающимся head или в подвал перед закрывающимся body нужно добавить javascript. В данном скрипте объединены два javascript. Один отвечает за анимацию полосы загрузки, а второй за время и направление переадресации.

<script type="text/javascript">
//Скрипт полосы загрузки
$(function() {
    $(".meter > span").each(function() {
        $(this)
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
                width: $(this).data("origWidth")
            }, 15000);
        });
    });
//Скрипт переадресации
window.setTimeout("document.location.href='http://gnatkovsky.com.ua/'", 15000);
</script>

В первой и второй части скрипта есть значение - 15000. Это - 15 секунд. В первом скрипте, это время за которое полоса загрузки дойдет до конца, а во втором - время через которое будет совершена переадресация. Если надо изменить, меняем там и там, чтобы все красиво и правильно работало.

Также во втором скрипте указанна ссылка на мой сайт, замените ее на нужную Вам. Это как раз тот адрес, на который будет совершена переадресация.

Далее нам нужно в самом верху страницы или сайта, желательно в шапке сразу после начала body добавить следующую разметку:

 <div class="bg_mess_block">
    <div class="mess_block">
        <h2>Сайт <span class="domen">Site.com</span> закрыт</h1>
        <p>Через 15 секунд вы будете перенаправлены на сайт <a href="http://gnatkovsky.com.ua/" title="Уроки WordPress и многое другое" target="_blank" >Gnatkovsky.com.ua</a>.</p>
        <p>Если этого не произошло, то нажмите <a href="http://gnatkovsky.com.ua/" title="Уроки WordPress и многое другое" target="_blank" >сюда</a>.</p>
        <div class="meter"><span></span></div>
    </div> 
</div>

Давайте по порядку разберем что и как.

  • 1. Блок с классом bg_mess_block - это фон полупрозрачный, который заполняет всю страницу.
  • 2. Блок mess_block - это блок, в котором будет размещено все содержимое сообщения и он будет по центру экрана.
  • 3. Далее идет сообщение и строка где указано время, измените его, если вы поменяете время в скрипте.
  • 4. Блок с классом meter - это и есть полоса загрузки.

Есть один момент. Внутри блока meter есть span. По сути - meter это родитель и фон полосы загрузки. Он темный и если хотите, можете сделать его прозрачным. А вот span - это как раз та полоска, которая движется, так что ни в коем случаи span не удаляйте.

Чтобы задать красивый и корректный внешний вид, добавим стилей к нашей странице.

.meter{
height: 4px;
position: relative;
margin: 100px 0 20px 0;
background: #111;
padding: 0;
}
.meter > span {
display: block;
height: 100%;
background: #f30;
}
.bg_mess_block{
position:fixed;
z-index:1000;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
vertical-align:middle;
color:#aaaaaa;
font-size:20px;
background:rgba(16,16,16,0.9);
font-family: Helvetica, Arial, sans-serif;
font-weight:100;line-height:1.2em;
}
.mess_block{
display;block;
width:50%;
text-align:center;
margin:15% auto;
padding:0;
text-align:center;
}
.domen{color:#f30);}

Если все сделано правильно, то Вы увидите результат.

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

Вставив код ниже, больше ничего не нужно, ни разметки ни стилей.

<script type="text/javascript">
window.setTimeout("document.location.href='http://gnatkovsky.com.ua/'");
</script>

Как всегда пишу, меняйте все под себя, пробуйте и у Вас все получится.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(3 голоса, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий