Замена всей страницы JavaScript: метод для шапки и тела

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

Быстрый ответ

Для полной замены HTML-контента страницы достаточно задать новое значение свойству document.documentElement.outerHTML:

Скопировать код

document.documentElement.outerHTML = '<!DOCTYPE html><html><head><title>Новый заголовок</title></head><body>Новое тело</body></html>';

Таким образом, ваша веб-страница будет перезагружена с указанным заголовком и телом.

Однако будьте внимательны: старые скрипты могут продолжить работу! Если работа JavaScript-контекста продолжится, то старые скрипты не исчезнут автоматически, что может вызвать проблемы. Для их предотвращения используйте функцию ReplaceContent для безопасной замены контента страницы.

Кинга Идем в IT: пошаговый план для смены профессии

Радикальное изменение и возврат динамики

Используя 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 станет "холстом", на котором вы создадите новую страницу:

HTML

Скопировать код

<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 от Дэвида Уолша.

Свежие материалы

Что такое домен и хостинг и зачем они нужны?

6 сентября 2024

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024

Коды состояния HTTP: что они значат?

6 сентября 2024