В этой статье я расскажу, как можно перенаправить пользователя с одной веб-страницы на другую с помощью JavaScript . А также приведу несколько простых примеров JS редиректа .
Вы можете перенаправлять пользователя с одной веб-страницы на любую другую несколькими способами. В том числе с помощью обновления мета-данных HTML , перенаправления на стороне сервера. Например, используя файл .htaccess , PHP , и с помощью перенаправления на стороне клиента через JavaScript .
Но учтите, что неожиданные перенаправления, которые происходят в середине другого действия, раздражают посетителей. Поэтому использовать редирект нужно только, если это действительно необходимо и в том случае, если это будет иметь смысл с точки зрения пользователя.
Давайте рассмотрим, как можно использовать JavaScript для перенаправления пользователя на другую страницу.
Содержание
- Автоматическое JavaScript-перенаправление на другую страницу
- Перенаправление на другую страницу через X секунд
- Перенаправление на другую страницу, исходя из условия
- Перенаправление на другую страницу на основе действий пользователя
- Комментарии
Автоматическое JavaScript-перенаправление на другую страницу
Если нужно автоматически перенаправить пользователя с одной страницы ( URL1 ) на другую страницу ( URL2 ), можно использовать следующий код:
Необходимо вставить приведенный выше код на первую страницу ( URL1 ). Замените URL2 на нужный адрес страницы. Лучше поместить этот код внутри элемента ( а не в нижней части страницы ), чтобы страница перенаправлялась до того, как браузер начинает ее отображать.
Перенаправление на другую страницу через X секунд
В этом примере мы будем осуществлять js редирект на другую страницу через некоторое время после загрузки страницы. Например, если нужно перенаправить посетителя на главную страницу после отображения страницы приветствия в течение 5 секунд:
Необходимо вставить приведенный код JavaScript на странице приветствия. Не забудьте заменить homepage-url на URL-адрес домашней страницы.
Мы использовали метод setTimeout , чтобы указать скрипту выполнить перенаправление через 5 секунд ( умножаем 5 на 1000, чтобы преобразовать секунды в миллисекунды ).
Перенаправление на другую страницу, исходя из условия
Например, можно выполнить перенаправление в зависимости от браузера посетителя ( хотя это не рекомендуется ), размера экрана, времени суток, или другого условия.
Используйте следующий код для перенаправления посетителей, которые удовлетворяют определенному условию:
Например, этот код перенаправляет посетителей на другую страницу, если ширина их экрана меньше 600 пикселов:
Перенаправление на другую страницу на основе действий пользователя
Последний пример демонстрирует, как перенаправить посетителя, основываясь на его действиях. Вы можете привязать js редирект к любому типу действия пользователя. В данном примере для простоты мы будем обрабатывать нажатие кнопки.
Следующий код будет перенаправлять посетителя на целевую страницу после нажатия на #mybutton :
Можно сделать то же самое, используя следующий код:
Также можно связать перенаправление с любым событием или действием пользователя. Только не забудьте удостовериться, что ваши редиректы не вызовут разочарования пользователей.
Я попытался рассмотреть все возможные случаи js редиректа на другую страницу . Если я когда-либо столкнусь с другими сценариями, я добавлю их в эту статью.
Данная публикация представляет собой перевод статьи « Redirect to Another Page with JavaScript » , подготовленной дружной командой проекта Интернет-технологии.ру
Как сделать так, чтобы по нажатию на кнопку (картинку, текст, ячейку таблицы — нужное подчеркнуть) пользователь переходил на другую страницу?
У каждого (ну, почти) элемента страницы (то есть у практически любого тега) есть специальный атрибут onclick=»…» . Этот атрибут и определяет, что произойдёт, когда человек нажмёт на элемент (будь то кнопка, изображение или что-то другое).
А в JavaScript есть такое свойство страницы: location.href . В нём находится текущий адрес страницы. Если это свойство изменить, то браузер перейдёт на новый (изменённый) адрес.
Пример действующего кода:
В этом коде префикс javascript: говорит о том, что дальше будет идти JavaScript-код, а слово top сообщает о том, что мы будем менять адрес родительского фрейма. Адрес перехода указывается в одинарных кавычках. В нашем примере переход будет осуществлён на страницу 1.html .
Если на сайте фреймы не используются, то будет изменён адрес самой страницы, а если используются — тогда переход будет с основной страницы. Более ясно представлено на картинке:
Сверху показан переход с обычной страницы, а снизу — переход со страницы с фреймами.
Как сделать так, чтобы переход был только в текущем фрейме? Вместо слова top подставляем self , которое означает текущий документ. Пример кода:
Тогда переход состоится только в текущем фрейме, как показано на картинке:
Ну, а как тогда сделать так, чтобы при нажатии на кнопку в одном фрейме совершался переход в другом фрейме? В JavaScript есть специальный массив: top.frames , который содержит в себе все фреймы, которые есть на странице. А у каждого фрейма (тега ) есть атрибут name , в котором указывается уникальное имя фрейма. Значит, чтобы сделать переход в определённом окне фрейма нужно написать так:
И получится так, как показано на картинке:
Прошу не забывать: атрибут onclick можно применять не только к тегу , но и к очень многим другим тегам.
Думаю, вопрос раскрыт. Если есть дополнения — пишите комментарии.
Ну и не забывайте, что если Вы делаете переход в ссылке, то гораздо правильнее воспользоваться атрибутом target тега .
Перейти на нужную страницу можно с помощью JavaScript
или так, чтобы в истории браузера не осталась запись о текущей странице
JS можно вставить в href ссылки
или вынести в функцию
в общем-то, перейти на какую-то страницу можно по ссылке и без js, но если мы делаем переход по условию, то используем javascript
в head страницы добавляем функцию
Комментарии
Привет
Не подскажите пожалуйста как перейти на следующую страничку автоматически (скажем рандомально) при достижении посетителем конца странцы?
Эта фишка есть на многих сайтах.. по моему очень юсабельно.
Спасибо за ваше время!
Источник: