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

Как сделать переход между страницами без перезагрузки?

Как сделать переход по страницам сайта без перезагрузки? Как примеру в «ВК» или «YouTube». Помогите пожалуйста!

Почитай про SPA. Обычно подобные сервисы разрабатываются при помощи js библиотек Vue router, React router и т.п.

async function pageUpdate(event) < // Если функция вызвана без аргументов: if (typeof event == 'undefined') < // Устанавливаем обработчики // на все ссылки на странице: $('body a[href]').click(pageUpdate); >// Если функция вызвана // в результате клика // по ссылке: else < // Берём адрес с нажатой ссылки // и записываем в переменную link: var link = event.target.href; // Если ссылка ведет на наш сайт: if (new URL(link)['host'] == location.host) < // Предотвращаем переход: event.preventDefault(); // Блокируем страницу, чтобы // больше нельзя было кликать: $('body').css('pointer-events', 'none'); // Активируем анимацию исчезновения (полупрозрачности): var hide = $('body').animate(< opacity: 0.2 >, 500).promise(); var ajax = $.ajax(link); // Запускаем загрузку новой страницы await hide; // Ждем окончания анимации исчезновения // Вставляем данные на страницу беря их с ново-скачанной страницы: var doc = new DOMParser().parseFromString((await ajax), 'text/html'); var html = $('body', doc).html(); $('body').html(html); // Скролим в самый вверх: $('body, html').animate(, 0); // Меняем адрес в адресной строке: history.pushState(null, null, link); // Заново ставим // обработчики: pageUpdate(); // Активируем анимацию // постепенного появления: await $('body').animate(< opacity: 1 >, 500).promise(); // Снимаем блокировку с документа: $('body').css('pointer-events', ''); > > > pageUpdate();

Функция перехватывает клики по ссылкам, добавляет анимацию и обновляет контент страницы без перезагрузки.

Важно! Если на сайте есть какой-то сложный функционал, данный скрипт скорее-всего их сломает!

Войдите, чтобы написать ответ

Есть ли смысл применять React для написания простого сайта?

Источник

Как в 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?

В этой статье мы рассмотрим различные способы 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 после указанного количества миллисекунд . Но можно разместить код в конце веб-страницы. Код будет выполнен, когда браузер достигнет этого места в веб-документе.

Если у вас есть дополнения или замечания, оставьте их в комментариях ниже!

Источник