Авто перезагрузка страницы html
Автоматическое обновление страницы браузера на HTML, PHP и JavaScript
2015-04-15 / Вр:11:45 / просмотров: 64220
В сегодняшней статье я расскажу, как сделать автоматическое обновление страницы браузера на HTML, PHP и JavaScript.
Посчитал, что эта статья будет для вас полезной, так как недавно я разрабатывал один скрипт на php, где автоматическое обновление страницы браузера было просто необходимо. Я думаю, вы разберетесь, для чего вам нужна эта фишка с автоматическим обновлением браузера.
Теперь переходим к самому коду.
○ Автоматическое обновление страницы браузера на HTML
Чтобы автоматически обновлялась страница в браузере, на HTML страницах используют специальный мета-тег:
15 – это число, обозначающее время, через которое должна автоматически обновиться веб-страница (в секундах). Можете попробовать задать свое время, только в секундах.
Полный готовый код:
В результате, веб-страничка автоматически обновится через 15 секунд.
○ Автоматическое обновление страницы браузера на PHP
Чтобы автоматически обновлялась страница в браузере, на PHP страницах используют вот такой код:
15 – это секунды, через которые должна обновиться веб-страница. Я этот код устанавливаю в самом верху перед началом открытия html документа.
Полный готовый код:
В результате, веб-страничка автоматически обновится через 15 секунд.
○ Автоматическое обновление страницы браузера на JavaScript
Чтобы автоматически обновлялась страница в браузере, на JavaScript есть вот такой скрипт:
15000 – это миллисекунды, через которые должна обновиться веб-страница. Еще раз обращаю ваше внимание на время в миллисекундах, а не в секундах.
К сведенью: 1 секунда = 1000 миллисекунд.
Значит, 15 000 миллисекунд = 15 секунд.
Этот скрипт вставляют в html документ перед закрывающим тегом
Полный готовый код:
В результате, веб-страничка автоматически обновится через 15 секунд.
Автоматическое обновление страницы
Доброго времени суток. 🙂
Данная статья будет посвящена тому, как организовать автоматическое обновление страниц. В результате выполнения определенной команды, Ваш браузер будет обновлять страницу через заданный промежуток времени.
Кому может пригодится такой функционал для сайта. Лично я встречал такие циклические обновления на сайтах спортивной тематики. Когда идет какой-то матч в реальном времени, на сайте постоянно ведется текстовая трансляция и чтобы посетители постоянно не обновляли свой браузер, повторно нажимая на кнопку раз за разом, используется автоматическое обновление.
Если Вам нужен такой функционал, то решить поставленную задачу можно несколькими способами.
Самый простой способ осуществляется с помощью HTML, а конкретно с помощью тега meta.
Данную строку нужно добавить в шапке страницы между тегами head. Атообновление будет осуществятся каждые 5 секунд. Если Вам нужно ускорить или замедлить частоту, просто измените число.
Второй способ делает эту же работу, только с помощью JavaScript. Просто добавьте на Вашу страницу, такой вот код:
Время автоматического обновления задано в миллисекундах и составляет 5 секунд.
Последний способ осуществляется уже благодаря PHP. Просто добавьте в код страницы такую строку:
Тут, как и в предыдущих двух способах, время автообновления составляет 5 секунд.
Способ с PHP будет работать только в случаи, если хостинг где лежит Ваш сайт поддерживает PHP. Сейчас в 99% эта функция есть, но все же есть такие хостеры, которые предоставляют дешевые тарифные планы с отсутствием поддержки PHP и баз данных. Такие тарифы используют для размещения одностраничников или простеньких визиток.
Какой из способов выбрать, решать Вам. Главное, чтобы все работало так как нужно. Сделав все правильно, результат не заставит себя ждать.
На этом все, спасибо за внимание. 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂
Динамическое обновление веб-страницы
Введение
Никого уже не удивишь концепцией динамического HTML, почти все сайты давно в той или иной мере используют javascript для того, чтобы сделать страницы интерактивными. А с появлением технологии AJAX стало возможным асинхронно генерировать запросы к серверу, чтобы изменять старые данные на сервере или получать новые. Но как именно обновлять структуру страницы? Кто должен генерировать новый html — сервер или javascript? А может, все вместе?
Посмотрим, как можно ответить на эти вопросы.
Для начала, я опишу жизненный цикл страницы. Сразу скажу, что я не собираюсь описывать этот процесс досконально, здесь требуется только понимание основной логики процесса.
Любое веб-приложение можно логически поделить на две составляющие — на клиентскую часть и серверную часть. К клиентской части относятся сам браузер и скрипты, которые он выполняет, к серверной — набор скриптов, которые генерируют ответ на любой запрос пользователя.
Жизнь любой страницы начинается с запроса от клиента к серверу. Ответом будет код страницы, содержащий, помимо структуры и стилей, логику клиентской части.
После получения страницы с сервера, браузер отображает её и запускает на выполнение приложенные к ней скрипты.
Клиентская часть реагирует на различные события — например, на клик по некоторому элементу, перемещение мыши или на истечение таймера. Для того, чтобы получить какие-то данные с сервера(или отправить что-то на него), используются дополнительные, обычно асинхронные, запросы.
Пикантность начинается, когда необходимо в какой-то момент перерисовать некоторые компоненты на странице. Для того, чтобы обновить структуру страницы, скрипту клиента необходимо знать, что необходимо убрать, что и куда необходимо добавить, что на что заменить. Вот тут-то и появляются разные варианты, как организовать такие обновления.
Ближе к сути
Для удобства объяснения рассмотрим вариант обновления простой страницы с лентой новостей и, скажем, счетчиком подписчиков. Мы хотим, чтобы браузер регулярно проверял обновления ленты, добавляя новости по мере их появления. А еще мы хотим, чтобы каждый посетитель видел динамику роста популярности нашего сайта — пусть счетчик подписчиков тоже регулярно обновляется.
Тело нашей страницы может выглядеть, например, так:
Вариант 1 — дублирование
Основная идея — логику отображения знает и клиентская, и серверная часть. В таком случае, ответы на регулярные запросы со стороны клиента могут содержать исключительно данные — изменения в модели, и выглядеть, например, так:
При получении такого ответа клиентская часть «оборачивает» данные в html-теги, добавляет необходимые тексты и обновляет структуру страницы.
Серверу же знания об отображении нужны только для того, чтобы сгенерировать изначальную версию страницы.
Вариант 2 — всемогущий сервер и «толстые» ответы
Основная идея — логику отображения знает только сервер, клиентская часть получает уже готовый html-код элементов. Здесь ответ сервера выглядит так:
Замечу, что пересылается здесь весь html каждого компонента на странице. Реализуется же такой способ просто — сервер генерирует страницу по кускам, клиент при получении ответа заменяет тела отдельных элементов.
Вариант 2а — всемогущий сервер и «тонкие» ответы
Можно попытаться исправить главный недостаток предыдущего варианта. Сервер может не отправлять весь html компонента, а присылать только «дельту» — изменения, которые необходимо внести. Наш ответ тогда может стать таким:
Теперь клиент определяет элемент, который будет изменять, и то, как он его будет изменять, непосредственно из ответа сервера.
Вариант 3 — всемогущий javascript
Можно переложить всю ответственность за генерацию html на клиента. В таком случае сервер будет только предоставлять данные, необходимые для отображения. Ответы, как и в первом варианте, будут содержать только данные:
Так в чем же существенное отличие от первого варианта? А заключается оно в том, что сервер не выполняет первоначальную генерацию страницы, её сборка осуществляется уже браузером клиента. Вариант этот только выглядит странным, он может пригодиться, если необходимо уменьшить нагрузку на сервер.
Заключение
Каждый из рассмотренных методов имеет право на жизнь, и может быть использован в проектах разной сложности. Лично я во встреченных мною проектах чаще всего видел первый вариант, несмотря на нарушение им моего любимого принципа DRY — Don`t repeat yourself.
А какие принципы вы используете при разработке динамических страниц?
Если у Вас возникла ситуация, когда страницу сайта нужно периодически обновлять или просто перенаправить посетителя на другую страницу через определенный промежуток времени, то решением здесь может послужить использование специального метатэга «Refresh».
Вот пример для простой перезагрузки страницы, через определенный интервал времени:
Вот пример для перевода посетителя на другую страницу (сайт), через определенное время:
где после URL указывается страница (сайт), куда нужно перенаправить посетителя.
Этот прием может пригодиться Вам при использовании формы обратной связи. Когда человек заполнил форму, нажал кнопку «отправить» и его перебрасывает на обработчик, здесь можно поблагодарить человека и поставить метатэг «Refresh» для автоматического перенаправления человека на главную страницу сайта.
Кстати, урок по созданию формы обратной связи для сайта, Вы можете найти здесь: форма обратной связи.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Евгений Попов
Урок создан: 11 Мая 2008
Просмотров: 121864
Правила перепечатки
5 последних уроков рубрики «HTML и DHTML»
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.