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