Internet Explorer 10: руководство для разработчиков
13 сентября 2011 г.
HTML5Поддержка возможностей HTML5, описанных в рабочей версии спецификации HTML5, была добавлена в Internet Explorer 8, а затем расширена в Internet Explorer 9. Internet Explorer 10 и приложения Metro для Windows Developer Preview поддерживают еще больше возможностей этого новейшего стандарта, в том числе:
Важно. Эти возможности аналогичным образом работают в Internet Explorer 10 и приложениях Metro с использованием HTML. Асинхронное выполнение сценариевАтрибут async элемента script позволяет загружать и выполнять указанный сценарий асинхронно с остальной частью страницы. Иными словами, сценарий будет загружаться и выполняться в фоновом режиме, пока продолжается синтаксический анализ страницы. Атрибут async может существенно повысить скорость загрузки страниц, использующих сценарии с большим объемом вычислений. Атрибут «async»Атрибут async является частью стандарта HTML5 консорциума W3C и предназначен для ситуаций, когда элементы, зависящие от данного сценария, отсутствуют, а сценарий необходимо выполнить как можно скорее. Рассмотрим следующий гипотетический пример, вспомнив, что в отсутствие атрибута async (или defer) сценарий может заблокировать загрузку другого контента на странице. Лилия ведет личный блог, в котором используется ряд виджетов на базе сценариев. Эти виджеты призваны предоставить посетителям блога дополнительные возможности, но вместе с тем страница остается работоспособной и без их загрузки (Лилия хочет обеспечить поддержку для пользователей, у которых отключено выполнение сценариев). В настоящий момент код для загрузки этих виджетов находится в начале HTML-файла, но пользователи жалуются, что страница загружается слишком долго из-за длительного выполнения сценариев. Лилия пыталась перенести сценарии в конец страницы, чтобы ускорить ее загрузку, но в этом варианте большое количество контента замедляет получение пользователем сценариев. Однако хозяйка блога хочет, чтобы нужные ей виджеты загружались как можно быстрее, не блокируя оставшуюся часть страницы. После недолгих поисков в Интернете Лилия выясняет, что атрибут async стандарта HTML5 — это именно то, что ей нужно. Поместив все свои сценарные виджеты во внешний файл, она оперативно запускает обновленный блог, где реализован более удачный баланс между производительностью и дополнительными возможностями на основе сценариев. <head> Сведения об атрибуте «async» Internet Explorer 10 и приложения Metro поддерживают атрибуты async и defer для элемента script (атрибут defer поддерживается и в более ранних версиях Internet Explorer). Атрибуты async и defer могут использоваться только в том случае, если присутствует атрибут src. Возможны следующие четыре комбинации.
API кэша приложений (AppCache)Internet Explorer 10 и приложения Metro поддерживают API кэша приложений (или AppCache), чье определение приводится в спецификации HTML5. Такая возможность позволяет создавать веб-приложения, работающие в автономном режиме. AppCache позволяет веб-странице кэшировать (или сохранять) ресурсы локально, включая изображения, библиотеки сценариев, таблицы стилей и т. п. Кроме того, AppCache поддерживает открытие URL-адресов из кэшированного контента с помощью стандартных запросов универсального кода ресурса (URI). Используя AppCache для локального сохранения ресурсов, вы повысите скорость обработки веб-страниц за счет сокращения количества запросов на сервер, где размещено приложение. Кроме того, вы активируете автономный доступ к кэшированным ресурсам. Чтобы кэшировать ресурсы локально, выполните следующие действия:
Создание файла манифестаФайл манифеста — это текстовый файл, где определены правила кэширования для ресурсов, используемых веб-страницей, как показано в примере ниже. CACHE MANIFEST Файлы манифеста должны содержать следующие разделы:
Файлы манифеста могут содержать любое количество разделов каждого вида. Разделы могут повторяться. Однако новые разделы должны начинаться с заголовка раздела с двоеточием, как показано в предыдущем примере. При отсутствии заголовка раздела считается, что был введен заголовок «CACHE:». В примере ниже приведен упрощенный манифест. CACHE MANIFEST Кроме того, для файлов манифеста должны соблюдаться следующие условия:
Дополнительные сведения см. в синтаксисе манифеста кэша. Объявление манифестаЧтобы связать манифест с веб-страницей, присвойте имя файла манифеста атрибуту manifest элемента html, как показано в следующем примере: <!doctype html> В этом примере веб-страница объявляет «appcache.manifest» как файл манифеста. Объявление манифеста интерпретируется точно так же, как любые другие ссылки на файлы. Поскольку в примере используется относительное имя файла, подразумевается, что манифест расположен в том же каталоге, что и сама веб-страница. Примечание. Ссылки на файлы в манифесте интерпретируются относительно местоположения файла манифеста, а не веб-страницы, которая его объявляет. Манифест не обязательно должен включать имя веб-страницы, которая его объявляет. Веб-страницы, объявляющие манифесты, кэшируются автоматически. Объект ApplicationCacheInternet Explorer 10 также поддерживает объект ApplicationCache, предоставляющий методы и свойства для управления кэшем приложений. Кроме того, вы можете определять обработчики событий, которые показывают ход выполнения процесса кэширования. Для доступа к объекту ApplicationCache можно использовать свойство applicationCache объекта window (или объекта worker), как показано в примере ниже. var sCacheStatus = "Not supported"; В этом примере свойство status используется, чтобы определить состояние кэша приложений для документа, в настоящий момент загружаемого веб-страницей. Объект ApplicationCache поддерживает два метода управления кэшем. Метод update инициирует асинхронную проверку обновлений, похожую на процесс, запускаемый при первой загрузке веб-страницы. Любой существующий кэш будет использоваться до перезагрузки страницы или до вызова метода swapCache, поэтому чтобы начать использовать обновленный кэш, нужно либо перезагрузить страницу (вручную или программными методами), либо вызвать метод swapCache. Кэш обновляется при перезагрузке страницы, поэтому не обязательно вызывать метод swapCache перед перезагрузкой или обновлением веб-страницы. Примечание. Обновленный кэш не используется веб-страницей до ее перезагрузки вручную или программными методами (с помощью метода reload или объекта window.location). Объект ApplicationCache поддерживает следующие события:
В следующем примере показано, как регистрировать соответствующие обработчики событий. if (window.applicationCache) { Дополнительные сведения см. в материалах по теме Кэш приложений. ПеретаскиваниеОперацию перетаскивания (drag-and-drop) пользователи воспринимают как нечто привычное и ожидают, что она будет работать всегда. В Internet Explorer 9 и более ранних версиях Internet Explorer поддерживается объект dataTransfer, а также специальные события для перетаскивания изображений, ссылок и текста. В Internet Explorer 10 добавлена поддержка атрибута draggable для любого элемента, а также поддержка перетаскивания одного или нескольких файлов с рабочего стола на веб-страницу. Атрибут «draggable»Атрибут draggable позволяет разрешить для любого HTML-элемента перетаскивание на странице. Он может иметь следующие состояния:
<button id="mybutton" draggable="true">Drag me</button> Когда пользователь перетаскивает элемент с атрибутом «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 Файловый APIВ Internet Explorer 10 и приложениях Metro добавлена поддержка файлового API. Файловый API — это рабочая версия спецификации консорциума W3C для представления файловых объектов в веб-приложениях, который также позволяет программировать выбор таких объектов и предоставлять доступ к содержащимся в них данным. В настоящий момент файловый API проходит процедуру стандартизации в рабочей группе по веб-приложениям W3C. Используя файловый API, разработчики могут безопасно работать с локальными файлами на клиентском компьютере, не испытывая потребности в специальных расширениях или подключаемых модулях. Подробные сведенияФайловый API позволяет читать файлы и выполнять с ними различные манипуляции из браузера или приложения, но только при условии, что пользователь даст на это разрешение. Кроме того, файловый API обеспечивает более удобную передачу файлов без использования подключаемых модулей. В следующем примере использования файлового API консорциума W3C обработка хода операции, ошибок и успешного ее выполнения производится разными блоками кода: function startRead() { Другие усовершенствованияИмеются и другие усовершенствования работы с файлами.
Дополнительные сведения см. в следующих спецификациях 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"/> Новые атрибуты вводаВ Internet Explorer 10 реализована поддержка новых атрибутов ввода HTML5, таких как required, pattern и placeholder. Они позволяют разработчикам гарантировать, что пользователи смогут вводить необходимые данные на странице, а также обеспечить правильность этих данных. Атрибут «required» Атрибутом required помечаются элементы, в которых обязательно должно быть введено значение. Этот атрибут можно установить для текста, текстовой области, URL-адреса, адреса электронной почты, раскрывающегося списка, флажка или переключателя. Это логический атрибут, и его необходимо указывать только для элемента. Когда пользователь наводит указатель мыши на обязательное (required) поле, отображается всплывающая подсказка с информацией о том, что данное поле является обязательным, или с заданным текстом, если разработчик установил атрибут title. <form id="yourname"> Если пользователь попытается отправить форму, не введя каких-либо данных в это поле, он получит сообщение об ошибке, а фокус ввода переместится в поле с недостающими данными. Атрибут «pattern» Атрибут pattern позволяет задать регулярное выражение, соответствующее тому, которое должен ввести пользователь. Атрибут «pattern» доступен для элементов ввода text (текст), search (поиск), url (адрес ссылки), tel (телефон), email (эл. почта) и password (пароль). <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> Атрибут «placeholder» Направить пользователей к нужному полю ввода и показать им, как правильно вводить данные, — чаще всего означает, что половина задачи по получению достоверных сведений выполнена. Поддержка описаний заполнителей HTML5 позволит дать пользователям указания по вводу правильных данных в поля формы.
Атрибут placeholder позволяет разработчику отобразить в поле ввода пример правильных входных данных. <input name="url" type="text" placeholder="http://www.contoso.com" /> Приведенная выше разметка предписывает отображать в поле ввода текст из атрибута placeholder, пока в это поле не переместится фокус ввода с клавиатуры. Атрибут placeholder может использоваться с элементами ввода типа «текст» или «текстовая область», а также с новыми текстовыми элементами ввода url, tel и email. Стилевое оформление атрибута «placeholder» По умолчанию текст атрибута «placeholder» светло-серого цвета, однако вы можете изменить его с помощью выбора псевдокласса -ms-input-placeholder. В примере ниже поля для ввода адреса и почтового индекса выделены специальным стилем. <!DOCTYPE html > Текст заполнителя отображается заданным стилем в поле ввода, пока оно не получит фокус, т. е. не будет готово к вводу данных. Когда фокус ввода окажется в поле, оно примет свой обычный вид и текст заполнителя исчезнет. Атрибут «autofocus» Атрибут autofocus позволяет разработчикам устанавливать фокус ввода в конкретное поле после загрузки страницы. Это действие служит подсказкой для пользователя и повышает удобство работы, избавляя от необходимости щелкать мышью в нужном поле или переходить в него нажатием клавиши TAB.
Атрибут 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> Настройка сообщений об ошибках проверкиInternet Explorer 10 отображает ряд стандартных сообщений о разнообразных ошибках проверки. Если использовать атрибут title, его значение будет отображаться в качестве подсказки (tooltip) для поля ввода и присоединяться к сообщению о несоответствии шаблону. В следующем примере показано, как поле для ввода номера телефона может подсказывать пользователям правильный формат вводимых значений. <form> Если пользователь опустит дефисы или введет в поле буквы вместо цифр, появится следующее сообщение: Предупреждение о включенном режиме CAPS LOCK в полях ввода пароляЧтобы помочь пользователям избежать ввода неверного пароля, Internet Explorer 10 показывает предупреждение, если пользователь вводит данные в поле пароля при включенном режиме CAPS LOCK. Никакого дополнительного кода для этого не требуется. Стилевое оформление проверяемых полей с помощью новых псевдоклассовОбратная связь о допустимости введенных данных может лучше восприниматься пользователем, чем сообщение об ошибке. Internet Explorer 10 поддерживает псевдоклассы CSS — :valid и :invalid. Это позволяет вам задавать стилевое оформление полей ввода в зависимости от типа ввода и требуемого шаблона (если он нужен). Например, поле URL-адреса может отображаться в красной рамке, пока в него не будет введен адрес в правильном формате. Содержимое обязательного поля будет считаться недопустимым, пока в него не будут введены правильные данные. Содержимое необязательного поля, предусматривающего проверку (например, поля URL-адреса), будет считаться допустимым до ввода текста. Можно также задавать стиль отображения обязательных и необязательных полей с помощью псевдоклассов :required и :optional. В примере ниже поля, куда введены допустимые данные, окружены зеленой рамкой, поля, куда введены недопустимые — красной, а текст в них выделен полужирным шрифтом. Поле email является обязательным, а остальные — нет. Поле URL предварительно заполнено неправильным URL-адресом, поэтому отображается как недопустимое при открытии страницы. Кроме того, двум необязательным полям назначается светло-серый фон, а обязательному полю — привлекающий внимание желтый фон. <!DOCTYPE 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» для следующих логических атрибутов, доступных только для чтения:
Элементы управления «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> ИсторияInternet Explorer 10 теперь поддерживает рабочую версию спецификации истории для HTML5, которая включает методы, позволяющие веб-разработчикам управлять стеком истории и URL сайта. Эта возможность дает пользователям привычный контроль над своими действиями с помощью кнопок «вперед» и «назад», а также возможность обновлять небольшие страницы без переходов или обновлений. Примечание. Методы истории HTML5 не действуют в приложениях Metro. Методы «history.pushState()» и «history.replaceState()»С помощью метода history.pushState() вы можете добавить новый элемент в историю, а также, по желанию, включить объект состояния. Благодаря методу history.replaceState() вы можете модифицировать текущий элемент истории. Синтаксис history.pushState(data, title, url);
Событие «window.onpopstate»Событие window.onpopstate уведомляет ваше приложение, когда пользователь щелкает кнопки «вперед» или «назад» либо когда вызваны методы history.pushState() или history.replaceState(). Следующий синтаксис показывает, как провести разграничение между двумя вариантами для вашего обработчика событий. window.onpopstate = function(event){ Параметр события popstate содержит состояние (заданное параметром «data») из методов pushState или replaceState. Если страница загружена, состояние будет неопределенным. Синтаксический анализInternet Explorer 10 и приложения Metro полностью поддерживают алгоритм синтаксического анализа HTML5, продолжая начатую в предыдущих выпусках работу по обеспечению единообразного функционирования HTML-кода в различных браузерах. В частности, сюда относится поддержка векторной графики SVG в HTML и семантических элементов HTML5, сохранение структуры неизвестных элементов и совершенствование распределения пустого пространства. Обеспечение правильного поведенияЦель работы группы разработчиков Internet Explorer над синтаксическим анализатором HTML состоит в том, чтобы результат анализа HTML был одинаков во всех современных браузерах. Это стало возможным потому, что HTML5 — первая версия HTML, в которой правила синтаксического анализа определены полностью, вплоть до последнего пограничного случая и последней ошибочной ситуации. Даже если ваша разметка недопустима, HTML5 все равно задает правила ее анализа, а Internet Explorer 10 следует этим правилам. В следующих примерах синтаксического анализа демонстрируется несколько ситуаций, когда усовершенствования помогли исправить ошибку.
Совместимое свойство «innerHTML»Эти усовершенствования относятся и к свойству innerHTML.Фрагменты кода, подобные приведенному ниже, в Internet Explorer 10 будут работать в соответствии с ожиданиями: var select = document.createElement("select"); Улучшенные отчеты об ошибках для разработчиков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]> Поведение элементовПоведение элементов, которое, начиная с Internet Explorer 5.5, стало возможным задавать и которое было описано здесь, теперь не распознается Internet Explorer 10 при работе в режиме IE10. <html xmlns:my> Острова данных XMLОстрова данных XML, введенные в Internet Explorer 5.0 и описанные здесь, более не подвергаются разбору в Internet Explorer 10 при работе в режиме IE10. <xml> «Песочница»Internet Explorer 10 и приложения Metro поддерживают атрибут «sandbox» («песочница»), который активирует ограничения безопасности для элементов iframe, содержащих подозрительный контент. Такие ограничения повышают уровень безопасности, предотвращая потенциально вредоносные действия подозрительного контента. Чтобы включить эти ограничения, укажите атрибут «sandbox», как показано в следующем примере кода. <iframe sandbox src="frame1.html"></iframe> Когда атрибут «sandbox» указан для элемента iframe, контент такого элемента называют изолированным. Поведение, не допускаемое в «песочнице»Для изолированных элементов iframe действуют следующие ограничения на выполняемые действия.
Настройка ограничений «песочницы»Internet Explorer 10 и приложения Metro позволяют вам настроить избранные ограничения «песочницы». Для этого укажите один или более флагов настройки как значения атрибута «песочницы».
<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'); Рабочий поток передает сообщение для отображения. postMessage('Hello world!'); Двусторонняя связь с рабочими веб-потоками Для организации двусторонней связи основная страница и рабочий поток прослушивают событие onmessage. В следующем примере рабочий поток возвращает сообщение по истечении заданного времени задержки. Сначала в сценарии создается рабочий поток. var echo = new Worker('echo.js'); Текст сообщения и время задержки задаются в форме. Когда пользователь нажимает кнопку Submit (Отправить), сценарий передает эти два элемента данных рабочему потоку в литерале объекта JavaScript. Чтобы предотвратить отправку значений форм со страницы в новом HTTP-запросе, обработчик события также вызывает метод preventDefault объекта события. Обратите внимание, что в рабочий поток не могут передаваться ссылки на объекты DOM. Рабочим веб-потокам разрешен доступ лишь к ограниченному кругу данных. Допускается передача только примитивов JavaScript, таких как значения типов «object» или «string». <script> Наконец, рабочий процесс ожидает прихода сообщения и возвращает его по истечении заданного времени задержки. onmessage = function(e) В Internet Explorer 10 и приложениях Metro API рабочих веб-потоков поддерживают следующие методы, атрибуты и события.
Оконные таймеры (WindowTimers)API рабочих веб-потоков также поддерживает обновленную функциональность оконных таймеров (WindowTimers) HTML5.
Обмен сообщениями по каналамВ 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 После получения порта дальний обмен данными через порт осуществляется с помощью метода postMessage и события onmessage. В следующем фрагменте кода определяется обработчик события и передается сообщение через порт канала. channel.port1.onmessage = function (event) { Обмен сообщениями по каналам используется для координации световых эффектов между рабочими потоками в демонстрации Web Worker Fountains. Ознакомьтесь с этой демонстрацией на веб-сайте IE Test Drive. В Internet Explorer 10 и приложениях Metro API обмен сообщениями по каналам поддерживает следующие атрибуты, методы и события: Интерфейс «MessageChannel»Возвращает новый объект MessageChannel с двумя новыми объектами MessagePort.
Интерфейс «MessagePort»Каждый канал имеет два порта сообщений. Данные, переданные с любого из портов, поступают на другой порт.
Подключения WebSocketТехнология WebSocket обеспечивает новый API и протокол JavaScript консорциума W3C для двусторонней коммуникации через Интернет. Этот новый протокол упрощает прямую работу с фиксированными форматами данных и позволяет обходить более медленный протокол HTTP на основе документов. Нынешний основной протокол стандарта HTTP работает медленно, поскольку обязан запрашивать документы с сервера и ожидать отправки документа перед отображением страницы. Благодаря новой технологии WebSocket вы сможете отправлять и получать данные немедленно, используя текст, двоичные массивы или большие двоичные объекты. API WebSocket прост в обращении и требует очень мало сценарного кода. Двусторонний обмен данными с небольшой задержкой позволит вам создавать более быстрые интерактивные игры, мгновенные уведомления о событиях в социальных сетях, отображение курсов акций или сведений о погоде в реальном времени, а также других релевантных данных. Поддержка WebSocketInternet Explorer 10 и приложения Metro поддерживают API WebSocket согласно определению, данному в спецификации консорциума W3C по API WebSocket. Создание технологии WebSocketВнедрить эту новую технологию обмена данными совсем несложно, если вы следуете приведенным ниже этапам.
Использование клиента WebSocketInternet Explorer 10 выполняет протокол WebSocket точно так же, как и наиболее распространенные браузеры. На веб-сайте caniuse.com вы можете найти список других браузеров, поддерживающих этот протокол. Протокол WebSocket, согласно определению, данному на веб-сайте средств IETF, использует такие новые схемы URL-адресов: ws:// Создание кода клиента WebSocket Ваш код веб-страницы должен выполнять следующие действия:
Внизу показан типичный код для определения URL подключения WebSocket: var host = 'ws://example.microsoft.com'; Код ниже показывает, как подключиться по протоколу WebSocket, после чего проверить успешность подключения. var host = "ws://sample-host/echo"; Код предыдущего примера предполагает, что на вашей веб-странице расположены элементы serverStatus, destination, serverResponse, textmessage и serverData со своими идентификаторами. Результат будет отображаться в окне консоли, если запущены средства разработчика, вызываемые клавишей F12. Для отправки данных текстового сообщения используйте код такого типа: var e = document.getElementById("msgText"); Код предыдущего примера предполагает, что текст сообщения, которое вы хотите отправить, располагается на вашей странице как элемент msgText, включающий идентификатор. Аналогичным образом вы можете использовать событие onmessage для определения новых сообщений. Сообщения на сервер можно также отправить с помощью метода send. Методы «send» могут использоваться для отправки текста, двоичных массивов или больших двоичных объектов. Создание кода сервера WebSocketСерверный код для обработки такого подключения может быть написан на любом серверном языке. Какой бы язык вы ни выбрали, вам необходимо написать код, который принимает запросы по протоколу WebSocket и надлежащим образом обрабатывает их. Программирование подключения WebSocketWebSocket предоставляет набор объектов, методов и свойств, которые можно использовать для программирования подключения по этому протоколу.
Проверка правописанияАтрибут spellcheck — это часть рабочей версии спецификации HTML5 консорциума W3C, которая добавляет проверку правописания к элементам input и textarea, а также редактируемым полям для ввода текста. Internet Explorer 10 и приложения Metro поддерживают автокоррекцию частых опечаток (например, «teh» вместо «the»), а другие нераспознанные слова подчеркивают хорошо знакомой красной волнистой линией. Проверка правописания по умолчанию активирована на элементах textarea и элементах, помеченных contenteditable. Вы можете активировать или деактивировать проверку правописания с помощью атрибута spellcheck для элемента HTML. Синтаксис: <input type="text" spellcheck="true" /> Атрибут spellcheck имеет три состояния:
<body> |