Как осуществить перенаправление на другую веб-страницу с помощью JavaScript?
В этой статье мы рассмотрим различные способы JS redirect . Изучим запасные варианты перенаправления на тот случай, когда JavaScript отключен. А также влияние использования JavaScript для перенаправлений на SEO .
Обновлено: 2022-10-22 17:38:16 Сергей Бензенко автор материала
Перенаправление с помощью JavaScript
В идеале перенаправление должно осуществляться на стороне сервера с помощью корректного заголовка перенаправления HTTP , отправленного клиенту. Но если нужно перенаправить пользователя с помощью JavaScript , используйте для этого один из методов, приведенных ниже:
// перенаправление на новую страницу window.location.href = 'http://www.example.com/'; // то же, что и window.location.href = . window.location = 'http://www.example.com/'; window.location.assign('http://www.example.com/'); // перенаправление на другую страницу // с заменой первоначального документа в истории браузера на новый window.location.replace('http://www.example.com/');
В большинстве случаев функция replace() является лучшим способом. Так как она не создаст циклического перенаправления в том случае, если пользователь нажмёт в своем браузере кнопку » Назад «.
Некоторые браузеры и большинство поисковых роботов не исполняют код JavaScript по разным причинам, поэтому нужен запасной вариант JS redirect page .
Запасной вариант на случай если JavaScript отключен :
Лучше всего использовать заголовки HTTP на стороне сервера, чтобы осуществлять перенаправление с соответствующим кодом. Но поскольку мы говорим исключительно о JavaScript-перенаправлениях , то можно использовать метатэг refresh (в секции ), чтобы приказать браузеру перезагрузить текущую страницу через указанное время. Рассмотрим следующий пример:
Для осуществления перехода на другую страницу в JS можно использовать window.location.href.
Ноль, указанный в атрибуте content , заставляет браузер осуществить перенаправление немедленно. Изменение этого параметра на положительное число прикажет браузеру сделать паузу перед обновлением страницы ( значение в секундах ).
Также можно реализовать запасной вариант. Например, ссылку, для устаревших браузеров, в которых тэг refresh не работает:
Чтобы убедиться, что код выполняется только, когда JavaScript отключен, можно обернуть метатэг в тэги noscript :
- Если страница выполняет перенаправление слишком быстро ( то есть меньше, чем за 2-3 секунды ), она может изменять поведение кнопки « Назад » в браузере. При этом каждый раз, когда вы будете перемещаться назад на исходную страницу, перенаправление осуществляется мгновенно. Это плохо в плане юзабилити, потому что может » запереть » пользователя на странице, на которую он был перенаправлен.
- Это может быть расценено как признак дорвейной страницы.
- Ошибка или плохо спланированные JS location redirect могут создать бесконечную последовательность перенаправлений, перебрасывая пользователя туда-сюда между несколькими страницами.
Влияние JavaScript-перенаправлений на SEO :
Почему JavaScript- перенаправление может отрицательно сказаться на позиции сайта в поисковых системах :
Большинство поисковых роботов не могут JavaScript-код , что может отрицательно повлиять на рейтинг страниц в выдаче. Использование тэга meta refresh не решит эту проблему для всех поисковых роботов.
HTML-страница , содержащая метатег refresh , возвращает код ответа HTTP 200 OK , что отличается от кодов ответа перенаправления — 301 , 302 и т.п. Как код ответа HTTP 200 OK с тэгом refresh интерпретируется браузером/ботом/роботом, зависит только от его задач и программного кода.
Альтернативы JavaScript-перенаправлению, не влияющие на SEO :
Лучшим способом исправить эту проблему является:
- Добавление тэга link rel=canonical в секцию веб-страницы, чтобы сообщить поисковым системам о дублировании страницы, например, . Этот вариант проще реализовать, так как он не подразумевает каких-либо изменений на стороне сервера. Но не все поисковые системы и роботы могут принимать во внимание этот тэг.
- Возвращение любого из следующих заголовков HTTP со стороны веб-сервера ( или серверного скрипта ):
- Заголовок перенаправления HTTP с наиболее верным кодом ответа перенаправления, например, 301, 302, и т.п.;
- Заголовок « 404 не найдено » для веб-страниц, от которых вы хотите окончательно избавиться.
Для создания HTML редиректа используется мета-тег refresh.
Несмотря на то, что ответ 404 считается плохим с точки зрения SEO , он может иметь смысл в некоторых ситуациях. Чтобы определиться, какое действие для JS redirect to another page подходит для вас, задайте себе следующие вопросы:
- Существуют ли важные ссылки на страницу из внешних источников?
- Получает ли страница существенное количество трафика?
- Является ли этот URL-адрес популярным, на который пытаются попасть пользователи?
Если ответ на любой из этих вопросов да, то можно подумать об использовании перенаправления 3xx вместо ответа 404 . Иначе может выскочить 404 .
Причины этого следующие :
- мы сэкономим трафик запросов к серверу, исключив запросы поисковых систем, пытающихся добраться до удалённых или не нужных страниц;
- мы сможем корректно сообщить пользователю об ошибке, предоставив ему варианты поиска или другие связанные ссылки, что может улучшить пользовательский опыт.
Быстрое перенаправление после загрузки страницы
Разместив код перенаправления в разделе , можно выполнить немедленное перенаправление. Например:
window.location.href = "http://www.example.com";
В качестве альтернативы можно использовать событие onload тэга body :
Но всё, что предшествует тэгу body , будет выполнено браузером перед редиректом.
Перенаправление при загрузке страницы
Допустим, что перед выполнением JS redirect вы хотите убедиться, что страница закончила загрузку и выполнились определённые скрипты. В зависимости от того, когда нужно осуществить перенаправление, можно использовать следующие три события:
- Событие window.onload : возникает, когда объектная модель документа загружена, и весь контент загружен ( то есть всё загружено ).
- Событие document.onload : возникает, когда готова объектная модель документа ( строится из кода разметки ). То есть перед тем, как загружаются изображения или другой внешний контент.
- Событие document.onreadystatechange : возникает, когда:
- документ всё ещё загружается;
- документ загружен, но внешние ресурсы ( изображения, стили, фреймы и т.п .) ещё нет;
- документ и все внешние ресурсы загружены ( то же самое, что и событие window.onload ).
// Пример №1 window.addEventListener('load', function(event) < // все ресурсы загружены window.location = 'http://www.example.com/'; >); // Пример №2 document.onreadystatechange = function () < switch(document.readyState) < case 'loading': // документ всё ещё загружается break; case 'interactive': // документ загружен; теперь возможно обращение к элементам DOM break; case 'complete': // страница полностью загружена (то есть все ресурсы загружены) break; >>
Перенаправление по истечении некоторого времени
Чтобы отсрочить JS redirect page на несколько секунд, можно использовать JavaScript-функцию setTimeout следующим образом:
// перенаправление через 3 секунды (или 3000 мс) setTimeout(function() < window.location.href = "http://www.example.com"; >, 3000);
- Время в функции setTimeout определяется в миллисекундах ( то есть 1000 мс = 1 секунда ).
- Так как отображение веб-страницы браузером происходит последовательно сверху вниз, тэги script ( которые не отмечены атрибутами defer или async ) загружаются и выполняются до того, как отображается страница. Поэтому размещение кода в блоке должно привести к немедленному выполнению кода и JS location redirec t после указанного количества миллисекунд . Но можно разместить код в конце веб-страницы. Код будет выполнен, когда браузер достигнет этого места в веб-документе.
Если у вас есть дополнения или замечания, оставьте их в комментариях ниже!
Как перейти на другую страницу js
Как сделать так, чтобы по нажатию на кнопку (картинку, текст, ячейку таблицы — нужное подчеркнуть) пользователь переходил на другую страницу?
У каждого (ну, почти) элемента страницы (то есть у практически любого тега) есть специальный атрибут onclick=»…» . Этот атрибут и определяет, что произойдёт, когда человек нажмёт на элемент (будь то кнопка, изображение или что-то другое).
А в JavaScript есть такое свойство страницы: location.href . В нём находится текущий адрес страницы. Если это свойство изменить, то браузер перейдёт на новый (изменённый) адрес.
Пример действующего кода:
type="button"
value="Перейти на страницу 1.html"
onclick="top.location.href='1.html';" />В этом коде префикс javascript: говорит о том, что дальше будет идти JavaScript-код, а слово top сообщает о том, что мы будем менять адрес родительского фрейма. Адрес перехода указывается в одинарных кавычках. В нашем примере переход будет осуществлён на страницу 1.html .
Если на сайте фреймы не используются, то будет изменён адрес самой страницы, а если используются — тогда переход будет с основной страницы. Более ясно представлено на картинке:
Сверху показан переход с обычной страницы, а снизу — переход со страницы с фреймами.
Как сделать так, чтобы переход был только в текущем фрейме? Вместо слова top подставляем self , которое означает текущий документ. Пример кода:
type="button"
value="Перейти на страницу 1.html в текущем фрейме"
onclick="self.location.href='1.html';" />Тогда переход состоится только в текущем фрейме, как показано на картинке:
Ну, а как тогда сделать так, чтобы при нажатии на кнопку в одном фрейме совершался переход в другом фрейме? В JavaScript есть специальный массив: top.frames , который содержит в себе все фреймы, которые есть на странице. А у каждого фрейма (тега ) есть атрибут name , в котором указывается уникальное имя фрейма. Значит, чтобы сделать переход в определённом окне фрейма нужно написать так:
type="button"
value="Перейти на страницу 1.html в текущем фрейме"
onclick="top.frames['имя фрейма'].location.href='1.html';" />И получится так, как показано на картинке:
Прошу не забывать: атрибут onclick можно применять не только к тегу , но и к очень многим другим тегам.
Думаю, вопрос раскрыт. Если есть дополнения — пишите комментарии.
Ну и не забывайте, что если Вы делаете переход в ссылке, то гораздо правильнее воспользоваться атрибутом target тега .
Мысли по теме:
17.10.2006 5:20 der Igel:
В onclick нет необходимости указывать javascript. Это схема в URI, и её надо указывать только в ссылках, т.е. если бы обработчик javascript был указан в атрибуте href ссылки.
Связь с автором: derigel < doggy >rsdn.ru
17.10.2006 10:10 Евгений:
Совершенно верно, для меня это скорее привычка. Дурная, надо признать…
23.5.2007 6:28 ZelFF:
А вот такой вопрос. Как сделать переход с обычной страницы на страницу, содержащую ифрейм, причём чтоб страница в этом ифрейме отобразилась на нужной метке. Можно ли вообще такое реализовать? Заранее спасибо за ответ:)
Как поймать переход на другую страницу?
Ребят, всем привет)) Использую код window.location.href = «index.html» чтобы перейти на другую страницу по действию. Подскажите как сделать, чтобы эта страница открывалась в новой вкладке, а не в одной ?
Всем спасибо за ответ))
- Вопрос задан более трёх лет назад
- 407 просмотров
Комментировать
Решения вопроса 1
GilbertAmethyst @GilbertAmethyst
Используйте, например:
window.open(«https://google.com»,»_blank»)
Но помните, что для успешного выполнения таких функций их необходимо упаковывать в какое-либо действие со стороны пользователя, например клик, тогда браузер позволит создать окно в новой вкладке, а не заблокирует его:
react как перейти на другую страницу
В React для перехода на другую страницу нужно использовать роутер. Роутер — это компонент, который позволяет определить пути и соотнести их с соответствующими компонентами.
Для использования роутера в React нужно установить библиотеку react-router-dom и импортировать необходимые компоненты.
- Установка библиотеки:
npm install react-router-dom - Импорт компонентов:
import BrowserRouter as Router, Switch, Route, Link > from 'react-router-dom'; - Использование компонентов:
function App() return ( Router> div> nav> ul> li> Link to='/'>ГлавнаяLink> li> li> Link to='/about'>О насLink> li> li> Link to='/contact'>КонтактыLink> li> ul> nav> Switch> Route path='/about'> About /> Route> Route path='/contact'> Contact /> Route> Route path='/'> Home /> Route> Switch> div> Router> ); > В данном примере мы создали компонент App , в котором определили роутер. Далее мы создали навигационную панель с тремя ссылками на страницы «Главная», «О нас» и «Контакты». При клике на ссылку происходит переход на соответствующую страницу.
Для каждой страницы мы определили отдельный компонент ( Home , About , Contact ) и указали путь к ним в роутере.
- Определение компонентов:
function Home() return h2>Добро пожаловать на главную страницу/h2>; > function About() return h2>О нас/h2>; > function Contact() return h2>Контакты/h2>; > В данном примере мы определили три компонента: Home , About , Contact . Каждый компонент возвращает простой текст, который будет отображаться на соответствующей странице.
Таким образом, при переходе на страницу «О нас» будет отображаться текст «О нас», при переходе на страницу «Контакты» — «Контакты» и т.д.
- Дополнительные возможности:
Роутер react-router-dom предоставляет дополнительные возможности, такие как передача параметров в URL, использование вложенных маршрутов, обработка ошибок и т.д. Более подробную информацию об этих возможностях можно найти в официальной документации react-router-dom .