Тестирование медиавыражений программно
DOM предоставляет возможности, позволяющие тестировать результат медиавыражений программно, с помощью интерфейса MediaQueryList
(en-US), его методов и свойств. Однажды, создав объект MediaQueryList
(en-US) вы можете проверить результат выражения или получать уведомление, при изменении результата.
Создание списка медиавыражений
Прежде, чем вы сможете оценить результаты медиавыражений, вам необходимо создать объект MediaQueryList
(en-US), отражающий выражение. Для этого используется метод window.matchMedia
.
Например, настройка списка выражений, который определяет, находится ли устройство в альбомной или книжной ориентации:
var mediaQueryList = window.matchMedia("(orientation: portrait)");
Проверка результата выражения
После того, как вы создали свой список медиавыражений, вы можете проверить результат выражения, посмотрев на значение его свойства matches
:
if (mediaQueryList.matches) {
/* Окно просмотра в настоящее время находится в книжной ориентации */
} else {
/* Окно просмотра в настоящее время находится в альбомной ориентации */
}
Получение уведомлений о выражениях
Если вам необходимо постоянно следить за изменениями в результате выражения, эффективнее зарегистрировать обработчик, чем вытаскивать результат выражений. Для этого вызовите метод addListener()
объекта MediaQueryList
(en-US) с функцией колбэка, которая вызывается при изменении статуса медиавыражения (например, тест медиавыражения переходит от true
к false
):
var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка выражений.
function handleOrientationChange(mql) { ... } // Определение колбэк-функции для обработчика событий.
mediaQueryList.addListener(handleOrientationChange); // Добавление колбэк-функции в качестве обработчика к списку выражений.
handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
Этот код создаёт список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.
Функция handleOrientationChange()
будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:
function handleOrientationChange(evt) {
if (evt.matches) {
/* Окно просмотра в настоящее время находится в книжной ориентации */
} else {
/* Окно просмотра в настоящее время находится в альбомной ориентации */
}
}
Выше, мы определяем параметры как evt
— event объект. Это имеет значение, поскольку новые реализации MediaQueryList
(en-US) обрабатывают события стандартным способом. Они больше не используют нестандартный механизм MediaQueryListListener
(en-US) , а используют стандартную настройку обработчика событий, передавая объект event MediaQueryListEvent
(en-US) как аргумент колбэк-функции.
Этот event объект также включает свойства media
(en-US) и matches
(en-US), поэтому вы можете запросить эти свойства MediaQueryList
путём прямого доступа к нему или доступа к event объекту.
Уведомление о завершении выражения
Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод removeListener()
для MediaQueryList
(en-US), передав ему имя, ранее определённой функции:
mediaQueryList.removeListener(handleOrientationChange);
Поддержка браузеров
MediaQueryList interface
BCD tables only load in the browser