Получить профессию в Skypro
Замена всей страницы JavaScript: метод для шапки и тела
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для полной замены HTML-контента страницы достаточно задать новое значение свойству document.documentElement.outerHTML:
document.documentElement.outerHTML = '<!DOCTYPE html><html><head><title>Новый заголовок</title></head><body>Новое тело</body></html>';Таким образом, ваша веб-страница будет перезагружена с указанным заголовком и телом.
Однако будьте внимательны: старые скрипты могут продолжить работу! Если работа JavaScript-контекста продолжится, то старые скрипты не исчезнут автоматически, что может вызвать проблемы. Для их предотвращения используйте функцию ReplaceContent для безопасной замены контента страницы.
Радикальное изменение и возврат динамики
Используя JavaScript, вы можете "снести" старый "дом" HTML и "возвести" совершенно новый. Вот как это выглядит:
Разрушение старого HTML
Содержимое страницы можно кардинально изменить следующим образом:
function ReplaceContent(newContent) {
document.open(); // Время для перемен!
document.write(newContent); // Устанавливаем HTML-элементы на свои места
document.close(); // Завершили, теперь можно отдохнуть!
}С помощью функции ReplaceContent можно полностью изменить внешний вид страницы:
ReplaceContent('<!DOCTYPE html><html><head><title>Прощай, мир</title></head><body><script>alert("Прощай, мир");</script></body></html>');
Триггеры и специальные функции
Используя функцию-триггер Hi, можно активировать уведомление после обновления контента:
function Hi() {
alert('Прощай, мир'); // Вот ваше уведомление!
// Здесь можно разместить код для замены содержимого, если уведомление — это не конец процесса
}После вызова ReplaceContent всё содержимое страницы будет заменено, включая заголовки и JavaScript-код.
Мгновенная замена без обращений к серверу
Если вам не нужно обращаться к серверу, вызов функции замены содержимого будет выглядеть так:
let newContent = '<!DOCTYPE html><html><head><title>Заголовок</title></head><body>Содержимое страницы</body></html>';
ReplaceContent(newContent);Моментальная замена с помощью jQuery
Если вы используете jQuery, вот метод быстрой и простой замены страницы:
$("html").html(newContent);Использование элемента iframe
iframe с атрибутом srcdoc позволяет обновить содержимое страницы. iframe станет "холстом", на котором вы создадите новую страницу:
<iframe style="position:fixed; top:0; left:0; width:100%; height:100%" srcdoc="<p>Здесь начинается ваш новый мир</p>"></iframe>Добавьте индикатор загрузки для сглаживания перехода до момента, когда новый контент появится перед пользователем.
Полезные материалы
- Документ: свойство documentElement – Веб API | MDN — Описание свойства
documentElementв объектеDocument. - Элемент: свойство innerHTML – Веб API | MDN — Объяснение свойства
innerHTMLи инструкции по работе с HTML. - JavaScript – typeof возвращает "unknown" в IE – Stack Overflow — Обсуждение особенностей работы JavaScript в браузере Internet Explorer.
- JavaScript DOM Документ — Вводный курс по работе с DOM-объектом
Documentв JavaScript. - Документ: метод write() – Веб API | MDN — Подробное руководство по использованию метода
document.write. - Добавление правил в стилевые файлы с помощью JavaScript — Уроки применения стилей в JavaScript от Дэвида Уолша.