События при загрузке html-документа

Выбор элементов

Одна из самых важных областей применения функциональности jQuery — это выбор элементов DOM. В качестве примера ниже показано, как осуществить выбор нечетных элементов img:

Чтобы выбрать элементы, вы просто передаете селектор функции $(). Библиотека jQuery поддерживает все множество CSS-селекторов, а также некоторые дополнительные селекторы, которые обеспечивают удобные возможности детализированного управления процессом выбора элементов. В данном примере используется псевдоселектор :odd, который выбирает нечетные элементы, соответствующие основной части селектора (в данном случае это селектор img, который выбирает все элементы <img>).

В случае использования селектора :odd отсчет элементов начинается с нуля, т.е. первый элемент является четным. Поначалу это может сбивать вас с толку. Наиболее полезные селекторы jQuery перечислены в таблице ниже:

Я назвал эти селекторы наиболее полезными, поскольку они определяют функциональность, обеспечить которую с помощью селекторов CSS было бы нелегко.

В jQuery определены также селекторы, позволяющие выбирать элементы в соответствии с их типом:

<select>
    <option>Option<option/>
</select>

Кодировка urlencoded

Основной способ кодировки запросов – это urlencoded, то есть – стандартное кодирование URL.

Например, форма:

Здесь есть два поля: и .

Браузер перечисляет такие пары «имя=значение» через символ амперсанда и, так как метод GET, итоговый запрос выглядит как .

Все символы, кроме английских букв, цифр и заменяются на их цифровой код в UTF-8 со знаком %.

Например, пробел заменяется на , символ на , русские буквы кодируются двумя байтами в UTF-8, поэтому, к примеру, заменится на .

Например, форма:

Будет отправлена так: .

в JavaScript есть функция encodeURIComponent для получения такой кодировки «вручную»:

Эта кодировка используется в основном для метода GET, то есть для передачи параметра в строке запроса. По стандарту строка запроса не может содержать произвольные Unicode-символы, поэтому они кодируются как показано выше.

jQuery Core — All 3.x Versions

• jQuery Core 3.5.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.5.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.4.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.4.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.3.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.3.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.2.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.2.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.1.1 — uncompressed, minified, slim, slim minified
• jQuery Core 3.1.0 — uncompressed, minified, slim, slim minified
• jQuery Core 3.0.0 — uncompressed, minified, slim, slim minified

9 – $(‘.box’).css(‘color’, ‘red’);

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

Модерн

[].forEach.call( document.querySelectorAll('.box'), function(el) {
  el.style.color = 'red'; // или добавляем класс
});

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

Наследие

var box = document.getElementsByClassName('box'), // смотрите пример 10 ниже для кросс-браузерного решения
   i = box.length;
  
while ( i-- > 0 && (box.style.color = 'red') );

Мы используем трюк с циклом  . По существу, мы имитируем:

var i = 0, len;
 
for ( len = box.length; i < len; i++ ) {
   box.style.color = 'red';
}

Хотя нужно выполнить одно действие, мы можем сэкономить пару строк

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

Основы

XMLHttpRequest имеет два режима работы: синхронный и асинхронный.

Сначала рассмотрим асинхронный, так как в большинстве случаев используется именно он.

Чтобы сделать запрос, нам нужно выполнить три шага:

1. Создать .

2. Инициализировать его.

   Этот метод обычно вызывается сразу после . В него передаются основные параметры запроса:

   • – HTTP-метод. Обычно это или .
   • – URL, куда отправляется запрос: строка, может быть и объект URL.
   • – если указать , тогда запрос будет выполнен синхронно, это мы рассмотрим чуть позже.
   • , – логин и пароль для базовой HTTP-авторизации (если требуется).

   Заметим, что вызов , вопреки своему названию, не открывает соединение. Он лишь конфигурирует запрос, но непосредственно отсылается запрос только лишь после вызова .

3. Послать запрос.

   Этот метод устанавливает соединение и отсылает запрос к серверу. Необязательный параметр содержит тело запроса.

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

4. Слушать события на , чтобы получить ответ.

   Три наиболее используемых события:

   • – происходит, когда получен какой-либо ответ, включая ответы с HTTP-ошибкой, например 404.
   • – когда запрос не может быть выполнен, например, нет соединения или невалидный URL.
   • – происходит периодически во время загрузки ответа, сообщает о прогрессе.

Вот полный пример. Код ниже загружает с сервера и сообщает о прогрессе:

После ответа сервера мы можем получить результат запроса в следующих свойствах :

Код состояния HTTP (число): , , и так далее, может быть в случае, если ошибка не связана с HTTP.

Сообщение о состоянии ответа HTTP (строка): обычно для , для , для , и так далее.

(в старом коде может встречаться как )

Тело ответа сервера.

Мы можем также указать таймаут – промежуток времени, который мы готовы ждать ответ:

Если запрос не успевает выполниться в установленное время, то он прерывается, и происходит событие .

URL с параметрами

Чтобы добавить к URL параметры, вида , и корректно закодировать их, можно использовать объект URL:

Пример: минималистичное окно

Давайте откроем окно с минимальным набором настроек, просто чтобы посмотреть, какие из них браузер позволит отключить:

В этом примере большинство настроек заблокированы и само окно находится за пределами видимой области экрана. Посмотрим, что получится в результате. Большинство браузеров «исправит» странные значения – как, например, нулевые и отрицательные . Например, Chrome установит высоту и ширину такого окна равной высоте и ширине экрана, так что попап будет занимать весь экран.

Давайте исправим значения и зададим нормальные координаты ( и ) и значения размеров окна ( и ):

Большинство браузеров выведет окно с заданными нами настройками.

Правила для опущенных параметров:

• Если третий аргумент при вызове отсутствует или он пустой, будут использованы настройки окна по умолчанию.
• Если строка параметров передана, но некоторые параметры yes/no пропущены, то считается, что указано , так что соответствующие возможности будут отключены, если на это нет ограничений со стороны браузера. Поэтому при задании параметров убедитесь, что вы явно указали все необходимые yes.
• Если координаты не заданы, браузер попытается открыть новое окно рядом с предыдущим открытым окном.
• Если не заданы размеры окна , браузер откроет новое окно с теми же размерами, что и предыдущее открытое окно.

6 — $(‘#list’).next();

Метод jQuery возвращает элемент, который следует непосредственно за текущим элементом наборе.

Модерн

var next = document.querySelector('#list').nextElementSibling; // IE9

ссылается на следующий узел за элементом. К сожалению, Internet Explorer 8 и старше не поддерживают его.

Наследие

var list = document.getElementById('list'),
   next = list.nextSibling;
 
// Нам нужен следующий элемент, а не текст.
while ( next.nodeType > 1 ) next = next.nextSibling;

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

Content Security Policy

Ранее, одним из главных принципов безопасности браузеров являлась политика Same Origin Policy. Ее суть заключается в проверке трех компонентов, из которых состоит origin: протокол, хост и порт. Однако при внедрении пейлода с одного сайта на другой SOP будет бесполезен для сайта с внедренным пейлоадом. Поэтому на смену SOP пришел CSP, основное предназначение которого состоит в том, чтобы защитить пользователя от угроз межсайтового выполнения сценариев. CSP описывает безопасные источники загрузки ресурсов, устанавливает правила использования встроенных стилей, скриптов, а также динамической оценки JavaScript. Самое главное — загрузка с ресурсов, не входящих в «белый список», блокируется.

Поддерживаемые директивы:

• Default-src: определение политики загрузки для всех типов ресурсов в случае, если определенная директива типа ресурса не определена (резервная);
• Script-src: какие скрипты могут использовать защищенный ресурс;
• Object-src: откуда ресурс может загружать плагины;
• Style-src: какие стили (CSS) пользователь применяет к защищенному ресурсу;
• Img -src: откуда защищенный ресурс может загружать изображения;
• Media-src: откуда защищенный ресурс может загружать видео и аудио;
• Frame-src: где защищенный ресурс может вставлять кадры;
• Font-src: где защищенный ресурс может загружать шрифты;
• Connect-src: какие URI могут быть загружены защищенным ресурсом;
• Form-action: какие URI могут использоваться как результат работы HTML-формы;
• Sandbox: определяет политику «песочницы HTML»;
• Script-nonce: выполнение сценария, требуя наличия указанного nonce для элементов сценария;
• Plugin-types: набор плагинов, которые могут быть вызваны защищенным ресурсом, путем ограничения типов ресурсов, которые могут быть встроены;
• Reflection-xss: активировать или деактивировать любые проверки, используемые для фильтрации или блокирования отраженных атак между сайтами, эквивалентные нестандартному заголовку X-XSS-Protection;
• Report-uri: указывает URI, на который агент пользователя отправляет отчеты о нарушении правил.

HTTP-заголовки

умеет как указывать свои заголовки в запросе, так и читать присланные в ответ.

Для работы с HTTP-заголовками есть 3 метода:

Устанавливает заголовок запроса с именем и значением .

Например:

Ограничения на заголовки

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

не разрешено изменять их ради безопасности пользователей и для обеспечения корректности HTTP-запроса.

Поставленный заголовок нельзя снять

Ещё одной особенностью является то, что отменить невозможно.

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

Например:

Возвращает значение заголовка ответа (кроме и ).

Например:

Возвращает все заголовки ответа, кроме и .

Заголовки возвращаются в виде единой строки, например:

Между заголовками всегда стоит перевод строки в два символа (независимо от ОС), так что мы можем легко разделить их на отдельные заголовки. Значение заголовка всегда отделено двоеточием с пробелом . Этот формат задан стандартом.

Таким образом, если хочется получить объект с парами заголовок-значение, нам нужно задействовать немного JS.

Вот так (предполагается, что если два заголовка имеют одинаковое имя, то последний перезаписывает предыдущий):

DOM (Document Object Model)

Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять.

Объект – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице.

Например:

Мы использовали в примере только , но на самом деле возможности по управлению страницей намного шире. Различные свойства и методы описаны в спецификации:

DOM Living Standard на https://dom.spec.whatwg.org

DOM – не только для браузеров

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

Например, серверные скрипты, которые загружают и обрабатывают HTML-страницы, также могут использовать DOM. При этом они могут поддерживать спецификацию не полностью.

CSSOM для стилей

Правила стилей CSS структурированы иначе чем HTML. Для них есть отдельная спецификация CSSOM, которая объясняет, как стили должны представляться в виде объектов, как их читать и писать.

CSSOM используется вместе с DOM при изменении стилей документа. В реальности CSSOM требуется редко, обычно правила CSS статичны. Мы редко добавляем/удаляем стили из JavaScript, но и это возможно.

Вступление

Обратите внимание, что некоторые варианты из набора «наследие» в данной статье используют простую, кросс-браузерную функцию. Данная функция нормализует два варианта — рекомендованную W3C модель событий и вариант для Internet Explorer

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

var addEvent = (function () {
   var filter = function(el, type, fn) {
      for ( var i = 0, len = el.length; i < len; i++ ) {
         addEvent(el, type, fn);
      }
   };
   if ( document.addEventListener ) {
      return function (el, type, fn) {
         if ( el && el.nodeName || el === window ) {
            el.addEventListener(type, fn, false);
         } else if (el && el.length) {
            filter(el, type, fn);
         }
      };
   }
 
   return function (el, type, fn) {
      if ( el && el.nodeName || el === window ) {
         el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if ( el && el.length ) {
         filter(el, type, fn);
      }
   };
})();
 
// Использование
addEvent( document.getElementsByTagName('a'), 'click', fn);
 

Псевдонимы jQuery, пространство имен.

Как вы уже замечали у jQuery есть псевдоним (alias) знак доллара ($), т.е. обращение к $ аналогично обращению jQuery.

При использовании сторонних JavaScript библиотек необходимо вызвать $.noConflict(), что бы избежать трудностей с именованием. После вызова $.noConflict() ярлык $ более не доступен для использования и придется писать jQuery вместо $. Однако обработчики назначаемые с помощью jQuery.ready() могут принимать аргумент, через который передается глобальный объект jQuery. Это означает, что мы можем переименовывать объект в контексте метода jQuery.ready(), не затрагивая другой код:

jQuery(function($) {
	// Здесь можно использовать псевдоним $, вместо jQuery
});

Ожидание готовности DOM-модели

Библиотека jQuery предлагает свой способ регистрации события загрузки страницы. Соответствующий код представлен в примере ниже:

В этом сценарии мы передаем переменную document функции $() в качестве аргумента и вызываем метод ready(), передавая ему функцию, которую хотим выполнить после окончания загрузки и готовности DOM к работе. Можете поместить этот элемент script в любое место документа, будучи уверенным в том, что jQuery не допустит преждевременного выполнения функции.

Функция function(), передаваемая методу ready(), будет вызвана лишь после загрузки документа, но не раньше, чем завершится построение DOM.

Часто совершают ошибку, опуская в этой магической формуле ключевое слово function, определяющее следующий за ним блок инструкций как анонимную функцию, и передавая методу ready() простую последовательность инструкций JavaScript. Это не сработает. Инструкции будут выполнены браузером сразу же после их синтаксического разбора, а не после того, как DOM-дерево будет готово к использованию. В этом позволяет убедиться следующий пример:

Здесь метод ready() вызывается дважды: первый раз — с использованием ключевого слова function, а второй — с передачей обычной инструкции JavaScript в качестве аргумента. В обоих случаях вызывается функция countImgElements(), возвращающая общее количество элементов img в DOM. Загрузив документ, вы получите в окне консоли следующий результат:

Как видите, выполнение инструкции без ключевого слова function происходит при загрузке документа еще до того, как браузер обнаружит в нем элементы img и создаст соответствующие DOM-объекты.

Использование альтернативной нотации

При желании можете передать свою функцию в качестве параметра непосредственно $-функции jQuery. При таком способе записи вызова результат будет тем же, что и в случае вызова $(document).ready(). Описанный подход используется в примере ниже:

Задержка срабатывания события ready

Используя метод holdReady(), можно управлять моментом срабатывания события ready. Это может пригодиться в тех случаях, когда вы хотите использовать динамическую загрузку внешних ресурсов (эффективный, но пока что редко применяемый прием). Метод holdReady() следует вызывать дважды: до срабатывания события ready и когда DOM достигнет состояния готовности. Пример использования этой методики приведен в примере ниже:

Первой инструкцией в этом сценарии является вызов метода holdReady(). В качестве аргумента ему передается значение true, указывающее на необходимость задержки срабатывания события ready. Далее мы определяем функцию, которая должна быть выполнена при срабатывании события ready (она содержит тот же набор инструкций, который использовался в предыдущей статье для изменения непрозрачности изображений, но оформленный в виде функции).

Наконец, мы используем метод setTimeout() для вызова функции по истечении 5 секунд. Эта функция содержит вызов метода holdReady() с аргументом false, указывающим jQuery на необходимость освобождения события ready для его последующей обработки. Конечный результат состоит в том, что событие ready срабатывает с задержкой в 5 секунд. В сценарий включены также отладочные инструкции, которые после загрузки документа в браузер выводят на консоль следующую информацию:

Метод holdReady() можно вызывать многократно, но количество вызовов с аргументом true должно совпадать с количеством вызовов с аргументом false, прежде чем будет запущено событие ready.

.ready( handler )Возвращает: jQuery

Описание: Устанавливает обработчик готовности дерева DOM.

• handler
  Тип: Function()
  A function to execute after the DOM is ready.

The method offers a way to run JavaScript code as soon as the page’s Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins. When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added. As of jQuery 3.0, jQuery ensures that an exception occuring in one handler does not prevent subsequently added handlers from executing.

Most browsers in the form of a event. However, jQuery’s method differs in an important and useful way: If the DOM becomes ready and the browser fires before the code calls , the function will still be executed. In contrast, a event listener added after the event fires is never executed.

Browsers also provide the event on the object. When this event fires it indicates that all assets on the page have loaded, including images. This event can be watched in jQuery using . In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the event instead.

Note that although the DOM always becomes ready before the page is fully loaded, it is usually not safe to attach a event listener in code executed during a handler. For example, scripts can be loaded dynamically long after the page has loaded using methods such as . Although handlers added by will always be executed in a dynamically loaded script, the ‘s event has already occurred and those listeners will never run.

jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the method, which is inefficient and can lead to incorrect assumptions about the method’s behavior. For example, the third syntax works with which selects nothing. The fourth syntax waits for the document to be ready but implies (incorrectly) that it waits for images to become ready.

There is also , deprecated as of jQuery 1.8 and removed in jQuery 3.0. Note that if the DOM becomes ready before this event is attached, the handler will not be executed.

The method is typically used with an anonymous function:

Which is equivalent to the recommended way of calling:

Aliasing the jQuery Object

When is used to avoid namespace conflicts, the shortcut is no longer available. However, the handler is passed a reference to the object that called the method. This allows the handler to use a jQuery object, for example as , without knowing its aliased name:

Событие onprogress в деталях

При обработке события есть ряд важных тонкостей.

Можно, конечно, их игнорировать, но лучше бы знать.

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

Оно представляет собой объект типа со свойствами:

Сколько байт уже переслано.

Имеется в виду только тело запроса, заголовки не учитываются.

Если , то известно полное количество байт для пересылки, и оно хранится в свойстве .

Общее количество байт для пересылки, если известно.

А может ли оно быть неизвестно?

• При отправке на сервер браузер всегда знает полный размер пересылаемых данных, так что всегда содержит конкретное количество байт, а значение всегда будет .
• При скачивании данных – обычно сервер в начале сообщает их общее количество в HTTP-заголовке . Но он может и не делать этого, например если сам не знает, сколько данных будет или если генерирует их динамически. Тогда будет равно . А чтобы отличить нулевой размер данных от неизвестного – как раз служит , которое в данном случае равно .

Ещё особенности, которые необходимо учитывать при использовании :

Событие происходит при каждом полученном/отправленном байте, но не чаще чем раз в 50 мс.
Это обозначено в .

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

Важно, что при пересылке строки в кодировке UTF-8 кириллические символы, как, впрочем, и многие другие, кодируются 2 байтами. Возможно, что в конце одного пакета данных окажется первая половинка символа, а в начале следующего – вторая

Поэтому полагаться на то, что до окончания запроса в находится корректная строка нельзя. Она может быть обрезана посередине символа.
Исключение – заведомо однобайтные символы, например цифры или латиница.

Сработавшее событие не гарантирует, что данные дошли.
Событие срабатывает, когда данные отправлены браузером. Но оно не гарантирует, что сервер получил, обработал и записал данные на диск. Он говорит лишь о самом факте отправки.
Поэтому прогресс-индикатор, получаемый при его помощи, носит приблизительный и оптимистичный характер.

Песочница sandbox

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

Наличие атрибута :

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

Пример ниже загружает в документ с JavaScript и формой. Ни то ни другое не сработает:

Результат
index.html
sandboxed.html

Если у атрибута нет значения, то браузер применяет максимум ограничений.

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

allow-same-origin

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

allow-top-navigation

Разрешает ифрейму менять .

allow-forms

Разрешает отправлять формы из .

allow-scripts

Разрешает выполнение скриптов из ифрейма. Но скриптам, всё же, будет запрещено открывать попапы.

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

Политика «Одинакового источника»

Два URL имеют «одинаковый источник» в том случае, если они имеют совпадающие протокол, домен и порт.

• (другой домен: важен)
• (другой домен: важен)
• (другой протокол: )
• (другой порт: )

Политика «Одинакового источника» говорит, что:

• если у нас есть ссылка на другой объект , например, на всплывающее окно, созданное с помощью или на из и у этого окна тот же источник, то к нему будет полный доступ.
• в противном случае, если у него другой источник, мы не сможем обращаться к его переменным, объекту и так далее. Единственное исключение – объект : его можно изменять (таким образом перенаправляя пользователя). Но нельзя читать (нельзя узнать, где находится пользователь, чтобы не было никаких утечек информации).

Внутри находится по сути отдельное окно с собственными объектами и .

Мы можем обращаться к ним, используя свойства:

• ссылка на объект внутри .
• – ссылка на объект внутри , короткая запись для .

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

Для примера давайте попробуем чтение и запись в ифрейм с другим источником:

Код выше выведет ошибку для любых операций, кроме:

• Получения ссылки на внутренний объект из
• Изменения .

С другой стороны, если у ифрейма тот же источник, то с ним можно делать всё, что угодно:

и

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

…Но всегда доступно извне ифрейма, в то время как доступ к разрешён только из окна с тем же источником.

Атрибут ифрейма sandbox

Атрибут позволяет наложить ограничения на действия внутри , чтобы предотвратить выполнение ненадёжного кода. Атрибут помещает ифрейм в «песочницу», отмечая его как имеющий другой источник и/или накладывая на него дополнительные ограничения.

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

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

Вот список ограничений:

принудительно устанавливает «другой источник» для ифрейма. Другими словами, он заставляет браузер воспринимать , как пришедший из другого источника, даже если содержит тот же сайт. Со всеми сопутствующими ограничениями для скриптов. Эта опция отключает это ограничение.

Позволяет ифрейму менять .

Позволяет отправлять формы из ифрейма.

Позволяет запускать скрипты из ифрейма.

Позволяет открывать всплывающие окна из ифрейма с помощью .

Больше опций можно найти в справочнике.

Пример ниже демонстрирует ифрейм, помещённый в песочницу со стандартным набором ограничений: . На странице содержится JavaScript и форма.

Обратите внимание, что ничего не работает. Таким образом, набор ограничений по умолчанию очень строгий:. Результат
index.html
sandboxed.html

Результат
index.html
sandboxed.html

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

Блокировка попапов

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

Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события ).

Например:

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

Что, если попап должен открываться в результате , но не сразу, а только после выполнения ? Здесь все не так-то просто.

Запустим код:

Попап откроется в Chrome, но будет заблокирован в Firefox.

Но если мы уменьшим тайм-аут до одной секунды, то попап откроется и в Firefox:

Мы получили два разных результата из-за того, что Firefox «допускает» таймаут в 2000 мс или менее, но все, что свыше этого – не вызывает его доверия, т.к. предполагается, что в таком случае открытие окна происходит без ведома пользователя. Именно поэтому попап из первого примера будет заблокирован, а из второго – нет.

Событие onfocus в javascript: получение фокуса

Пример: Необходимо, чтобы содержимое текстового поля и поля для ввода (textarea) выделялось при получении этими элементами фокуса.

Выделение происходит при помощи метода самих объектов:

Выполнение:

Будем использовать служебное слово this:

…
function selectContents (Obj) { 
	Obj.select() ; 
}
…

<body>
<input type="text" size="30" onfocus="selectContents(this)"> 
<textarea rows="3" cols="50" onfocus="selectContents(this)"> 
<textarea>

В примере оба объекта (и ) имеют событие , которое вызывает функцию . В качестве параметра функции передается сам объект (на это указывает служебное слово ). В функции вызывается метод для выделения объекта.

Задание js11_3. Необходимо реализовать выше описанный пример без использования функции (обработка события в качестве значения атрибута события)

Пример: создайте веб-страницу с тегом изображения в виде гиперссылки. По щелчку на гиперссылке (картинке) вызывать функцию открытия той же картинки (увеличенной) в отдельном окне

1
2
3
4
5
6
7

function displayPicture(){	
var myWin=window.open("","bigPic"); // open - метод создания и открытия нового окна
	myWin.document.open();
	myWin.focus(); // переносим фокус в новое окно
	myWin.document.write("<h1>Большое фото</h1><img src='Фото026.jpg'>"); // добавляем теги в новое окно
	myWin.document.close(); // закрываем окно
}

…
<a href="javascript: displayPicture()">
<img src="Фото026.jpg" width="300" alt="увеличить" >
<a>

link jQuery Migrate Plugin

We have created the
to simplify the transition from older versions of jQuery. The plugin restores deprecated features and behaviors so that older code will still run properly on newer versions of jQuery. Use the uncompressed development version to diagnose compatibility issues, it will generate warnings on the console that you can use to identify and fix problems. Use the compressed production version to simply fix compatibility issues without generating console warnings.

There are two versions of Migrate. The first will help you update your pre-1.9 jQuery code to jQuery 1.9 up to 3.0. You can get that version here:

The second version helps you update code to run on jQuery 3.0 or higher, once you have used Migrate 1.x and upgraded to jQuery 1.9 or higher:

Итого

Говоря о стандартах, у нас есть:

Спецификация DOM

описывает структуру документа, манипуляции с контентом и события, подробнее на https://dom.spec.whatwg.org.

Спецификация CSSOM

Описывает файлы стилей, правила написания стилей и манипуляций с ними, а также то, как это всё связано со страницей, подробнее на https://www.w3.org/TR/cssom-1/.

Спецификация HTML

Описывает язык HTML (например, теги) и BOM (объектную модель браузера) – разные функции браузера: , , и так далее, подробнее на https://html.spec.whatwg.org. Тут берётся за основу спецификация DOM и расширяется дополнительными свойствами и методами.

Кроме того, некоторые классы описаны отдельно на https://spec.whatwg.org/.

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

Когда вам нужно будет прочитать о каком-то свойстве или методе, справочник на сайте Mozilla https://developer.mozilla.org/ru/search тоже очень хороший ресурс, хотя ничто не сравнится с чтением спецификации: она сложная и объёмная, но сделает ваши знания максимально полными.

Для поиска чего-либо обычно удобно использовать интернет-поиск со словами «WHATWG » или «MDN », например https://google.com?q=whatwg+localstorage, https://google.com?q=mdn+localstorage.

А теперь давайте перейдём к изучению DOM, так как страница – это основа всего.

Итого

• Всплывающее окно открывается с помощью вызова .
• Метод возвращает ссылку на новое окно или , если окно было заблокировано.
• Современные браузеры блокируют окна, если вызвано не в результате действия посетителя.
• Обычно открывается вкладка, но если заданы размеры и позиция – то именно окно.
• Новое окно имеет ссылку на родительское в .
• Окна могут общаться между собой как угодно, если они из одного источника. Иначе действуют жёсткие ограничения безопасности.

Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, с помощью технологии AJAX, а показать – в элементе , расположенным над страницей (). Ещё одна альтернатива – тег .

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

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