Источник: Unsplash

Объект document и window — это два родительских объекта, к которым мы можем получить доступ с помощью JavaScript. Сам объект документа подчинен объекту окна. Я думаю, что все их знают, потому что они вездесущи, особенно при разработке веб-приложений с ванильным javascript.

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

Обработка щелчков правой кнопкой мыши в браузере — контекстное меню

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

Щелкните правой кнопкой мыши и заблокируйте отображение контекстного меню по умолчанию.

<div id=”nocontext”>No context menu available for this</div><script>
noContext = document.getElementById(‘nocontext’)noContext.addEventListener(‘contextmenu’, (event) => {
  event.preventDefault()
})
</script>

Итак, мы настроили EventListener для нашего ‹div›, который должен выполняться при вызове контекстного меню, т.е. по правому клику. Он возвращает событие, которое мы можем заблокировать стандартной функцией preventDefault.

Случай по умолчанию будет похож на щелчок правой кнопкой мыши в контекстном меню. Но с помощью preventDefault мы блокируем это. Так что ничего не происходит.

Конечно, мы можем не только заблокировать стандартное событие, но также можем выполнять все виды кода, когда пользователь щелкает правой кнопкой мыши. Затем мы можем объединить это с preventDefault, чтобы предложить собственное контекстное меню, например:

contextAvailable.addEventListener(‘contextmenu’, (e) => {
  console.log(‘you rightclicked this’)
  e.preventDefault()
})

Режим оформления вашего документа

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

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

document.designMode = "on"

Теперь вы можете просто редактировать отображаемый веб-сайт, как если бы это был документ Word. Довольно круто, да?
designMode знает только два состояния: включено и выключено. Поэтому, если вы хотите деактивировать его, просто сделайте следующее:

document.designMode = "off"

Если вы хотите защитить отдельные элементы от изменения содержимого, вы можете присвоить им следующий атрибут: (Тогда вы сможете только удалить их полностью, но не манипулировать ими)

<i contenteditable = "false">This is not editable.</i>

Скопируйте что-нибудь в буфер обмена пользователей с кодом

Первоначально для этой цели предназначалась хорошо известная document.execCommand(), но теперь она считается устаревшей.
Вместо этого теперь доступен API буфера обмена для автоматического копирования контента с помощью JavaScript.
Его можно использовать через объект navigator, который подчинен объекту window.

Давайте посмотрим на пример, где после нажатия кнопки мы копируем введенный текст в поле ввода в буфер обмена:

Получить статус документа

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

Поэтому с помощью document.readyState мы можем получить доступ к текущему состоянию документа и принимать дальнейшие решения на основе результата.

Вот возможные результаты, которые может вернуть document.readyState:

  • uninitialized — еще не начал загрузку
  • loading — загружается
  • загружено — было загружено
  • интерактивный — загружено достаточно, и пользователь может с ним взаимодействовать.
  • Complete — Полностью загружен
    Источник: https://www.w3schools.com/jsref/prop_doc_readystate.asp

Если немного поэкспериментировать с этим на практике, можно получить интересные результаты. Для этого я создал небольшой шаблон HTML, с помощью которого мы выводим статус в разных местах. Каждый из внешних скриптов просто содержит console.log(document.readyState)

Вот, в хронологическом порядке, что затем регистрирует наш сайт:

  • нормально:загрузка
  • script-tag: загрузка
  • отложить: интерактивный
  • асинхронный: интерактивный
  • загрузить тело:завершено

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

Так что в любом случае статус «завершен», если мы выводим статус с событием onload.

Работа с фокусом/активным элементом

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

Определить, какой элемент имеет фокус

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

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

var x = document.activeElement.idconsole.log(x)

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

Изменение фокуса вручную

Особенно в отношении UX иногда может быть полезно избавить пользователя от выбора элементов. Например, если он сделал неправильный ввод в одной форме, и мы хотим, чтобы он изменил свой ввод в каждом поле ввода:

document.getElementById(‘input1’).focus()

Чтение текущего стиля элемента

В больших и динамичных веб-приложениях мы постоянно меняем активный стиль любого элемента в модели DOM.
Мы также можем вывести это на два в любое время, поэтому проверьте, какие атрибуты и значения CSS имеют наши элементы.

  1. element.styleтакже может использоваться для чтения стилей, но предназначен для их редактирования
  2. Window.getComputedStyle()предназначен для получения текущего стиля

Итак, с помощью последней функции мы можем получить целый объект со всеми стилями элемента:

let box = document.getElementById(‘box’)console.log(window.getComputedStyle(box)) // CSSStyleDeclaration{}

Но мы также можем более точно вывести отдельные атрибуты и соответствующие им значения:

let box = document.getElementById(‘box’)console.log(
  window.getComputedStyle(box)
  .getPropertyValue(‘background-color’) // E.g. rgb(0, 128, 0)
)

Работа с размером браузера и отображаемым веб-сайтом

Конечно, в современной веб-разработке не обойтись без размеров. Вот что вам нужно:

  • window.outerWidth
  • window.outerHeight

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

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

  • window.innerWidth
  • window.innerHeight

Например, вот как можно сделать элемент полноэкранным:

elem.style.width = window.innerWidth + ‘px’

Примечание от JavaScript In Plain English

Мы запустили три новых издания! Проявите любовь к нашим новым публикациям, подписавшись на них: AI на простом английском, UX на простом английском, Python на простом английском — спасибо и продолжайте учиться!

Мы также всегда заинтересованы в помощи в продвижении качественного контента. Если у вас есть статья, которую вы хотели бы отправить в какое-либо из наших изданий, отправьте нам электронное письмо по адресу [email protected], указав свое имя пользователя на Medium, и мы добавим вас в качестве автора. Также сообщите нам, к каким публикациям вы хотите добавиться.