html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Mother of the gods, it is Surfingbird!

You finally got here. We've been waiting for you and we have so many interesting things!

Close

DOM Storage window broadcast

В статье речь пойдет об интересном DOM Storage эвенте, который позволяет выполнять броадкаст общение между окнами обраузера одного домена не подозревающих об существовании друг друга.

image

DOM Storage (localStorage sessionStorage) кроме потрясающей возможности хранения информации на клиенте имеет ещё одну документированную, но малоизвестную возможность — уведомление об изменении/удалении элемента DOM Storage для всех окон открытых из текущего домена.

В стандарте написано, что store эвент вызывается на всех окнах кроме текущего, когда произошло изменение данных в хранилище. Событие можно ловить на body оно всплывает на document и затем на window.
storage эвент открывает нам возможность для общения между окнами, которые не подозревают о существовании друг друга.

storage эвент доступен на FF 3.5+ Op 10.6+ Sa 4+ Ch 8+ IE 8+ (могу ошибаться)

Создадим тестовый пример. Суть его в следующем: есть родительское окно (которое не ловит сообщения), оно создает N дочерних окон, которые могут броадкастить какие-то данные и командовать остальными окнами.

Сперва создадим обработчики событий для всех окон
if ('v'=='\v') { // Note: IE listens on document
    document.attachEvent('onstorage', onStorage, false);
} else if (window.opera || webkit){ // Note: Opera and WebKits listens on window
    window.addEventListener('storage', onStorage, false);
} else { // Note: FF listens on document.body or document
    document.body.addEventListener('storage', onStorage, false);
}

Как оказалось все браузеры ведут себя кто во что горазд IE ловит эвент только на document, Опера и ВебКиты на window, а ФФ либо на document.body либо на document (наверно при проектировании плохо читали документацию).
Обработчик onStorage будет либо закрывать окно либо отображать какие-то данные.

Функция броадкаста
function broadcast(cmd){
    localStorage.setItem('command', cmd);
    if (window.opera || webkit) { 
        // Note: Opera and WebKits don't fire storage event on event source window
        // Do it manually
        onStorage();
    }
}

Опера и Вебкиты работают по стандарту, т.е. не вызывают storage на текущем окне, поэтому делаем вызов onStorage вручную (остальные разработчики опять плохо читали документацию).

Все готово.
Исходник gist.github.com/840221
Пример bit.ly/dVatda

Важно
1. Пример автоматически открывает 1-25 окон и ваш браузер (Opera, IE) может заблокировать второе окно. В опере перед началом эксперимента разрешите все всплывающие окна «F12 — Настройки — Основные — Всплывающие».
2. Все окна автоматически закроются.
3. В IE 8 броадкаст может не доходить до некоторых окон (баг вестимо), поэтому чтобы закрыть все окна надо будет нажать волшебную кнопку пару раз.

Куда можно применить DOM Storage window broadcast
Особых целей применения я не смог придумать. Пара из того, что получилось: синхронизация контента окон в динамических веб-приложениях, запрет открытия дополнительных окон из текущего домена в одном браузере (как показал эксперимент это отлично работает в опере, в остальных фактически не работает).
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

10

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • skypractic
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции