Переадресация веб-страниц с помощью JavaScript
В этой статье мы покажем, как можно организовать перенаправление со страницы, используя JavaScript location. Неожиданные перенаправления считаются очень раздражающими с точки зрения пользователей, поскольку они отрицательно влияют на общее впечатление. Например, если вы перенаправляете пользователей на другой сайт сразу после их перехода на ваш. Также, если вы направите на постороннюю страницу по таймеру или после того, как они совершили определенное действие. Это приведет к тому, что пользователь захочет сразу же покинуть ваш сайт.
Кроме этого поисковые системы не жалуют ресурсы, использующие переадресацию, особенно если они вводят пользователей в заблуждение. Но существуют случаи, когда перенаправление может быть полезно. Поэтому мы оставляем за вами принятие решения, использовать переадресацию или нет.
Методы переадресации JavaScript
В JavaScript window location или объект location используется, чтобы получить информацию о местоположении текущей веб-страницы (документа), а также для его изменения. Ниже приведен список способов, которые могут быть использованы для реализации переадресации JavaScript:
//Устанавливает новое местоположение текущего окна.
window.location = "http://www.example.com";
//Устанавливает новую гиперссылку (URL) для текущего окна.
window.location.href = "http://www.example.com";
// Присваивает новый URL текущему окну.
window.location.assign("http://www.example.com");
//Заменяет положение текущего окна на новое.
window.location.replace("http://www.example.com");
//Задает местоположение самого текущего окна.
self.location = "http://www.example.com";
// Задает положение самого верхнего окна относительно текущего.
top.location = "http://www.example.com";Хотя приведенные выше строки JavaScript кода выполняют схожую работу, у них есть небольшие отличия. Например, если вы используете перенаправление top.location внутри элемента iframe, то это принудительно перенаправит на главное окно. Еще один момент, о котором стоит помнить: location.replace() заменяет текущий документ, удаляя его из истории и делая его недоступным с помощью кнопки «Назад» в браузере.
Для реализации кроссбраузерности мы рекомендуем использовать следующий код JavaScript windows location:
window.location.href = "http://www.example.com";Также вы можете зайти на эту страницу, чтобы подробнее узнать, как работает window.location.
Переадресация JavaScript: перенаправление при загрузке
Чтобы перенаправить пользователя на другой веб-сайт сразу же после открытия вашего сайта, можно использовать следующий код вверху вашей страницы, внутри элемента <head>. Или, если вы используете отдельный .js файл, поместите следующий код в этот файл и не забудьте сослаться на него в заголовке вашей страницы:
<script>
window.location.href = "http://www.example.com";
</script>Просто замените URL-адрес из примера на тот адрес, куда вы хотите перенаправлять. Следует отметить, что при этом виде переадресации, посетители вообще не увидят вашу веб-страницу и будут моментально перенаправлены на целевой адрес.
Переадресация JavaScript: перенаправление после определенного периода времени
Чтобы перенаправить пользователя на другой сайт после определенного периода времени, можно использовать следующий код:
<script>
setTimeout(function() {
window.location.href = "http://www.example.com";
}, 3000);
</script>Функция JavaScript location href, приведенная выше, перенаправит пользователя со страницы через 3 секунды после полной загрузки. Вы можете изменить значение 3000 (3 x 1000 в миллисекундах) на свое усмотрение.
Переадресация JavaScript: перенаправление со страницы после события или действия пользователя
Иногда нужно отправить пользователя на другую страницу после определенного события или совершенного действия. В таких случаях можно использовать проверку условия или закрепить за элементом событие для выполнения переадресации. Рассмотрим два следующих примера:
<script>
// Проверяем, верно ли условие, и затем перенаправляем.
if ( ... ) {
window.location.href = "http://www.example.com";
}
</script>Приведенный выше код JavaScript document location href выполнит перенаправление, если условие верно:
<script>
// событие onclick присвоено элементу #button.
document.getElementById("button").onclick = function() {
window.location.href = "http://www.example.com";
};
</script>Приведенный выше код выполнит перенаправление, когда пользователь нажмет на элемент #button.
Так работает переадресация в JavaScript. Надеемся, эти примеры помогут вам в организации переадресации веб-страниц.