Автообновление HTML-страниц в браузерах Chrome, Firefox и Opera
При кодинге достаточно удобной штукой является автообновление страницы в окне браузера. То есть, это когда в открытом редакторе (пускай это будет мой любимый Sublime Text) вносятся правки или изменения в самом HTML или CSS-коде, а в окне браузера сразу наглядно видны эти изменения. Очень удобная возможность именно благодаря своей наглядности.
Но вот “беда” — почти все популярные браузеры не обладают такой способностью изначально. Их этому нужно научить. Самый простой способ — это установить в них расширения или дополнения, предназначенные именно для этой цели. Другой, более сложный способ — это воспользоваться скриптом LiveReload. Также я видел на GitHub одноименное расширение под редактор Sublime Text.
Но сегодня я остановлюсь на самом простом способе — встраивание расширений в браузеры. Первоначально хотел сам написать обзор таких дополнений, но наткнулся в Интернете на статью, в которой уже был описан такой способ для Chrome, Firefox и Opera. Поэтому изменил свое решение и сделал вольный перевод статьи, текст которой привожу ниже.
Далее — перевод статьи.
Иногда при работе в Интернете может возникнуть необходимость в автообновлении страниц. Например, необходимо постоянно следить за счетом в online-игре, регулярно проверять новости или же с нетерпением ждать своих оценок на сайте колледжа. В предыдущей статье шла речь об online-сервисе, служащем для подобных задач — “Refresh This”. Однако на сегодня его уже не существует, он благополучно канул в лету. Но ведь потребность в такой задаче у нас осталась.
Если все же есть необходимость в таком Интернет-сервисе, то можно попробовать
lazywebtools
, но он кажется не слишком надежным.
Поэтому сегодня мы поговорим о возможности встраивания автообновления страниц прямо в браузер (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 — это перейти на любой из трех названных ранее, чтобы полноценно пользоваться всеми возможностями Интернета.
Автообновление страницы в браузере
Иногда появляется необходимость делать периодическое обновление страниц в браузере, например, у разработчиков сайтов в этом есть постоянная потребность. Чтобы браузер автоматически обновлял страницу можно написать мини-скрипт на jQuery, что очень долго и не каждому под силу. Можно поступить проще и настроить автообновление в любом современном браузере всего за пару минут. В этой статье мы рассмотрим, как сделать эту функцию в Google Chrome, Yandex Browser, Mozilla Firefox и Opera.
Автообновление в Google Chrome и Яндекс Браузер
Эти два браузера имеют в целом одинаковый функционал и интерфейс. В обоих браузерах пойдут расширения из каталога расширений от Google. Заходим в каталог от Google по этой ссылке https://chrome.google.com/webstore/category/apps. Он выглядит так:
Все приложения, размещённые в этом веб-магазине абсолютно совместимы с браузером Яндекса. Далее скачиваем и устанавливаем в браузере веб-приложение Easy Auto Refresh. Также можно пользоваться ChromeReload – это приложение имеет схожий функционал с Easy Auto Refresh, но оно более совместимо с Google Chrome. Вот как выглядит это расширение в каталоге:
Нажмете кнопку «установить», после чего приложение само установиться на ваш браузер. Затем выбираете с каким интервалом вам необходимо обновлять страницу (в секундах) и нажимаете «старт». Чтобы остановить автообновление нужно нажать «стоп». Автообновление будет производится на той странице, где вы производили настройки расширения в последний раз.
Автообновление в Mozilla Firefox
Гибкий и легко настраиваемый браузер. В самом браузере нет встроенной функции автообновления страниц, но её можно сделать при помощи расширений. Переходим в меню браузера, ищем «дополнения», затем в поиске вбиваем ReloadEvery и устанавливаем его. Браузер сам выполнит установку и попросит перезапуститься.
Когда расширение стало полностью функциональным, то можно настраивать автообновление страницы. Для этого щёлкните правой кнопкой мыши на нужной вкладке, в выпавшем меню выберете «автообновление», укажите нужный интервал и нажмите «включить».
Автообновление в Opera
В старых версиях этого браузера имеется встроенная функция автообновления страниц, в новой же версии такая функция не предусмотрена. Если у Вас старая версия браузера, то просто щёлкните правой кнопкой мыши по нужной вкладке в браузере и в появившемся меню выберите пункт «автообновление» или «reload every», затем произведите все необходимые настройки и включить автообновление.
Если у Вас стоит Opera новой версии, то делать откат до старой версии не стоит. Чтобы автообновления страниц стали доступны в вашей версии нужно зайти в официальный каталог расширений браузера (по этой ссылке https://addons.opera.com/ru). Ищем и устанавливаем расширение Super Auto Refresh.
После того как вы добавили расширение, перезапускаем браузер. Далее в адресной строке появляется специальный значок, с помощью которого вы можете настраивать автообновление страниц.
Как настроить автоматическое обновление страницы при написании HTML кода?
Доброго времени суток.
Подскажите пожалуйста, как настроить автоматическое обновление страницы при написании HTML кода (по принципу — я пишу и на втором мониторе в браузере сразу же отображаются изменения)?
Для написания кода пробовал Geany, Bluefish и Brackets.
UPD Пробовал приведенные ниже варианты. Изменения в браузере отображаются автоматически, но только после сохранения кода в редакторе. Может проблема в браузере (использую Google Chrome)?
- Вопрос задан более трёх лет назад
- 25764 просмотра
Как сделать автообновление страницы
На некоторых страницах требуется постоянное автообновление. Например, это могут быть текущие результаты какого-нибудь матча. Или это могут быть котировки валют или акций. В общем, задача есть, и нужно подобрать оптимальное решение для неё. И в этой статье я расскажу, как сделать автообновление страницы.
Большинство разработчиков сразу же побегут к JavaScript, однако, использовать его в этой ситуации совсем не нужно. Достаточно использовать HTML:
В результате, каждые 30 секунд страница будет перезагружаться. И это работает во всех браузерах, независимо от поддержки JavaScript.
Можно пойти и дальше. Вы, возможно, встречали сайт, где предлагали настроить время автообновления. Это реализуется следующим образом:
Вот так уже реализуется настраиваемое автообновление, и опять же мы обошлись лишь одним HTML и PHP.
Создано 12.04.2013 11:58:38
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 6 ):
lev_100rus 12.04.2013 15:07:30
Но ведь тогда страница будет перезагружаться и пользователя это будет я думаю раздражать. Лучше через AJAX получать новые данные и выводить без всяких перезагрузок
dima9595 12.04.2013 16:27:59
Скорей всего тогда будет нагружаться клиент.
Maks4ever 27.12.2014 02:46:43
бросается в глаза строчка доктайп для html5 а потом идёт стока для xmlns, в начале не заработало а потом сохранил эту страницу с расширением php a не html на хосте и заработало
Maks4ever 27.12.2014 02:48:44
за то время пока тупил со скриптом выучил условный оператор $delay = isset($_POST[«delay»])? $_POST[«delay»]: 30; а также команду echo — 😉
Centos 26.02.2016 22:12:47
А как сделать чтобы обновление было разовое(раз в сутки, или при первом входе на сайте), или два интервала. Скажем один через десять секунд, а второй через пару часов. Поскольку пользователь не находится на одной страницы чтобы ждать что через 15 минут добавиться что-то новое,а каждые 10 секунд можно здуреть, если страница будет обновляться.
Kuznecov138 21.01.2018 17:13:14
А как сделать что бы обновлялась страница если пользователь в браузере нажал «назад». И та страница на которую он вернулся, обновилась? Желательно причем один раз.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.