Автообновление HTML-страниц в браузерах Chrome, Firefox и Opera
При кодинге достаточно удобной штукой является автообновление страницы в окне браузера. То есть, это когда в открытом редакторе (пускай это будет мой любимый Sublime Text) вносятся правки или изменения в самом HTML или CSS-коде, а в окне браузера сразу наглядно видны эти изменения. Очень удобная возможность именно благодаря своей наглядности.
Но вот “беда” — почти все популярные браузеры не обладают такой способностью изначально. Их этому нужно научить. Самый простой способ — это установить в них расширения или дополнения, предназначенные именно для этой цели. Другой, более сложный способ — это воспользоваться скриптом LiveReload. Также я видел на GitHub одноименное расширение под редактор Sublime Text.
Но сегодня я остановлюсь на самом простом способе — встраивание расширений в браузеры. Первоначально хотел сам написать обзор таких дополнений, но наткнулся в Интернете на статью, в которой уже был описан такой способ для Chrome, Firefox и Opera. Поэтому изменил свое решение и сделал вольный перевод статьи, текст которой привожу ниже.
Далее — перевод статьи.
Иногда при работе в Интернете может возникнуть необходимость в автообновлении страниц. Например, необходимо постоянно следить за счетом в online-игре, регулярно проверять новости или же с нетерпением ждать своих оценок на сайте колледжа. В предыдущей статье шла речь об online-сервисе, служащем для подобных задач — “Refresh This”. Однако на сегодня его уже не существует, он благополучно канул в лету. Но ведь потребность в такой задаче у нас осталась.
Если все же есть необходимость в таком Интернет-сервисе, то можно попробовать , но он кажется не слишком надежным.
Поэтому сегодня мы поговорим о возможности встраивания автообновления страниц прямо в браузер (Chrome, Firefox или Opera), без нужды использования сторонних служб.
Автообновление в Google Chrome
Для того чтобы задействовать автообновление страниц в Chrome, нужно скачать и установить расширение “Auto Refresh Plus” с ресурса Web Store. После установки значок расширения появиться в панели инструментов браузера, в секции расширений. Чтобы включить автообновление выбранной страницы, нужно кликнуть мышью на этом значке. Появится очень простое окошко настроек расширения:
В нем необходимо выбрать интервал времени, через которое будет выполняться автообновление. Можно выбрать заранее заданные величины, а можно установить и свою собственную. И затем нажать кнопку Start . Окно настроек закроется, а на иконке расширения в панели инструментов будет отображаться счетчик, работающий в обратном порядке — на уменьшение. Как только он достигнет заданного значения, страница в окне браузера обновиться автоматически. Чтобы остановить обновление, снова щелкните на иконке расширения и в открывшемся окне нажмите кнопку Stop .
Автообновление в Mozilla Firefox
Для интеграции подобной возможности в браузер Firefox, нужно скачать и установить дополнение “Auto Refresh”, а затем перезагрузить браузер. Теперь открываем интересующую нас страницу и выбираем интервал времени, через который она будет обновляться, путем правого щелчка мыши на иконке дополнения “Auto Refresh”:
В настройках можно выбрать автообновление для отдельной страницы или же для всех открытых вкладок. Помимо прочих настроек, есть и еще один пункт — принудительное обновление страницы “Hard Refresh”. В списке представлены интервалы времени, установленные по умолчанию. Но можно задать и свой собственный, выбрав пункт меню “Customize”.
Автообновление в Opera
Возможность автообновления страниц в браузере Opera встроена по умолчанию, поэтому нет необходимости устанавливать какие-либо расширения. Чтобы задействовать такую функцию, достаточно щелкнуть правой кнопкой мыши на любом месте страницы и выбрать в выпадающем меню интервал обновления в разделе “Reload Every”. В браузере уже заданы интервалы по умолчанию, но можно выставить и свой вручную, перейдя в раздел “Custom”:
Чтобы остановить автообновление страницы, снова откройте контекстное меню и нажмите пункт “Never”.
Заключение
Такими простыми способами можно настроить автообновление страниц в браузерах Google Chrome, Mozilla Firefox и Opera. Но вот для еще одного популярного браузера — Internet Explorer — я так и не нашел ничего подобного. Единственное, что я могу посоветовать людям, пользующимся IE — это перейти на любой из трех названных ранее, чтобы полноценно пользоваться всеми возможностями Интернета.
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading
Как сделать автообновление страницы
На некоторых страницах требуется постоянное автообновление. Например, это могут быть текущие результаты какого-нибудь матча. Или это могут быть котировки валют или акций. В общем, задача есть, и нужно подобрать оптимальное решение для неё. И в этой статье я расскажу, как сделать автообновление страницы.
Большинство разработчиков сразу же побегут к JavaScript, однако, использовать его в этой ситуации совсем не нужно. Достаточно использовать HTML:
<meta http-equiv=»Refresh» content=»30″ />
В результате, каждые 30 секунд страница будет перезагружаться. И это работает во всех браузерах, независимо от поддержки JavaScript.
Можно пойти и дальше. Вы, возможно, встречали сайт, где предлагали настроить время автообновления. Это реализуется следующим образом:
<?php
$delay = isset($_POST[«delay»])? $_POST[«delay»]: 30;
?>
<!DOCTYPE html>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Refresh» content=»<?=$delay?>» />
</head>
<body>
<form name=»myform» action=»» method=»post»>
<p>Автообновление через: <input type=»text» name=»delay» /> секунд</p>
<p>
<input type=»submit» name=»send» value=»Сохранить» />
</p>
</form>
</body>
</html>
Вот так уже реализуется настраиваемое автообновление, и опять же мы обошлись лишь одним HTML и PHP.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 6 ):
Но ведь тогда страница будет перезагружаться и пользователя это будет я думаю раздражать. Лучше через AJAX получать новые данные и выводить без всяких перезагрузок
Скорей всего тогда будет нагружаться клиент.
бросается в глаза строчка <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> доктайп для html5 а потом идёт стока для xmlns, в начале не заработало а потом сохранил эту страницу с расширением php a не html на хосте и заработало
за то время пока тупил со скриптом выучил условный оператор $delay = isset($_POST["delay"])? $_POST["delay"]: 30; а также команду echo — <?=$delay?> 😉
А как сделать чтобы обновление было разовое(раз в сутки, или при первом входе на сайте), или два интервала. Скажем один через десять секунд, а второй через пару часов. Поскольку пользователь не находится на одной страницы чтобы ждать что через 15 минут добавиться что-то новое,а каждые 10 секунд можно здуреть, если страница будет обновляться.
А как сделать что бы обновлялась страница если пользователь в браузере нажал "назад". И та страница на которую он вернулся, обновилась? Желательно причем один раз.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Динамическое обновление веб-страницы
Никого уже не удивишь концепцией динамического HTML, почти все сайты давно в той или иной мере используют javascript для того, чтобы сделать страницы интерактивными. А с появлением технологии AJAX стало возможным асинхронно генерировать запросы к серверу, чтобы изменять старые данные на сервере или получать новые. Но как именно обновлять структуру страницы? Кто должен генерировать новый html — сервер или javascript? А может, все вместе?
Посмотрим, как можно ответить на эти вопросы.
Для начала, я опишу жизненный цикл страницы. Сразу скажу, что я не собираюсь описывать этот процесс досконально, здесь требуется только понимание основной логики процесса.
Любое веб-приложение можно логически поделить на две составляющие — на клиентскую часть и серверную часть. К клиентской части относятся сам браузер и скрипты, которые он выполняет, к серверной — набор скриптов, которые генерируют ответ на любой запрос пользователя.
Жизнь любой страницы начинается с запроса от клиента к серверу. Ответом будет код страницы, содержащий, помимо структуры и стилей, логику клиентской части.
После получения страницы с сервера, браузер отображает её и запускает на выполнение приложенные к ней скрипты.
Клиентская часть реагирует на различные события — например, на клик по некоторому элементу, перемещение мыши или на истечение таймера. Для того, чтобы получить какие-то данные с сервера(или отправить что-то на него), используются дополнительные, обычно асинхронные, запросы.
Пикантность начинается, когда необходимо в какой-то момент перерисовать некоторые компоненты на странице. Для того, чтобы обновить структуру страницы, скрипту клиента необходимо знать, что необходимо убрать, что и куда необходимо добавить, что на что заменить. Вот тут-то и появляются разные варианты, как организовать такие обновления.
Ближе к сути
Для удобства объяснения рассмотрим вариант обновления простой страницы с лентой новостей и, скажем, счетчиком подписчиков. Мы хотим, чтобы браузер регулярно проверял обновления ленты, добавляя новости по мере их появления. А еще мы хотим, чтобы каждый посетитель видел динамику роста популярности нашего сайта — пусть счетчик подписчиков тоже регулярно обновляется.
Тело нашей страницы может выглядеть, например, так:
Вариант 1 — дублирование
Основная идея — логику отображения знает и клиентская, и серверная часть. В таком случае, ответы на регулярные запросы со стороны клиента могут содержать исключительно данные — изменения в модели, и выглядеть, например, так:
При получении такого ответа клиентская часть «оборачивает» данные в html-теги, добавляет необходимые тексты и обновляет структуру страницы.
Серверу же знания об отображении нужны только для того, чтобы сгенерировать изначальную версию страницы.
- Малый объем трафика — передаются только необходимые данные;
- Требуется продублировать код — он будет и в клиентской части, и в серверной;
- Клиентская часть должна знать, как именно поступать с каждой порцией данных от сервера — иногда нужно заменить html элемента, иногда добавить новые данные к уже существующему коду;
Вариант 2 — всемогущий сервер и «толстые» ответы
Основная идея — логику отображения знает только сервер, клиентская часть получает уже готовый html-код элементов. Здесь ответ сервера выглядит так:
Замечу, что пересылается здесь весь html каждого компонента на странице. Реализуется же такой способ просто — сервер генерирует страницу по кускам, клиент при получении ответа заменяет тела отдельных элементов.
- Простота реализации;
- Отсутствие дублирования кода;
- Многократная генерация одного и того же кода, особенно неэффективно при небольших изменениях;
- Огромный объем трафика, особенно на больших страницах;
Вариант 2а — всемогущий сервер и «тонкие» ответы
Можно попытаться исправить главный недостаток предыдущего варианта. Сервер может не отправлять весь html компонента, а присылать только «дельту» — изменения, которые необходимо внести. Наш ответ тогда может стать таким:
Теперь клиент определяет элемент, который будет изменять, и то, как он его будет изменять, непосредственно из ответа сервера.
- Отсутствие дублирования кода;
- Все еще достаточно большой объем сетевого трафика;
- Клиент должен отправить серверу текущее состояние каждой компоненты, закодированное некоторым образом, чтобы сервер понял, относительно чего считать дельту;
- Сложность вычисления и записи дельты в случае нетривиальных изменений;
- Общее усложнение и клиентской, и серверной части;
Вариант 3 — всемогущий javascript
Можно переложить всю ответственность за генерацию html на клиента. В таком случае сервер будет только предоставлять данные, необходимые для отображения. Ответы, как и в первом варианте, будут содержать только данные:
Так в чем же существенное отличие от первого варианта? А заключается оно в том, что сервер не выполняет первоначальную генерацию страницы, её сборка осуществляется уже браузером клиента. Вариант этот только выглядит странным, он может пригодиться, если необходимо уменьшить нагрузку на сервер.
- Малый объем трафика — передаются только необходимые данные;
- Уменьшение нагрузки на сервер;
- Высокая нагрузка на компьютер пользователя;
- Возможна избыточность — часть знаний клиентской части об отображении может так и остаться невостребованной, если какие-то события не наступят;
Заключение
Каждый из рассмотренных методов имеет право на жизнь, и может быть использован в проектах разной сложности. Лично я во встреченных мною проектах чаще всего видел первый вариант, несмотря на нарушение им моего любимого принципа DRY — Don`t repeat yourself.
Автоматическое обновление страницы
Данная статья будет посвящена тому, как организовать автоматическое обновление страниц. В результате выполнения определенной команды, Ваш браузер будет обновлять страницу через заданный промежуток времени.
Кому может пригодится такой функционал для сайта. Лично я встречал такие циклические обновления на сайтах спортивной тематики. Когда идет какой-то матч в реальном времени, на сайте постоянно ведется текстовая трансляция и чтобы посетители постоянно не обновляли свой браузер, повторно нажимая на кнопку раз за разом, используется автоматическое обновление.
Если Вам нужен такой функционал, то решить поставленную задачу можно несколькими способами.
Самый простой способ осуществляется с помощью HTML, а конкретно с помощью тега meta.
Данную строку нужно добавить в шапке страницы между тегами head. Атообновление будет осуществятся каждые 5 секунд. Если Вам нужно ускорить или замедлить частоту, просто измените число.
Второй способ делает эту же работу, только с помощью JavaScript. Просто добавьте на Вашу страницу, такой вот код:
Время автоматического обновления задано в миллисекундах и составляет 5 секунд.
Последний способ осуществляется уже благодаря PHP. Просто добавьте в код страницы такую строку:
Тут, как и в предыдущих двух способах, время автообновления составляет 5 секунд.
Способ с PHP будет работать только в случаи, если хостинг где лежит Ваш сайт поддерживает PHP. Сейчас в 99% эта функция есть, но все же есть такие хостеры, которые предоставляют дешевые тарифные планы с отсутствием поддержки PHP и баз данных. Такие тарифы используют для размещения одностраничников или простеньких визиток.
Какой из способов выбрать, решать Вам. Главное, чтобы все работало так как нужно. Сделав все правильно, результат не заставит себя ждать.
На этом все, спасибо за внимание. ��
Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини 🙂