Javascript переход между страницами

Как осуществить перенаправление на другую веб-страницу с помощью JavaScript?

В этой статье мы рассмотрим различные способы JS redirect . Изучим запасные варианты перенаправления на тот случай, когда JavaScript отключен. А также влияние использования JavaScript для перенаправлений на SEO .

Перенаправление с помощью 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 (в секции ), чтобы приказать браузеру перезагрузить текущую страницу через указанное время. Рассмотрим следующий пример:

Ноль, указанный в атрибуте 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 :

Лучшим способом исправить эту проблему является:

1. Добавление тэга link rel=canonical в секцию веб-страницы, чтобы сообщить поисковым системам о дублировании страницы, например, . Этот вариант проще реализовать, так как он не подразумевает каких-либо изменений на стороне сервера. Но не все поисковые системы и роботы могут принимать во внимание этот тэг.
2. Возвращение любого из следующих заголовков HTTP со стороны веб-сервера ( или серверного скрипта ):
   • Заголовок перенаправления HTTP с наиболее верным кодом ответа перенаправления , например, 301 , 302 , и т.п.;
   • Заголовок « 404 не найдено » для веб-страниц, от которых вы хотите окончательно избавиться.

Несмотря на то, что ответ 404 считается плохим с точки зрения SEO , он может иметь смысл в некоторых ситуациях. Чтобы определиться, какое действие для JS redirect to another page подходит для вас, задайте себе следующие вопросы:

1. Существуют ли важные ссылки на страницу из внешних источников?
2. Получает ли страница существенное количество трафика?
3. Является ли этот URL-адрес популярным, на который пытаются попасть пользователи?

Если ответ на любой из этих вопросов да, то можно подумать об использовании перенаправления 3xx вместо ответа 404 . Иначе может выскочить 404 .

• мы сэкономим трафик запросов к серверу, исключив запросы поисковых систем, пытающихся добраться до удалённых или не нужных страниц;
• мы сможем корректно сообщить пользователю об ошибке, предоставив ему варианты поиска или другие связанные ссылки, что может улучшить пользовательский опыт.

Быстрое перенаправление после загрузки страницы

Разместив код перенаправления в разделе , можно выполнить немедленное перенаправление. Например:

window.location.href = "http://www.example.com";

В качестве альтернативы можно использовать событие onload тэга body :

Но всё, что предшествует тэгу body , будет выполнено браузером перед редиректом.

Перенаправление при загрузке страницы

Допустим, что перед выполнением JS redirect вы хотите убедиться, что страница закончила загрузку и выполнились определённые скрипты. В зависимости от того, когда нужно осуществить перенаправление, можно использовать следующие три события:

1. Событие window.onload : возникает, когда объектная модель документа загружена, и весь контент загружен ( то есть всё загружено ).
2. Событие document.onload : возникает, когда готова объектная модель документа ( строится из кода разметки ). То есть перед тем, как загружаются изображения или другой внешний контент.
3. Событие 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 реализуется переход на другую страницу

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

Вы можете перенаправлять пользователя с одной веб-страницы на любую другую несколькими способами. В том числе с помощью обновления мета-данных HTML , перенаправления на стороне сервера. Например, используя файл .htaccess , PHP , и с помощью перенаправления на стороне клиента через JavaScript .

Но учтите, что неожиданные перенаправления, которые происходят в середине другого действия, раздражают посетителей. Поэтому использовать редирект нужно только, если это действительно необходимо и в том случае, если это будет иметь смысл с точки зрения пользователя.

Давайте рассмотрим, как можно использовать JavaScript для перенаправления пользователя на другую страницу.

Автоматическое JavaScript-перенаправление на другую страницу

Если нужно автоматически перенаправить пользователя с одной страницы ( URL1 ) на другую страницу ( URL2 ), можно использовать следующий код:

Необходимо вставить приведенный выше код на первую страницу ( URL1 ). Замените URL2 на нужный адрес страницы. Лучше поместить этот код внутри элемента ( а не в нижней части страницы ), чтобы страница перенаправлялась до того, как браузер начинает ее отображать.

СОВЕТ: Если вы используете встроенный JavaScript (т.е. без внешнего файла .js), не забудьте поместить код JavaScript в теги .

Перенаправление на другую страницу через X секунд

В этом примере мы будем осуществлять js редирект на другую страницу через некоторое время после загрузки страницы. Например, если нужно перенаправить посетителя на главную страницу после отображения страницы приветствия в течение 5 секунд:

setTimeout(function()< window.location.href = 'homepage-url'; >, 5 * 1000);

Необходимо вставить приведенный код JavaScript на странице приветствия. Не забудьте заменить homepage-url на URL-адрес домашней страницы.

Мы использовали метод setTimeout , чтобы указать скрипту выполнить перенаправление через 5 секунд ( умножаем 5 на 1000, чтобы преобразовать секунды в миллисекунды ).

СОВЕТ: В JavaScript значения времени всегда рассчитываются в миллисекундах.

Перенаправление на другую страницу, исходя из условия

Например, можно выполнить перенаправление в зависимости от браузера посетителя ( хотя это не рекомендуется ), размера экрана, времени суток, или другого условия.

Используйте следующий код для перенаправления посетителей, которые удовлетворяют определенному условию:

Например, этот код перенаправляет посетителей на другую страницу, если ширина их экрана меньше 600 пикселов:

Перенаправление на другую страницу на основе действий пользователя

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

Следующий код будет перенаправлять посетителя на целевую страницу после нажатия на #mybutton :

document.getElementById('mybutton').onclick = function() < window.location.href = 'redirect-url'; >;

Можно сделать то же самое, используя следующий код:

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

Я попытался рассмотреть все возможные случаи js редиректа на другую страницу . Если я когда-либо столкнусь с другими сценариями, я добавлю их в эту статью.

Источник

Перенаправление на другую веб-страницу с помощью JavaScript/jQuery

В этом посте мы обсудим, как перенаправить на другую веб-страницу в JavaScript и jQuery.

Существует несколько способов перенаправления страницы в JavaScript, каждый из которых включает использование window.location имущество. Он возвращает Location объект, представляющий местоположение (URL) текущего документа.

1. Использование location.href

Когда вы назначаете URL для window.location.href связанный документ переходит на новую страницу из того же или другого источника.

С window является глобальным объектом, его можно сократить до:

Обратите внимание, что location является синонимом location.href . Таким образом, вы можете напрямую присвоить значение location объект.

2. Использование location.assign() функция

Вы также можете перейти к новому URL-адресу, используя location.assign() метод. Если указанный URL-адрес имеет другое происхождение, это может привести к сбою из-за политики CORS.

Обратите внимание, что assign() метод сохранит текущую страницу в истории сеанса, т.е. пользователь может вернуться назад с помощью кнопки «Назад».

3. Использование location.replace() функция

Существует еще один метод объекта местоположения, который называется replace() , который заменяет текущий документ документом по указанному URL-адресу. в отличие от assign() метод, это заменяет запись истории сеанса, и пользователь не может вернуться на исходную страницу с помощью кнопки «Назад».

Источник