JS-решения №25. Простое переключение страниц без перезагрузки (Ajax)

YOUTUBE · 01.12.2025 09:34

Ключевые темы и таймкоды

Создание простого переключения страниц без перезагрузки

0:05

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

Создание HTML-кода

1:03

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

Написание JavaScript-кода

2:03

В JavaScript-коде создаются функции для показа и скрытия оверлея, а также функция для обработки кликов по ссылкам.
Также создается обработчик для обработки событий и вызова функций при кликах.

Обработка запросов и парсинг страниц

6:57

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

Создание анимации с использованием JavaScript

9:49

В видео рассказывается о том, как создать анимацию с использованием JavaScript.
Сначала автор заменяет HTML-код на другой, затем с некоторой задержкой убирает класс "вода" и добавляет класс "контент".
Затем автор делает "push" в историю, чтобы сохранить текущий URL, и меняет заголовок страницы.
После этого автор показывает, как использовать анимацию с помощью CSS и JavaScript.

Проверка работы анимации

11:46

Автор проверяет работу анимации, показывая, что анимация работает корректно на главной странице.
Однако, на второй странице анимация не работает, так как страница загружается извне.
Автор объясняет, что для решения этой проблемы нужно добавить функцию, которая будет проверять URL и вызывать нужный скрипт только после загрузки страницы.

Создание функции для проверки URL

14:43

Автор создает функцию, которая проверяет URL и вызывает нужный скрипт только после загрузки страницы.
Эта функция позволяет использовать разные скрипты на разных страницах и управлять анимацией в зависимости от текущей страницы.
Автор также объясняет, как можно использовать отдельные функции для разных страниц.