Internet Explorer 10: руководство для разработчиков

13 сентября 2011 г.

HTML5

Поддержка возможностей HTML5, описанных в рабочей версии спецификации HTML5, была добавлена в Internet Explorer 8, а затем расширена в Internet Explorer 9. Internet Explorer 10 и приложения Metro для Windows Developer Preview поддерживают еще больше возможностей этого новейшего стандарта, в том числе:

  • Асинхронное выполнение сценариев
  • Кэш приложений (AppCache)
  • Перетаскивание
  • Файловый API
  • Проверка форм
  • Элементы управления «progress» и «range»
  • История
  • Синтаксический анализ
  • «Песочница»
  • Рабочие веб-потоки
  • Обмен сообщениями по каналам
  • Подключения WebSocket
  • Проверка правописания

Важно. Эти возможности аналогичным образом работают в Internet Explorer 10 и приложениях Metro с использованием HTML.

Асинхронное выполнение сценариев

Атрибут async элемента script позволяет загружать и выполнять указанный сценарий асинхронно с остальной частью страницы. Иными словами, сценарий будет загружаться и выполняться в фоновом режиме, пока продолжается синтаксический анализ страницы. Атрибут async может существенно повысить скорость загрузки страниц, использующих сценарии с большим объемом вычислений.

Атрибут «async»

Атрибут async является частью стандарта HTML5 консорциума W3C и предназначен для ситуаций, когда элементы, зависящие от данного сценария, отсутствуют, а сценарий необходимо выполнить как можно скорее. Рассмотрим следующий гипотетический пример, вспомнив, что в отсутствие атрибута async (или defer) сценарий может заблокировать загрузку другого контента на странице.

Лилия ведет личный блог, в котором используется ряд виджетов на базе сценариев. Эти виджеты призваны предоставить посетителям блога дополнительные возможности, но вместе с тем страница остается работоспособной и без их загрузки (Лилия хочет обеспечить поддержку для пользователей, у которых отключено выполнение сценариев). В настоящий момент код для загрузки этих виджетов находится в начале HTML-файла, но пользователи жалуются, что страница загружается слишком долго из-за длительного выполнения сценариев. Лилия пыталась перенести сценарии в конец страницы, чтобы ускорить ее загрузку, но в этом варианте большое количество контента замедляет получение пользователем сценариев. Однако хозяйка блога хочет, чтобы нужные ей виджеты загружались как можно быстрее, не блокируя оставшуюся часть страницы. После недолгих поисков в Интернете Лилия выясняет, что атрибут async стандарта HTML5 — это именно то, что ей нужно. Поместив все свои сценарные виджеты во внешний файл, она оперативно запускает обновленный блог, где реализован более удачный баланс между производительностью и дополнительными возможностями на основе сценариев.

<head>
  <title>Lilah's Blog</title>
  <script async src="widgets.js"></script>
</head>

Сведения об атрибуте «async»

Internet Explorer 10 и приложения Metro поддерживают атрибуты async и defer для элемента script (атрибут defer поддерживается и в более ранних версиях Internet Explorer). Атрибуты async и defer могут использоваться только в том случае, если присутствует атрибут src. Возможны следующие четыре комбинации.

<script src="widgets.js"></script> Сценарий выполняется немедленно, и дальнейший синтаксический анализ страницы откладывается до его завершения. Это может существенно снизить скорость загрузки страницы.
<script async src="widgets.js"></script> Сценарий загружается асинхронно, а синтаксический анализ страницы в это время продолжается. Выполнение сценария начинается после окончания его загрузки.
<script defer src="widgets.js"></script> Сценарий выполняется после того, как будет закончен синтаксический анализ страницы.
<script async defer src="widgets.js"></script> Атрибут async соблюдается, а атрибут defer игнорируется. Это позволяет разработчикам пользоваться атрибутом async в браузерах, которые его поддерживают, и полагаться на атрибут defer в браузерах, которые не поддерживают async.


Подводя итоги, можно сказать, что атрибут async позволяет веб-разработчикам ускорить загрузку страниц с минимальной затратой усилий. За счет него также можно уменьшить число специфичных для отдельных браузеров обходных приемов, которые могут требоваться при работе с библиотеками загрузки сценариев.

API кэша приложений (AppCache)

Internet Explorer 10 и приложения Metro поддерживают API кэша приложений (или AppCache), чье определение приводится в спецификации HTML5. Такая возможность позволяет создавать веб-приложения, работающие в автономном режиме. AppCache позволяет веб-странице кэшировать (или сохранять) ресурсы локально, включая изображения, библиотеки сценариев, таблицы стилей и т. п. Кроме того, AppCache поддерживает открытие URL-адресов из кэшированного контента с помощью стандартных запросов универсального кода ресурса (URI).

Используя AppCache для локального сохранения ресурсов, вы повысите скорость обработки веб-страниц за счет сокращения количества запросов на сервер, где размещено приложение. Кроме того, вы активируете автономный доступ к кэшированным ресурсам.

Чтобы кэшировать ресурсы локально, выполните следующие действия:

  1. Создайте файл манифеста, где определены ресурсы, которые вы желаете сохранять.
  2. Создайте ссылку на файл манифеста на каждой веб-странице, предполагающей использование кэшированных ресурсов.

Создание файла манифеста

Файл манифеста — это текстовый файл, где определены правила кэширования для ресурсов, используемых веб-страницей, как показано в примере ниже.

CACHE MANIFEST

CACHE:
# Defines resources to be cached.
script/library.js
css/stylesheet.css
images/figure1.png

FALLBACK:
# Defines resources to be used if non-cached
# resources cannot be downloaded, for example
# when the browser is offline..
photos/ figure2.png

NETWORK:
# Defines resources that will not be cached.
figure3.png

Файлы манифеста должны содержать следующие разделы:

  • CACHE (КЭШ): в этом разделе определяются ресурсы для локального хранения. Так, в приведенном выше примере кэшируются три файла.
  • FALLBACK (РЕЗЕРВНАЯ ФОРМА): служит для определения ресурсов, которые будут использоваться в случае отсутствия доступа к другим ресурсам. Так, в этом примере файл figure2.png определен как резервное изображение для папки с фотографиями. Если браузер не может получить доступ к изображениям из папки с фотографиями (потому что браузер работает в автономном режиме или отсутствует соединение с сервером), недоступные изображения в обрабатываемой разметке будут заменены изображением figure2.png. В результате изображение figure2.png будет кэшировано локально.
  • NETWORK (СЕТЬ): позволяет указать ресурсы, к которым предоставляется доступ при наличии сетевого соединения и которые не кэшируются. В этом разделе можно использовать подстановочный знак (*) для указания, что все остальные ресурсы не следует кэшировать.

Файлы манифеста могут содержать любое количество разделов каждого вида. Разделы могут повторяться. Однако новые разделы должны начинаться с заголовка раздела с двоеточием, как показано в предыдущем примере. При отсутствии заголовка раздела считается, что был введен заголовок «CACHE:». В примере ниже приведен упрощенный манифест.

CACHE MANIFEST
script/library.js
css/stylesheet.css
images/figure1.png

Кроме того, для файлов манифеста должны соблюдаться следующие условия:

  • Они должны быть зашифрованы в формате UTF-8.
  • Должны снабжаться типом MIME «text/cache-manifest».
  • Должны начинаться со строки «CACHE MANIFEST».
  • Могут содержать комментарии, отделяемые от исполняемого кода знаком решетки (#).

Дополнительные сведения см. в синтаксисе манифеста кэша.

Объявление манифеста

Чтобы связать манифест с веб-страницей, присвойте имя файла манифеста атрибуту manifest элемента html, как показано в следующем примере:

<!doctype html>
<html manifest="appcache.manifest">
 <head>
  <title>A Web Page</title>
  <script src="library.js"></script>
  <link rel="stylesheet" href="stylesheet.css">
 </head>
 <body onload="doSomething();">
  <p>Results go here: <span id="results">Unknown</span></p>
 </body>
</html>

В этом примере веб-страница объявляет «appcache.manifest» как файл манифеста. Объявление манифеста интерпретируется точно так же, как любые другие ссылки на файлы. Поскольку в примере используется относительное имя файла, подразумевается, что манифест расположен в том же каталоге, что и сама веб-страница.

Примечание. Ссылки на файлы в манифесте интерпретируются относительно местоположения файла манифеста, а не веб-страницы, которая его объявляет.

Манифест не обязательно должен включать имя веб-страницы, которая его объявляет. Веб-страницы, объявляющие манифесты, кэшируются автоматически.

Объект ApplicationCache

Internet Explorer 10 также поддерживает объект ApplicationCache, предоставляющий методы и свойства для управления кэшем приложений. Кроме того, вы можете определять обработчики событий, которые показывают ход выполнения процесса кэширования.

Для доступа к объекту ApplicationCache можно использовать свойство applicationCache объекта window (или объекта worker), как показано в примере ниже.

var sCacheStatus = "Not supported";
if (window.applicationCache)
{
   var oAppCache = window.applicationCache;
   switch ( oAppCache.status )
   {
      case oAppCache.UNCACHED :
         sCacheStatus = "Not cached";
         break;
      case oAppCache.IDLE :
         sCacheStatus = "Idle";
         break;
      case oAppCache.CHECKING :
         sCacheStatus = "Checking";
         break;
      case oAppCache.DOWNLOADING :
         sCacheStatus = "Downloading";
         break;
      case oAppCache.UPDATEREADY :
         sCacheStatus = "Update ready";
         break;
      case oAppCache.OBSOLETE :
         sCacheStatus = "Obsolete";
         break;
      default :
        sCacheStatus = "Unexpected Status ( " +
                       oAppCache.status.toString() + ")";
        break;
   }
}
return sCacheStatus;

В этом примере свойство status используется, чтобы определить состояние кэша приложений для документа, в настоящий момент загружаемого веб-страницей.

Объект ApplicationCache поддерживает два метода управления кэшем. Метод update инициирует асинхронную проверку обновлений, похожую на процесс, запускаемый при первой загрузке веб-страницы. Любой существующий кэш будет использоваться до перезагрузки страницы или до вызова метода swapCache, поэтому чтобы начать использовать обновленный кэш, нужно либо перезагрузить страницу (вручную или программными методами), либо вызвать метод swapCache. Кэш обновляется при перезагрузке страницы, поэтому не обязательно вызывать метод swapCache перед перезагрузкой или обновлением веб-страницы.

Примечание. Обновленный кэш не используется веб-страницей до ее перезагрузки вручную или программными методами (с помощью метода reload или объекта window.location).

Объект ApplicationCache поддерживает следующие события:

  • Событие cached: генерируется после кэширования манифеста.
  • Событие checking: генерируется при обнаружении обновления.
  • Событие downloading: генерируется при загрузке указанных в манифесте ресурсов.
  • Событие progress: генерируется во время загрузки указанных в манифесте ресурсов.
  • Событие error: генерируется при наличии проблемы, например для возврата кода ответа HTML404 или 410. Это событие также запускается, если файл манифеста не может быть загружен.
  • Событие updateready: генерируется при наличии в доступе новой версии кэша.
  • Событие obsolete: генерируется, когда текущий кэш распознается как устаревший.

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

if (window.applicationCache) {
  var appCache = window.applicationCache;
   appCache.addEventListener('error', appCacheError, false);
   appCache.addEventListener('checking', checkingEvent, false);
   appCache.addEventListener('noupdate', noUpdateEvent, false);
   appCache.addEventListener('downloading', downloadingEvent, false);
   appCache.addEventListener('progress', progressEvent, false);
   appCache.addEventListener('updateready', updateReadyEvent, false);
   appCache.addEventListener('cached', cachedEvent, false);
}

Дополнительные сведения см. в материалах по теме Кэш приложений.

Перетаскивание

Операцию перетаскивания (drag-and-drop) пользователи воспринимают как нечто привычное и ожидают, что она будет работать всегда. В Internet Explorer 9 и более ранних версиях Internet Explorer поддерживается объект dataTransfer, а также специальные события для перетаскивания изображений, ссылок и текста. В Internet Explorer 10 добавлена поддержка атрибута draggable для любого элемента, а также поддержка перетаскивания одного или нескольких файлов с рабочего стола на веб-страницу.

Атрибут «draggable»

Атрибут draggable позволяет разрешить для любого HTML-элемента перетаскивание на странице. Он может иметь следующие состояния:

draggable = 'true' Контент поддерживает перетаскивание.
draggable = 'false' Контент не поддерживает перетаскивание.
draggable = 'auto' Контент наследует поведение, установленное для браузера по умолчанию (текст, ссылки и изображения могут перетаскиваться, а другие элементы — нет).


Например, следующий фрагмент кода позволяет пользователю перетаскивать элементы по экрану.

<button id="mybutton" draggable="true">Drag me</button>
<img src="photo.png" draggable="true" />
<div id="mydiv" draggable="true">Moveable text</div>

Когда пользователь перетаскивает элемент с атрибутом «draggable», Internet Explorer 10 создает фантомное изображение, которое движется вслед за курсором по мере перетаскивания. Атрибут «draggable» не является наследуемым, поэтому если вы хотите, чтобы дочерние элементы тоже можно было перетаскивать, для них придется задавать этот атрибут отдельно.

Атрибут «files» объекта «dataTransfer»

Добавление атрибута files к объекту dataTransfer позволяет перетаскивать файлы из папок или с рабочего стола на веб-страницу. Это может упростить создание таких программ, как почтовые клиенты, позволяющих перетаскивать вложения в сообщение или добавлять фотографии на страницу фотоальбома.

В примере ниже показано, как с помощью прослушивателя событий и функции dropHandler создать область, в которую пользователь может перетащить файл. Такой областью перетаскивания могут стать элементы div, image или другие элементы на странице. События dragover и drop используют функцию doNothing() для того, чтобы избежать обработки и восходящей маршрутизации события по умолчанию, что может привести к непредсказуемым последствиям.

// this function runs when the page loads to set up the drop area
function init()
{
  // Set the drop-event handlers
  var dropArea = document.getElementById("dropspot");
  dropArea.addEventListener("drop", dropHandler, false);
  dropArea.addEventListener("dragover", doNothing(event), false);
}
function dropHandler(event)
{
  // use our doNothing() function to prevent default processing
  doNothing(event);
  // get the file(s) that are dropped
  var filelist =  event.dataTransfer.files;
  if (!filelist) return;  // if null, exit now
  var filecount = filelist.length;  // get number of dropped files

  if (filecount > 0)
  {
    // Do something with the files.        
  }
}
// Prevents the event from continuing so our handlers can process the event.
function doNothing(event)
{
  event.stopPropagation();
  event.preventDefault();
}

Файловый API

В Internet Explorer 10 и приложениях Metro добавлена поддержка файлового API. Файловый API — это рабочая версия спецификации консорциума W3C для представления файловых объектов в веб-приложениях, который также позволяет программировать выбор таких объектов и предоставлять доступ к содержащимся в них данным. В настоящий момент файловый API проходит процедуру стандартизации в рабочей группе по веб-приложениям W3C. Используя файловый API, разработчики могут безопасно работать с локальными файлами на клиентском компьютере, не испытывая потребности в специальных расширениях или подключаемых модулях.

Подробные сведения

Файловый API позволяет читать файлы и выполнять с ними различные манипуляции из браузера или приложения, но только при условии, что пользователь даст на это разрешение. Кроме того, файловый API обеспечивает более удобную передачу файлов без использования подключаемых модулей.

В следующем примере использования файлового API консорциума W3C обработка хода операции, ошибок и успешного ее выполнения производится разными блоками кода:

function startRead() {
  // Obtain input element through DOM.

  var file = document.getElementById('file').files[0];
  if(file) {
    getAsText(file);
  }
}

function getAsText(readFile) {

  var reader = new FileReader();

  // Read file into memory as UTF-16     
  reader.readAsText(readFile, "UTF-16");

  // Handle progress, success, and errors
  reader.onprogress = updateProgress;
  reader.onload = loaded;
  reader.onerror = errorHandler;
}

function updateProgress(evt) {
  if (evt.lengthComputable) {
    // evt.loaded and evt.total are ProgressEvent properties.
    var loaded = (evt.loaded / evt.total);

    if (loaded < 1) {
      // Increase the progress bar length.
      // style.width = (loaded * 200) + "px";
    }
  }
}

function loaded(evt) { 
  // Obtain the read file data.   
  var fileString = evt.target.result;

// Handle UTF-16 file dump
  if(utils.regexp.isChinese(fileString)) {
    //Chinese Characters + name validation.
  }
  else {
    // Run other charset test.
  }
  // xhr.send(fileString)    
}

function errorHandler(evt) {
  if(evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
    // The file could not be read.
  }
}

Другие усовершенствования

Имеются и другие усовершенствования работы с файлами.

  • Возможность передачи нескольких файлов (размером до 4 ГБ на файл) с фильтрацией по типу файлов. В следующем примере пользователь может выбрать несколько файлов типа GIF или JPEG:
  • <input type="file" name="pic" multiple accept="image/gif, image/jpeg" />

Дополнительные сведения см. в следующих спецификациях W3C:

Проверка форм и входных данных

Internet Explorer 10 и приложения Metro поддерживают новые типы и атрибуты ввода HTML5. Это позволяет разработчикам быстро и легко реализовывать запрос к пользователю и проверку входных данных в минимальном объеме сценарного кода. Пока не поддерживались типы и атрибуты ввода HTML5, для проверки телефонного номера на отсутствие алфавитных символов или проверки формальной правильности адреса электронной почты разработчику приходилось писать дополнительный код, непосредственно выполняющий такую проверку. Поддержка проверки форм и входных данных на клиентской стороне по стандарту HTML5 позволяет разработчику сосредоточиться на других задачах вместо написания проверочных функций.

Новые типы ввода — «url» и «email»

Поддержка новых типов ввода HTML5 предоставляет в распоряжение разработчиков встроенные средства проверки URL-адресов и адресов электронной почты. Элемент для ввода URL-адресов (url) принимает только полный адрес, такой как https://www.contoso.com. Элемент для ввода адресов электронной почты (email) принимает адрес почты в стандартном формате, такой как joe@contoso.com. В следующих примерах, если пользователь неправильно введет URL-адрес или адрес электронной почты, Internet Explorer выведет сообщение об ошибке. 

<input type="url" name="url"/>
<input type="email" name="email"/>

Новые атрибуты ввода

В Internet Explorer 10 реализована поддержка новых атрибутов ввода HTML5, таких как required, pattern и placeholder. Они позволяют разработчикам гарантировать, что пользователи смогут вводить необходимые данные на странице, а также обеспечить правильность этих данных.

Атрибут «required»

Атрибутом required помечаются элементы, в которых обязательно должно быть введено значение. Этот атрибут можно установить для текста, текстовой области, URL-адреса, адреса электронной почты, раскрывающегося списка, флажка или переключателя. Это логический атрибут, и его необходимо указывать только для элемента. Когда пользователь наводит указатель мыши на обязательное (required) поле, отображается всплывающая подсказка с информацией о том, что данное поле является обязательным, или с заданным текстом, если разработчик установил атрибут title.

<form id="yourname">
  <label>Enter your first name:
    <input name="firstname" type="text" required><input type="submit" value="Go"/>
  </label>
</form>

Если пользователь попытается отправить форму, не введя каких-либо данных в это поле, он получит сообщение об ошибке, а фокус ввода переместится в поле с недостающими данными.

Атрибут «pattern»

Атрибут pattern позволяет задать регулярное выражение, соответствующее тому, которое должен ввести пользователь. Атрибут «pattern» доступен для элементов ввода text (текст), search (поиск), url (адрес ссылки), tel (телефон), email (эл. почта) и password (пароль).

<form>
<label>
  <input type="tel" name="tel" pattern="\(\d\d\d\) \d\d\d\-\d\d\d\d"
   title="enter a telephone number in   the format (xxx) xxx-xxxx"/>
  <input type="submit"/>
</label>
</form>

Атрибуты «min», «max» и «step»

Атрибуты min, max и step применимы при input type=number. Атрибуты min и max определяют минимальное и максимальное допустимое значение. Атрибут step задает допустимый шаг между значениями. Например, если атрибут min равен 0 и step равен 1, то разрешены значения 0, 1, 2, 3... Если min равен 1,1 и step равен 1, то разрешены значения 1,1; 2,1; 3,1... В примере ниже показаны поля ввода, куда требуется ввести четные числа между 0 и 10. Любые числа за границами этого диапазона, а также нечетные числа не будут приняты: в случае их ввода будет отображаться сообщение об ошибке.

<form>
  <label>Enter an even number between 0 and 10:
    <input type="number" min="0" max="10" step="2"/>
    <input type="submit"/>
  </label>
</form>

Атрибут «placeholder»

Направить пользователей к нужному полю ввода и показать им, как правильно вводить данные, — чаще всего означает, что половина задачи по получению достоверных сведений выполнена. Поддержка описаний заполнителей HTML5 позволит дать пользователям указания по вводу правильных данных в поля формы.

placeholder Текст. Представляет собой краткую подсказку или пример, который отображается в поле ввода. Доступен для элементов ввода text, url, text area (текстовая область) и email.

Атрибут placeholder позволяет разработчику отобразить в поле ввода пример правильных входных данных.

<input name="url" type="text" placeholder="http://www.contoso.com" />

Приведенная выше разметка предписывает отображать в поле ввода текст из атрибута placeholder, пока в это поле не переместится фокус ввода с клавиатуры.

Атрибут placeholder может использоваться с элементами ввода типа «текст» или «текстовая область», а также с новыми текстовыми элементами ввода url, tel и email.

Стилевое оформление атрибута «placeholder»

По умолчанию текст атрибута «placeholder» светло-серого цвета, однако вы можете изменить его с помощью выбора псевдокласса -ms-input-placeholder. В примере ниже поля для ввода адреса и почтового индекса выделены специальным стилем.

<!DOCTYPE html >
<html>
<head>
  <title>Placeholder style example</title>
  <style type="text/css">
  input  /* normal style */
  {
    background-color:LightGray;
    color:Purple;
  }  
  input.address:-ms-input-placeholder /* placeholder only style */  
  {
    font-style:italic;       
    background-color:yellow;
    color:Red;
  }

  </style></head>
<body>
  <form id="test">
    <p><label>Enter Name: <input id="name" placeholder="Your Name"/></label></p>
    <p><label>Enter Street: <input id="street" class="address"
placeholder="Your address" /></label></p>
    <p><label>Enter a zip code: <input type="num" pattern="(0-9){5}"
id="zip" class="address" placeholder="5 digit zip" /></label></p>
    <input type="submit" />
  </form>
</body>
</html>

Текст заполнителя отображается заданным стилем в поле ввода, пока оно не получит фокус, т. е. не будет готово к вводу данных. Когда фокус ввода окажется в поле, оно примет свой обычный вид и текст заполнителя исчезнет.

Атрибут «autofocus»

Атрибут autofocus позволяет разработчикам устанавливать фокус ввода в конкретное поле после загрузки страницы. Это действие служит подсказкой для пользователя и повышает удобство работы, избавляя от необходимости щелкать мышью в нужном поле или переходить в него нажатием клавиши TAB.

autofocus Логическое значение. Задает поле, в котором должен находиться фокус ввода после загрузки страницы. Применимо ко всем элементам управления формы.

Атрибут autofocus может быть только у одного элемента управления в документе. Если этот атрибут указан у нескольких элементов, фокус ввода после загрузки страницы переходит только к первому из таких элементов. Это логический атрибут, т. е. его присутствие подразумевает значение «true».

<input name="email" type="text" placeholder="joe@contoso.com " autofocus />

Атрибуты «formnovalidate» и «novalidate»

Атрибуты formnovalidate и novalidate разрешают отправку формы без проверки. Их можно использовать для реализации кнопки Save for Later (Сохранить на текущем этапе) в форме, где пользователь заполнил не все обязательные поля. Следующий пример демонстрирует оба атрибута в действии. Атрибут formnovalidate устанавливается для кнопки Submit(Отправить), а атрибут novalidate — для элемента form, или формы, которой принадлежат элементы внутри тегов.

<!DOCTYPE html>
<html >
<head>
  <title>no validate example</title>
</head>
<body>
  <form>
    <p><label>*Name: <input type="text" required /></label></p>
    <p><label>*Street: <input type="text" required /></label></p>
    <p><label>*Zip: <input type="text" pattern= "[0-9](5|10)" placeholder="5 or 9 digit ZIP"
required /></label></p>    <input type="submit" name=submit value="submit" />
    <input type="submit" formnovalidate name="save" value="just save" />
    <p>* Required field</p>
  </form>  <form novalidate>
    <p>Unvalidated area</p>
    <p><label>Name: <input type="text" required /></label></p>
    <p><label>Street: <input type="text" required /></label></p>
    <p><label>Zip: <input type="text" pattern= "[0-9](5|10)" placeholder="5 or 9 digit zip"
required /></label></p>
    <input type="submit" name=submit value="submit" />
  </form>
</body>
</html>

Настройка сообщений об ошибках проверки

Internet Explorer 10 отображает ряд стандартных сообщений о разнообразных ошибках проверки. Если использовать атрибут title, его значение будет отображаться в качестве подсказки (tooltip) для поля ввода и присоединяться к сообщению о несоответствии шаблону. В следующем примере показано, как поле для ввода номера телефона может подсказывать пользователям правильный формат вводимых значений.

<form>
  <label>Enter a phone number:
  <input type="text" title="xxx-xxx-xxxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
  <input type="submit" />
  </label>
</form>

Если пользователь опустит дефисы или введет в поле буквы вместо цифр, появится следующее сообщение:

Предупреждение о включенном режиме CAPS LOCK в полях ввода пароля

Чтобы помочь пользователям избежать ввода неверного пароля, Internet Explorer 10 показывает предупреждение, если пользователь вводит данные в поле пароля при включенном режиме CAPS LOCK. Никакого дополнительного кода для этого не требуется.

Стилевое оформление проверяемых полей с помощью новых псевдоклассов

Обратная связь о допустимости введенных данных может лучше восприниматься пользователем, чем сообщение об ошибке. Internet Explorer 10 поддерживает псевдоклассы CSS — :valid и :invalid. Это позволяет вам задавать стилевое оформление полей ввода в зависимости от типа ввода и требуемого шаблона (если он нужен). Например, поле URL-адреса может отображаться в красной рамке, пока в него не будет введен адрес в правильном формате. Содержимое обязательного поля будет считаться недопустимым, пока в него не будут введены правильные данные. Содержимое необязательного поля, предусматривающего проверку (например, поля URL-адреса), будет считаться допустимым до ввода текста.

Можно также задавать стиль отображения обязательных и необязательных полей с помощью псевдоклассов :required и :optional.

В примере ниже поля, куда введены допустимые данные, окружены зеленой рамкой, поля, куда введены недопустимые — красной, а текст в них выделен полужирным шрифтом. Поле email является обязательным, а остальные — нет. Поле URL предварительно заполнено неправильным URL-адресом, поэтому отображается как недопустимое при открытии страницы. Кроме того, двум необязательным полям назначается светло-серый фон, а обязательному полю — привлекающий внимание желтый фон.

<!DOCTYPE html >
<html>
<head>
  <title>PseudoClass example</title>
  <style type="text/css">

  #PC1 input:valid {
    border :solid lime;
    font-weight:normal;
  }
  #PC1 input:invalid {
    border:solid red;
    font-weight:bold;
  }
  #PC1 input:required{
    background-color:Yellow;
  }
  #PC1 input:optional{
    background-color:LightGray;
  }      
  </style>
</head>
<body>
  <form id="PC1">
    <p><label>Enter some text: <input type="text"/></label></p>
    <p><label>*Enter a valid email address: <input type="email" required /></label></p>
    <p><label>Enter a valid URL: <input type="url" value="not a url"/></label></p>      
    <p>* required field</p>
  </form>
</body>
</html>

При таком стилевом оформлении поля дают пользователю непосредственную обратную связь в процессе ввода данных.

Методы и свойства модели DOM для проверки входных данных

В Internet Explorer 10 добавлены новые API для информирования о результатах проверки форм и элементов из JavaScript.

Метод «checkValidity» (для HTMLFormElement)

Метод checkValidity выполняет статическую проверку ограничений на элемент form. При положительном результате проверки возвращается значение «true», при отрицательном — «false».

Метод «checkValidity» (для HTMLInputElement и других элементов формы)

Метод checkValidity проверяет введенные в элемент данные и возвращает «true», если они допустимы, и «false» — в противном случае. Если содержимое элемента недопустимо, при этом генерируется простое событие «invalid», которое может быть отменено, но не имеет обработчика по умолчанию.

Атрибут «willValidate»

Атрибут willValidate возвращает значение «true», если элемент предусматривает проверку (элементы url или email, а также другие элементы с установленным атрибутом validation), и «false» — в противном случае.

Атрибут «validity»

Атрибут validity возвращает объект состояния допустимости (ValidityState) для элемента. Объект является динамическим: каждый раз при извлечении атрибута возвращается тот же самый объект.

Атрибут «validationMessage»

Атрибут validationMessage возвращает сообщение об ошибке, которое выводится в текущем состоянии формы.Например, если в момент чтения атрибута форма отправлена, ее данные считаются недопустимыми.

Метод «setCustomValidity» (в ошибке DOMString)

Метод setCustomValidity задает для элемента нестандартное сообщение об ошибке проверки.

Объект «ValidityState»

Объект ValidityState возвращает значение «true» или «false» для следующих логических атрибутов, доступных только для чтения:

  • valueMissing — пользователь не ввел значение в обязательное поле.
  • typeMismatch — пользователь ввел данные с несоблюдением синтаксиса (например, некорректный URL-адрес или адрес электронной почты).
  • patternMismatch — пользователь ввел данные, не соответствующие описанию в атрибуте pattern (например, буквы вместо ожидавшихся цифр).
  • tooLong — элемент управления содержит значение, длина которого превышает значение атрибута maxlength. Поскольку Internet Explorer разрешает пользователю вводить число символов, не превышающее maxlength, это обычно происходит, когда значение по умолчанию содержит слишком много символов.
  • rangeUnderflow — пользователь ввел значение, которое меньше заданного атрибутом min.
  • rangeOverflow — пользователь ввел значение, которое больше заданного атрибутом max.
  • stepMismatch — пользователь ввел значение, не соответствующее правилам атрибута step. Например, введено нечетное число вместо четного.
  • customError — у элемента управления имеется сообщение ошибке, установленное с помощью метода setCustomValidity() данного элемента (строка не пуста).
  • valid — введенные данные не соответствуют остальным условиям.

Элементы управления «progress» и «range»

Элемент «progress» и элемент ввода состояния «range» обеспечивают поддержку двух новых методов контроля HTML5.

Элемент «progress»

Элемент progress, определенный в рабочей версии спецификации HTML5 консорциума W3C, теперь позволяет создавать панель, которая показывает ход выполнения задачи (в определенном режиме) или то, что задача в процессе выполнения, но процент выполнения неясен (в неопределенном режиме), а также сочетать эти два варианта. Например, вы можете начать отображение панели с неопределенным ходом выполнения задачи, а после того, как выясните, сколько займет выполнение того или иного процесса, переключиться к соответствующему состоянию.

Чтобы вставить индикатор выполнения задачи, который показывает только наличие процесса, вам достаточно не задавать атрибут «value». Как только вы задаете элементу атрибут «value» или присваиваете значение в сценарии, панель становится определенной. Панель начинается с нулевого значения и продолжается вплоть до значения, которое вы зададите максимальным в атрибуте. Если вы не зададите максимального значения («max») в атрибуте, ход выполнения задачи будет иметь значения от «0» до «1». И «value» и «max» являются числами с плавающей точкой.

Синтаксис неопределенного режима

<progress>fallback text</progress>

Синтаксис определенного режима

<progress id="progCtrl" max="100" value="50">fallback text</progress>

Если браузер пользователя не поддерживает управление ходом выполнения задачи HTML5, вы можете поместить между тегами резервный текст (здесь помечен как «резервный код»). Возможно, вы захотите отобразить значение в виде текста между тегами. Например, вы можете написать некий сценарий для обновления резервного текста фразами вроде: «Настоящая задача выполнена на 30 %». Элемент управления «progress» также имеет свойство «position» (положение), равное значению «value» или «max» либо же «-1» (для неопределенного режима). Это свойство не является атрибутом контента.

Элемент управления «range»

Атрибут ввода «input = "range"», определенный в рабочей версии спецификации HTML5 консорциума W3C, позволяет вам создавать такой элемент управления вводом, как «range» — что означает «ползунок». Элемент управления «range» требует присвоения четырех атрибутов («min», «max», «step» и «value») для определения диапазона и шага ползунка. В примере ниже создан ползунок, который передвигается от 0 до 100 с шагом 5, причем предварительно установлен на значении 50.

Синтаксис элемента управления «range»

<input type="range" min="0" max="100" step="5" value="50"/>

Если элемент управления «range» не поддерживается браузером пользователя, то, будучи элементом ввода, по умолчанию обрабатывается как текстовое поле со значением внутри.

В примере ниже сочетаются элементы управления «range» и «progress». Когда вы загружаете страницу первый раз, элемент «progress» находится в неопределенном режиме (ему не присвоено значение). Когда вы передвигаете ползунок, элементу управления «progress» присваивается значение и оба элемента синхронизируются.

<!DOCTYPE html>
<html>
<head>
    <title>Range and progress example</title>
    <style type="text/css">
    input[type=range]
    {
        padding-left: 0px;
        padding-right: 0px;
    }
    </style>
    <script type="text/javascript">
        function changeValue() {
            document.getElementById("progCtrl").value = document.getElementById("rangeCtrl").value;
        }
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById("rangeCtrl").addEventListener('change', changeValue, false);
        }, false);
    </script>
</head>
<body>
<progress id="progCtrl" max="100" >Sorry, your browser doesn't support the progress element.</progress>
<br>
<br>
<input id="rangeCtrl" type="range" min="0" max="100" step="5" value="50"/>
</body>
</html>

История

Internet Explorer 10 теперь поддерживает рабочую версию спецификации истории для HTML5, которая включает методы, позволяющие веб-разработчикам управлять стеком истории и URL сайта. Эта возможность дает пользователям привычный контроль над своими действиями с помощью кнопок «вперед» и «назад», а также возможность обновлять небольшие страницы без переходов или обновлений.

Примечание. Методы истории HTML5 не действуют в приложениях Metro.

Методы «history.pushState()» и «history.replaceState()»

С помощью метода history.pushState() вы можете добавить новый элемент в историю, а также, по желанию, включить объект состояния. Благодаря методу history.replaceState() вы можете модифицировать текущий элемент истории.

Синтаксис

history.pushState(data, title, url);
history.replaceState(data, title, url);

data Объект состояния, который вы можете связать с новым элементом истории. Возвращает свойство состояния события popState.
title По желанию вы можете добавить заголовок. В настоящий момент игнорируется.
url Относительный или абсолютный URL-адрес в том же домене или того же происхождения, что и текущий URL-адрес.


С помощью этих новых методов HTML5 вы можете модифицировать путь или хэш (информацию после знака решетки в адресе URL), однако из соображений безопасности изменить домен или происхождение текущего URL нельзя.

Событие «window.onpopstate»

Событие window.onpopstate уведомляет ваше приложение, когда пользователь щелкает кнопки «вперед» или «назад» либо когда вызваны методы history.pushState() или history.replaceState(). Следующий синтаксис показывает, как провести разграничение между двумя вариантами для вашего обработчика событий.

window.onpopstate = function(event){
  if (event.state) {
      // History was changed with pushState or replaceState.
  } else {
      // A page load occurred.
  }
}

Параметр события popstate содержит состояние (заданное параметром «data») из методов pushState или replaceState. Если страница загружена, состояние будет неопределенным.

Синтаксический анализ

Internet Explorer 10 и приложения Metro полностью поддерживают алгоритм синтаксического анализа HTML5, продолжая начатую в предыдущих выпусках работу по обеспечению единообразного функционирования HTML-кода в различных браузерах. В частности, сюда относится поддержка векторной графики SVG в HTML и семантических элементов HTML5, сохранение структуры неизвестных элементов и совершенствование распределения пустого пространства.

Обеспечение правильного поведения

Цель работы группы разработчиков Internet Explorer над синтаксическим анализатором HTML состоит в том, чтобы результат анализа HTML был одинаков во всех современных браузерах. Это стало возможным потому, что HTML5 — первая версия HTML, в которой правила синтаксического анализа определены полностью, вплоть до последнего пограничного случая и последней ошибочной ситуации. Даже если ваша разметка недопустима, HTML5 все равно задает правила ее анализа, а Internet Explorer 10 следует этим правилам. В следующих примерах синтаксического анализа демонстрируется несколько ситуаций, когда усовершенствования помогли исправить ошибку.

HTML DOM (HTML5 + IE10) DOM (IE9)
<b>1<i>2</b> |- <b>
|- "1"
|- <i>
|- "2"
|- <b>
|- "1"
|- <i>
|- "2"
|- <i>
<p>Test 1
<object>
<p>Test 2
</object>
|- <p>
|- "Test 1\n"
|- <object>
|- "\n "
|- <p>
|- "Test 2\n"
|- <p>
|- "Test 1\n"
|- <object>
|- "\n "
|- <p>
|- "Test 2\n"

Совместимое свойство «innerHTML»

Эти усовершенствования относятся и к свойству innerHTML.Фрагменты кода, подобные приведенному ниже, в Internet Explorer 10 будут работать в соответствии с ожиданиями:

var select = document.createElement("select");
select.innerHTML = "<option>one</option><option>two</option>";
var table = document.createElement("table");
table.innerHTML = "<tr><td>one</td><td>two</td></tr>";

Улучшенные отчеты об ошибках для разработчиков

HTML5 обеспечивает единообразный синтаксический анализ разметки, но разработчики все равно должны стремиться изначально создавать допустимую разметку. Благодаря корректной разметке ваш сайт будет работать именно так, как вы ожидаете, и будет лучше совместим с более старыми браузерами.

Чтобы помочь разработчикам в систематическом написании допустимой разметки, в IE10 Platform Preview отчеты об ошибках синтаксического анализа HTML теперь реализованы с использованием инструментов разработчика, вызываемых клавишей F12, как показывает следующий снимок экрана:

Примечание. Инструменты разработчика, вызываемые клавишей F12, недоступны в приложениях Metro.

Прекращение поддержки устаревших возможностей

Некоторые возможности в более ранних версиях Internet Explorer несовместимы с синтаксическим анализатором HTML5, поэтому они были удалены из режима IE10 в Internet Explorer 10. Веб-сайты, которые используют устаревшие возможности из этого раздела, будут работать при запуске в режиме совместимости с устаревшими версиями. Таким образом, сайт, который работает сегодня, будет работать и в Internet Explorer 10, даже если у разработчиков сайта нет времени или ресурсов для его модернизации (для получения более подробной информации о режимах совместимости см. статью Defining Document Compatibility (Определение совместимости документов) в библиотеке MSDN).

Условные комментарии

Возможность использовать условные комментарии, подобные изображенному ниже, остается, но они будут действовать лишь в более старых версиях Internet Explorer. Если есть необходимость различать современные браузеры, используйте функцию определения возможностей.

<!--[if IE]>
This content is ignored in Internet Explorer 10 and other browsers.
In older versions of Internet Explorer, this renders as part of the page.
<![endif]-->

Поведение элементов

Поведение элементов, которое, начиная с Internet Explorer 5.5, стало возможным задавать и которое было описано здесь, теперь не распознается Internet Explorer 10 при работе в режиме IE10.

<html xmlns:my>
<?import namespace="my" implementation="my.htc">
<my:element>
This parses as an unknown element in Internet Explorer 10 and other browsers.
In older versions of Internet Explorer, this markup binds to "my.htc".
</my:element>
</html>

Острова данных XML

Острова данных XML, введенные в Internet Explorer 5.0 и описанные здесь, более не подвергаются разбору в Internet Explorer 10 при работе в режиме IE10.

<xml>
This parses as <b>HTML</b> in Internet Explorer 10 and other browsers.
In older versions of Internet Explorer, it parses as XML.
</xml>

«Песочница»

Internet Explorer 10 и приложения Metro поддерживают атрибут «sandbox» («песочница»), который активирует ограничения безопасности для элементов iframe, содержащих подозрительный контент. Такие ограничения повышают уровень безопасности, предотвращая потенциально вредоносные действия подозрительного контента.

Чтобы включить эти ограничения, укажите атрибут «sandbox», как показано в следующем примере кода.

<iframe sandbox src="frame1.html"></iframe>

Когда атрибут «sandbox» указан для элемента iframe, контент такого элемента называют изолированным.

Поведение, не допускаемое в «песочнице»

Для изолированных элементов iframe действуют следующие ограничения на выполняемые действия.

  • Изолированный контент не может вызывать всплывающие окна или новые окна браузера. Методы, открывающие всплывающие окна (такие как createPopup(), showModalDialog(), showModelessDialog() и window.open()) не работают без уведомления.
  • Открытие ссылок в новых окнах невозможно.
  • Изолированный контент считается происходящим из уникального домена, в результате чего блокируется доступ к API, защищенным политикой идентичного происхождения, таким как файлы cookie, локальное хранилище и модель DOM других документов.
  • Изолированный контент не может перемещать верхнее окно.
  • Для изолированного контента не разрешена отправка данных форм.
  • Экземпляры подключаемых модулей (object, applet, embed или frame) не создаются.
  • Автоматическое поведение элементов, в том числе обновление элементов meta, автоматическая установка фокуса ввода на элементы управления полями input, а также автоматическое воспроизведение (autoplay) элементов audio и video отключаются.
  • Для изолированного контента блокируются избранные возможности, специфичные для Internet Explorer, в том числе HTML-компоненты (HTC), двоичное поведение, связывание данных и window.external.

Настройка ограничений «песочницы»

Internet Explorer 10 и приложения Metro позволяют вам настроить избранные ограничения «песочницы». Для этого укажите один или более флагов настройки как значения атрибута «песочницы».

allow-scripts Изолированному контенту разрешается выполнение JavaScript.
allow-forms Изолированному контенту разрешается отправка форм.
allow-same-origin Изолированному контенту разрешается доступ к API, защищенным политикой идентичного происхождения, в том числе локальному хранилищу, файлам cookie, XMLHttpRequest и документам, размещенным в том же домене.
allow-top-navigation Изолированному контенту разрешается менять положение верхнего окна.
ms-allow-popups Изолированному контенту разрешается открывать всплывающие окна.


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

<iframe sandbox="allow-forms allow-same-origin" src="frame1.html"></iframe>

Этот пример разрешает отправку форм и доступ к локальным источникам данных. Имейте в виду, что флаги настройки, если их несколько, должны разделяться пробелами.

Рабочие веб-потоки

В Internet Explorer 10 и приложения Metro добавлена поддержка рабочих веб-потоков. API рабочих веб-потоков определяет способ выполнения сценариев в фоновом режиме.

Традиционно браузеры были однопоточными, из-за чего все сценарии в веб-приложении выполнялись в одном и том же потоке пользовательского интерфейса. Хотя можно создать иллюзию одновременного выполнения нескольких действий, используя события DOM и API setTimeout, достаточно одной требовательной к вычислительным ресурсам задачи, чтобы остановить всю работу пользователя.

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

var myWorker = new Worker('worker.js');

Весь обмен данными с рабочим потоком осуществляется посредством сообщений. Как сам рабочий поток, так и рабочий сценарий могут передавать друг другу сообщения, вызывая метод postMessage и ожидая отклика с использованием события onmessage. Контент пересылается в свойстве data сообщения.

В следующем примере создается рабочий поток и ожидается сообщение.

var hello = new Worker('hello.js');
hello.onmessage = function(e) {
  alert(e.data);
};

Рабочий поток передает сообщение для отображения.

postMessage('Hello world!');

Двусторонняя связь с рабочими веб-потоками

Для организации двусторонней связи основная страница и рабочий поток прослушивают событие onmessage. В следующем примере рабочий поток возвращает сообщение по истечении заданного времени задержки.

Сначала в сценарии создается рабочий поток.

var echo = new Worker('echo.js');
echo.onmessage = function(e) {
  alert(e.data);
}

Текст сообщения и время задержки задаются в форме. Когда пользователь нажимает кнопку Submit (Отправить), сценарий передает эти два элемента данных рабочему потоку в литерале объекта JavaScript. Чтобы предотвратить отправку значений форм со страницы в новом HTTP-запросе, обработчик события также вызывает метод preventDefault объекта события. Обратите внимание, что в рабочий поток не могут передаваться ссылки на объекты DOM. Рабочим веб-потокам разрешен доступ лишь к ограниченному кругу данных. Допускается передача только примитивов JavaScript, таких как значения типов «object» или «string».

<script>
window.onload = function() {
  var echoForm = document.getElementById('echoForm');
  echoForm.addEventListener('submit', function(e) {
    echo.postMessage({
      message : e.target.message.value,
      timeout : e.target.timeout.value
    });
    e.preventDefault();
  }, false);
  }
</script>
<form id="echoForm">
  <p>Echo the following message after a delay.</p>
  <input type="text" name="message" value="Input message here."/><br/>
  <input type="number" name="timeout" max="10" value="2"/> seconds.<br/>
  <button type="submit">Send Message</button>
</form>

Наконец, рабочий процесс ожидает прихода сообщения и возвращает его по истечении заданного времени задержки.

onmessage = function(e)
{
  setTimeout(function()
  {
    postMessage(e.data.message);
  },
  e.data.timeout * 1000);
}

В Internet Explorer 10 и приложениях Metro API рабочих веб-потоков поддерживают следующие методы, атрибуты и события.

Метод Описание
void close(); Прерывает выполнение рабочего потока.
void importScripts(in DOMString... urls); Разделенный запятыми список дополнительных файлов JavaScript.
void postMessage(in any data); Передает сообщение в рабочий поток или из него.
Атрибуты Тип Описание
location WorkerLocation Представляет абсолютный URL-адрес, включая компоненты protocol, host, port, hostname, pathname, search и hash.
navigator WorkerNavigator Представляет идентификатор и состояние onLine клиента пользовательского агента.
self WorkerGlobalScope Область рабочего потока, включающая объекты WorkerLocation и WorkerNavigator.
Событие Описание
onerror Произошла ошибка на этапе выполнения.
onmessage Получены данные сообщения.

Оконные таймеры (WindowTimers)

API рабочих веб-потоков также поддерживает обновленную функциональность оконных таймеров (WindowTimers) HTML5.

Метод Описание
void clearInterval(in long handle); Отменяет тайм-аут, заданный дескриптором.
void clearTimeout(in long handle); Отменяет тайм-аут, заданный дескриптором.
long setInterval(in any handler, in optional any timeout, in any... args); Задает многократное повторение тайм-аута через заданный интервал времени в миллисекундах. Обратите внимание, что теперь можно напрямую передавать дополнительные аргументы в обработчик. Если обработчик представляет собой объект DOMString, он компилируется как JavaScript. Возвращает дескриптор для тайм-аута. Очистка производится методом clearInterval.
long setTimeout(in any handler, in optional any timeout, in any... args); Задает выполнение тайм-аута по истечении заданного интервала времени в миллисекундах. Обратите внимание, что теперь можно напрямую передавать дополнительные аргументы в обработчик. Если обработчик представляет собой объект DOMString, он компилируется как JavaScript. Возвращает дескриптор для тайм-аута. Очистка производится методом clearTimeout.

Обмен сообщениями по каналам

В Internet Explorer 10 и приложения Metro добавлена функциональность обмена сообщениями по каналам. Это позволяет коду в различных контекстах обзора напрямую обмениваться данными через порты. Эта функциональность является частью спецификации обмена сообщениями между документами в HTML5. После создания портов связь между конечными точками осуществляется с использованием комбинации метода postMessage и события onmessage.

Чтобы открыть канал, создайте объект MessageChannel, как показано ниже:

var channel = new MessageChannel();

Объект канала содержит обе конечные точки — port1 и port2. Обычно один порт остается локальным, а другой передается удаленному окну или рабочему потоку. Через порты можно также организовывать связь между рабочими потоками.

Ниже приведен пример передачи порта для использования при обмене данными между документами. Обратите внимание, что массив портов должен быть последним аргументом.

otherWindow.postMessage('hello', 'http://example.com', [channel.port2]);

Аналогичным образом можно передать конечную точку (порт) рабочему потоку, используя метод postMessage:

worker.postMessage({code:"port"}, [channel.port2]);

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

// Worker Thread
onmessage = function (event) {
    if (event.data.code == "port") {
        event.ports[0].postMessage("Port received.");
    }
}

После получения порта дальний обмен данными через порт осуществляется с помощью метода postMessage и события onmessage. В следующем фрагменте кода определяется обработчик события и передается сообщение через порт канала.

channel.port1.onmessage = function (event) {
  // Message is in event.data
  alert("Message is: " + event.data);
}

channel.port1.postMessage('hello');

Обмен сообщениями по каналам используется для координации световых эффектов между рабочими потоками в демонстрации Web Worker Fountains. Ознакомьтесь с этой демонстрацией на веб-сайте IE Test Drive.

В Internet Explorer 10 и приложениях Metro API обмен сообщениями по каналам поддерживает следующие атрибуты, методы и события:

Интерфейс «MessageChannel»

Возвращает новый объект MessageChannel с двумя новыми объектами MessagePort.

Атрибут Тип Описание
port1 MessagePort Первый порт.
port2 MessagePort Второй порт.

Интерфейс «MessagePort»

Каждый канал имеет два порта сообщений. Данные, переданные с любого из портов, поступают на другой порт.

Метод Описание
void postMessage( in any message, in optional ports); Передает сообщение по каналу.
void start(); Начинает обмен сообщениями.
void close(); Закрывает порт.
Событие Описание
onmessage Получены данные сообщения.

Подключения WebSocket

Технология WebSocket обеспечивает новый API и протокол JavaScript консорциума W3C для двусторонней коммуникации через Интернет. Этот новый протокол упрощает прямую работу с фиксированными форматами данных и позволяет обходить более медленный протокол HTTP на основе документов. Нынешний основной протокол стандарта HTTP работает медленно, поскольку обязан запрашивать документы с сервера и ожидать отправки документа перед отображением страницы. Благодаря новой технологии WebSocket вы сможете отправлять и получать данные немедленно, используя текст, двоичные массивы или большие двоичные объекты. API WebSocket прост в обращении и требует очень мало сценарного кода. Двусторонний обмен данными с небольшой задержкой позволит вам создавать более быстрые интерактивные игры, мгновенные уведомления о событиях в социальных сетях, отображение курсов акций или сведений о погоде в реальном времени, а также других релевантных данных.

Поддержка WebSocket

Internet Explorer 10 и приложения Metro поддерживают API WebSocket согласно определению, данному в спецификации консорциума W3C по API WebSocket.

Создание технологии WebSocket

Внедрить эту новую технологию обмена данными совсем несложно, если вы следуете приведенным ниже этапам.

  1. Запустите клиентский браузер, который поддерживает протокол WebSocket.
  2. Напишите код для веб-страницы, который создает клиентское подключение WebSocket.
  3. Напишите код для веб-сервера, который отвечает на запрос клиента через подключение WebSocket.

Использование клиента WebSocket

Internet Explorer 10 выполняет протокол WebSocket точно так же, как и наиболее распространенные браузеры. На веб-сайте caniuse.com вы можете найти список других браузеров, поддерживающих этот протокол.

Протокол WebSocket, согласно определению, данному на веб-сайте средств IETF, использует такие новые схемы URL-адресов:

ws://
wss://

Создание кода клиента WebSocket

Ваш код веб-страницы должен выполнять следующие действия:

  1. Запускать подключение WebSocket и подключаться к серверу.
  2. Проверять успешность подключения.
  3. Отправлять и получать данные.

Внизу показан типичный код для определения URL подключения WebSocket:

var host = 'ws://example.microsoft.com';

Код ниже показывает, как подключиться по протоколу WebSocket, после чего проверить успешность подключения.

 var host = "ws://sample-host/echo";
 try {
    socket = new WebSocket(host);

    socket.onopen = function (openEvent) {
       document.getElementById("serverStatus").innerHTML =
          'WebSocket Status:: Socket Open';
    };

 socket.onmessage = function (messageEvent) {

    if (messageEvent.data instanceof Blob) {
    var destinationCanvas = document.getElementById('destination');
    var destinationContext = destinationCanvas.getContext('2d');
    var image = new Image();
    image.onload = function () {
       destinationContext.clearRect(0, 0,
          destinationCanvas.width, destinationCanvas.height);
       destinationContext.drawImage(image, 0, 0);
    }
    image.src = URL.createObjectURL(messageEvent.data);
 } else {
    document.getElementById("serverResponse").innerHTML =
       'Server Reply:: ' + messageEvent.data;
    }
 };

 socket.onerror = function (errorEvent) {
    document.getElementById("serverStatus").innerHTML =
      'WebSocket Status:: Error was reported';
    };

 socket.onclose = function (closeEvent) {
    document.getElementById("serverStatus").innerHTML =
      'WebSocket Status:: Socket Closed';
    };
 }
  catch (exception) { if (window.console) console.log(exception); }
 }

 function sendTextMessage() {

    if (socket.readyState != WebSocket.OPEN) return;

    var e = document.getElementById("textmessage");
    socket.send(e.value);
 }

 function sendBinaryMessage() {
    if (socket.readyState != WebSocket.OPEN) return;

    var sourceCanvas = document.getElementById('source');

    socket.send(sourceCanvas.msToBlob());
 }   

Код предыдущего примера предполагает, что на вашей веб-странице расположены элементы serverStatus, destination, serverResponse, textmessage и serverData со своими идентификаторами. Результат будет отображаться в окне консоли, если запущены средства разработчика, вызываемые клавишей F12.

Для отправки данных текстового сообщения используйте код такого типа:

var e = document.getElementById("msgText");
socket.send(e.value);

Код предыдущего примера предполагает, что текст сообщения, которое вы хотите отправить, располагается на вашей странице как элемент msgText, включающий идентификатор. Аналогичным образом вы можете использовать событие onmessage для определения новых сообщений. Сообщения на сервер можно также отправить с помощью метода send. Методы «send» могут использоваться для отправки текста, двоичных массивов или больших двоичных объектов.

Создание кода сервера WebSocket

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

Программирование подключения WebSocket

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

Имя Тип Описание
WebSocket объект Создает двусторонний канал к удаленному узлу.
close метод Закрывает подключение по протоколу WebSocket.
send метод Отправляет данные на сервер по подключению WebSocket.
binaryType свойство Формат двоичных данных, получаемых событием onmessage.
bufferedAmount свойство Число байтов данных, ждущих в очереди для отправки по методу send.
extensions свойство Сообщает о расширениях, удаленных сервером.
onclose свойство Обработчик событий, вызываемый при закрытии подключения.
onerror свойство Обработчик событий, вызываемый при ошибке.
onmessage свойство Обработчик событий, вызываемый при получении сообщения.
onopen свойство Обработчик событий, вызываемый при установлении подключения.
protocol свойство Сообщает о выбранном сервером протоколе.
readyState свойство Сообщает о состоянии подключения по протоколу WebSocket.
url свойство Сообщает текущий URL-адрес подключения.


Дополнительную информацию об этих объектах, методах и свойствах вы можете найти на конференции, посвященной WebSocket, на сайте MSDN.

Проверка правописания

Атрибут spellcheck — это часть рабочей версии спецификации HTML5 консорциума W3C, которая добавляет проверку правописания к элементам input и textarea, а также редактируемым полям для ввода текста. Internet Explorer 10 и приложения Metro поддерживают автокоррекцию частых опечаток (например, «teh» вместо «the»), а другие нераспознанные слова подчеркивают хорошо знакомой красной волнистой линией.

Проверка правописания по умолчанию активирована на элементах textarea и элементах, помеченных contenteditable. Вы можете активировать или деактивировать проверку правописания с помощью атрибута spellcheck для элемента HTML.

Синтаксис:

<input type="text" spellcheck="true" />

Атрибут spellcheck имеет три состояния:

true К полю применяется проверка правописания.
false Проверка правописания не применяется.
default Если атрибут отсутствует, проверка правописания наследуется от родительского элемента.


В примере ниже показана проверка правописания для нескольких элементов:

<body>
    <input type="text" spellcheck="true" >Input element with type="text"</input>
    <div contenteditable spellcheck="true">Content editable div element</div>
    <textarea spellcheck="true">Text area element </textarea>
</body>