Как сделать страницу с редиректом

DOWNLOAD

DEMO

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

Давайте я для начала расскажу зачем мне понадобилась страница редиректа в моих проектах. А дело в том, что не все мои проектики "белые" и поисковые системы, соц. сети и дркгие крупные киты инета относятся к нимблагосклонно. Несколько соцсетей не хотят публиковать прямую ссылку с своих страниц на мой проектик. И я решил подсунуть им другой урл, на который они не заругаются. Вот для этого мне и понадобился редирект. Для осуществления своего плана я зарегал отдельное доменное имя, но подробно об этом рассказывать не буду в рамках этой статьи. И за тем сверстал простую html страничку. По тех заданию для себя я решил, что на ней будет счётчик обратного отсчёта на javascript, анимация загрузки, и красивый движущися фон. Html, css, js код страницы указан в конце статьи.

Счётчик обратного отсчёта на javascript

Листинг файла myjs.js

       
           jQuery(document).ready(function() {
  
            function init()
            {
                         sec = 6;
                         setInterval(tick, 1000);
            }

            function tick()
            {
                if(sec>0){
                         sec--;
                         document.getElementById("timer").
                         childNodes[0].nodeValue = sec;
                }
            }

            init();

         });
       

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

Редирект php

           $id=(int)($_GET["id"]); //получаем get параметры
           $idclear=preg_replace("/[^0-9]/", '', $id); //оставляем только цифры
           sleep(5); //задержка 5 сек
           header("Location: http://sh3181865.b.had.su/?id=".$idclear);//перенаправление
       

Минус редиректа php в том, что он не грузит документ, а доходит только до загрузки заголовков веб страницы, после чего браузер перенаправляет пользователя на новый урл. Такой редирект нам не совсем подходит.

Редирект javascript

        window.setTimeout(function() {//задержка в 5 сек
                //редирект, получаем данные из php и вставляем их в урл.
                window.location.replace("http://sh3181865.b.had.su/?id=");
        }, 5000);
       

Обратите внимане что я везде использую не jquery а наитивный js код. Были проблемы с мобильниками, не все мобильные браузеры адекватно воспринимали jquery. Так же минус редиректа на js в том, что редирект не сработает если оы отключен.

Подведём итог. Всё что я хотел реализовать я сделал. В начале заметки вы можете скачать zip архив с файлами странички. В видео на ютубе обяснил всё более подробно. Если видео вам помогло подписывайтесь и ставте лайки.