Каждая среда JavaScript имеет глобальный объект. Любые переменные, созданные в глобальной области видимости, на самом деле являются свойствами этого объекта, а любые функции — его методами. В среде браузера глобальный объект — это windowобъект, представляющий окно браузера, содержащее
В этой статье мы рассмотрим некоторые важные способы использования объекта Window:
Объектная модель браузера
Получение информации о браузере в JavaScript
Получение и использование истории браузера
Создание и управление окнами
Получение размера экрана и сведений об отображении
Этот пост адаптирован из моего известного курса: JavaScript: от новичка до ниндзя.
Объектная модель браузера
Объектная модель браузера (или сокращенно BOM) — это набор свойств и методов, содержащих информацию о браузере и экране компьютера. Например, мы можем узнать, какой браузер используется для просмотра страницы (правда, этот способ ненадежен). Мы также можем узнать размеры экрана, на котором он просматривается, и какие страницы были посещены до текущей страницы. Его также можно использовать для довольно сомнительной практики создания всплывающих окон, если вы хотите раздражать своих пользователей.
Официального стандарта для BOM не существует, хотя есть ряд свойств и методов, которые поддерживаются всеми основными браузерами, что делает его своего рода стандартом
Спецификация имеет смысл только в среде браузера
Помните, что JavaScript можно запускать в разных средах. Спецификация имеет смысл только в среде браузера. Это означает, что в других средах (таких как Node.js), вероятно, не будет window объекта, хотя у них все еще будет глобальный объект; например, в Node.js есть объект с именем global.
Если вы не знаете имя глобального объекта, вы также можете сослаться на него, используя ключевое слово this в глобальной области видимости. Следующий код предоставляет быстрый способ присвоить переменную global глобальному объекту:
// from within the global scope
const global = this;
Выход на глобальный уровень
Глобальные переменные — это переменные, которые создаются без использования ключевых слов const, let или var. Доступ к глобальным переменным возможен во всех частях программы.
Глобальные переменные — это фактические свойства глобального объекта. В среде браузера глобальным объектом является window объект. Это означает, что любая созданная глобальная переменная на самом деле является свойством window объекта, как показано в примере ниже:
x = 6; // global variable created
>> 6
window.x // same variable can be accessed as a property of the window object
>> 6
// both variables are exactly the samewindow.x === x;
>> true
Как правило, вы должны обращаться к глобальным переменным без использования window объекта; это меньше печатать, и ваш код будет более переносимым между средами. Исключением является, если вам нужно проверить, была ли определена глобальная переменная. Например, следующий код выдаст ошибку ReferenceError, если x она не была определена:
if (x) {
// do something
}
Однако, если доступ к переменной осуществляется как к свойству window объекта, то код все равно будет работать, так как window.x будет просто return false, то есть блок кода не будет оцениваться:
if (window.x) {
// do something
}
Некоторые функции, с которыми мы уже встречались, такие как parseInt () и isNaN (), на самом деле являются методами глобального объекта, что в среде браузера делает их методами windowобъекта:
Как и в случае с переменными, к ним обычно не обращаются через windowобъект.
Диалоги
Есть три функции, создающие диалоги в браузерах: alert (), confirm () и prompt (). Они не являются частью стандарта ECMAScript, хотя все основные браузеры поддерживают их как методы windowобъекта.
Метод window.alert () приостановит выполнение программы и отобразит сообщение в диалоговом окне. Сообщение предоставляется в качестве аргумента метода и undefinedвсегда возвращается:
window.alert ('Hello’) ;
>> undefined
Диалоговое окно предупреждений
Диалоговое окно предупреждений
Этот window.confirm () метод остановит выполнение программы и отобразит диалоговое окно подтверждения, в котором отображается сообщение, предоставленное в качестве аргумента, и предлагаются варианты «ОК» или «Отмена». Он возвращает логические значения, true если пользователь нажимает «ОК» и false если пользователь нажимает «Отмена»:
window.confirm ('Do you wish to continue?') ;
>> undefined
Подтвердить диалог
Подтвердить диалог
Метод window.prompt () остановит выполнение программы. Он отображает диалоговое окно, в котором отображается сообщение, предоставленное в качестве аргумента, а также поле ввода, которое позволяет пользователю вводить текст. Затем этот текст возвращается в виде строки, когда пользователь нажимает OK. Если пользователь нажимает Отмена, null возвращается:
window.prompt ('Please enter your name:') ;
Диалоговое окно подсказки
Диалоговое окно подсказки
Используйте оконные диалоги с осторожностью
Стоит еще раз повторить, что эти методы остановят выполнение программы на своем пути. Это означает, что все прекратит обработку в момент вызова метода, пока пользователь не нажмет OK или Cancel. Это может вызвать проблемы, если программе нужно одновременно обработать
В некоторых случаях эту функциональность можно использовать как преимущество, например, window.confirm () диалоговое окно можно использовать в качестве окончательной проверки, чтобы узнать, хочет ли пользователь удалить ресурс. Это не позволит программе продолжить работу и удалить ресурс, пока пользователь решит, что делать.
Также стоит иметь в виду, что большинство браузеров позволяют пользователям отключить повторное появление любых диалогов, что означает, что на них нельзя полагаться.
Информация о браузере
Объект windowимеет ряд свойств и методов, предоставляющих информацию о браузере пользователя.
Получить информацию о браузере с помощью объекта Navigator
У window объекта есть navigator свойство, которое возвращает ссылку на Navigator объект. Объект Navigator содержит информацию об используемом браузере. Его userAgent свойство будет возвращать информацию об используемом браузере и операционной системе. Например, если я запускаю следующую строку кода, это показывает, что я использую Safari версии 10 в Mac OS:
window.navigator.userAgent
>>«Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8»
Однако не полагайтесь на эту информацию, так как пользователь может изменить ее так, чтобы она маскировалась под другой браузер. Также может быть трудно понять
Получить сведения об URL: путь, протокол, порты и т. д.
Свойство window.locationпредставляет собой объект, содержащий информацию об
Свойство hrefвозвращает полный
window.location.href
>> «https: //www.sitepoint.com/premium/books/
Это свойство (как и большинство других в этом разделе) доступно для чтения и записи, что означает, что его также можно изменить путем присваивания. Если это сделать, страница будет перезагружена с использованием нового свойства. Например, ввод следующей строки в консоль браузера приведет к перенаправлению страницы на домашнюю страницу SitePoint:
window.location.href = 'https: //www.sitepoint.com/'
>> «https: //www.sitepoint.com/»
Свойство protocol возвращает строку, описывающую используемый протокол (например http, https, pop2, ftp и т. д.).: Обратите внимание, что в конце есть двоеточие ():
window.location.protocol
>> «https:»
Свойство host возвращает строку, описывающую домен текущего URL -адреса и номер порта (это часто опускается, если используется порт 80 по умолчанию):
window.location.host
>> «www.sitepoint.com»
Свойство hostnameвозвращает строку, описывающую домен текущего URL:
window.location.hostname
>> «www.sitepoint.com»
Свойство portвозвращает строку, описывающую номер порта, хотя возвращает пустую строку, если порт явно не указан в
window.location.port
>> «»
Свойство pathnameвозвращает строку пути, следующего за доменом:
window.location.pathname
>> «/premium/books/
Свойство searchвозвращает строку, начинающуюся с «?» за которыми следуют параметры строки запроса. Возвращает пустую строку, если параметры строки запроса отсутствуют. Вот что я получаю, когда ищу «Даррен Джонс» на SitePoint:
window.location.search
>> «? q=darren%20jones&firstSearch=true»
Свойство hash возвращает строку, начинающуюся с символа «#», за которым следует идентификатор фрагмента. Возвращает пустую строку, если нет идентификатора фрагмента:
window.location.hash
>> «»
Свойство origin возвращает строку, которая показывает протокол и домен, из которого была создана текущая страница. Это свойство доступно только для чтения, поэтому его нельзя изменить:
window.location.origin
>> «https: //www.sitepoint.com»
Объект window.locationтакже имеет следующие методы:
Этот reload () метод можно использовать для принудительной перезагрузки текущей страницы. Если ему задан параметр true, он заставит браузер перезагрузить страницу с сервера вместо использования кэшированной страницы.
Этот assign () метод можно использовать для загрузки другого ресурса с
window.location.assign ('https: //www.sitepoint.com/')
Метод replace () почти такой же, как и assign () метод, за исключением того, что текущая страница не будет сохранена в истории сеанса, поэтому пользователь не сможет вернуться к ней с помощью кнопки «Назад».
Метод toString () возвращает строку, содержащую весь URL:
window.location.toString () ;
>> «https: //www.sitepoint.com/javascript/»
История браузера
Свойство window.history можно использовать для доступа к информации о любых ранее посещенных страницах в текущем сеансе браузера. Не путайте это с новым API истории HTML5. (Подробности см. в http://www.sitepoint.com/javascript-history-pushstate/сообщении.)
Свойство window.history.length показывает, сколько страниц было просмотрено до перехода на текущую страницу.
Метод window.history.go () можно использовать для перехода на определенную страницу, где 0 — текущая страница:
window.history.go (1) ; // goes forward 1 page
window.history.go (0) ; // reloads the current page
window.history.go (-1) ; // goes back 1 page
Существуют также методы window.history.forward () и window.history.back (), которые можно использовать для перехода вперед и назад на одну страницу соответственно, точно так же, как с помощью кнопок браузера вперед и назад.
Управление окнами
Новое окно может быть открыто с помощью window.open () метода. В качестве первого параметра используется URL открываемой страницы, вторым параметром является заголовок окна, а третьим параметром — список атрибутов. Это также можно присвоить переменной, поэтому позже в коде можно будет сослаться на окно:
const popup = window.open ('https: //sitepoint.com’,'SitePoint’,'width=700, height=700, resizable=yes’) ;
Всплывающее окно
Всплывающее окно
Этот close () метод можно использовать для закрытия окна, если у вас есть ссылка на него:
popup.close () ;
Также возможно переместить окно с помощью window.moveTo () метода. Это принимает два параметра, которые являются координатами X и Y экрана, на который должно быть перемещено окно:
window.moveTo (0,0) ;
// will move the window to the
Вы можете изменить размер окна, используя window.resizeTo () метод. Он принимает два параметра, которые определяют ширину и высоту размеров окна с измененным размером:
window.resizeTo (600,400) ;
Раздражающие всплывающие окна
Эти методы были в значительной степени ответственны за то, чтобы дать JavaScript дурную славу, поскольку они использовались для создания надоедливых всплывающих окон, которые обычно содержали навязчивую рекламу. С точки зрения удобства использования также плохая идея изменять размер или перемещать окно пользователя.
Многие браузеры блокируют всплывающие окна и запрещают вызов некоторых из этих методов в определенных случаях. Например, вы не можете изменить размер окна, если открыто более одной вкладки. Вы также не можете перемещать или изменять размер окна, которое не было создано с помощью window.open ().
Редко бывает разумно использовать
Информация на экране
Объект window.screen содержит информацию об экране, на котором отображается браузер. Узнать высоту и ширину экрана в пикселях можно с помощью свойств height и соответственно: width
window.screen.height
>> 1024
window.screen.width
>> 1280
И можно использовать для определения высоты и ширины экрана, за исключением любых меню операционной системы availHeight: availWidth
window.screen.availWidth
>> 1280
window.screen.availHeight
>> 995
Свойство colorDepth можно использовать для определения разрядности цвета монитора пользователя, хотя для этого существует несколько вариантов использования, кроме сбора пользовательской статистики:
window.screen.colorDepth;
>> 24
Больше полезного на мобильных устройствах
Объект Screen чаще используется для мобильных устройств. Это также позволяет вам делать такие вещи, как выключать экран устройства, обнаруживать изменение его ориентации или блокировать его в определенной ориентации.
Используйте с осторожностью
Многие из методов и свойств, описанных в предыдущем разделе, в прошлом использовались для сомнительных действий, таких как сниффинг пользовательского агента или определение размеров экрана для принятия решения о том, отображать определенные элементы или нет. Эти методы (к счастью) теперь заменены лучшими методами, такими как
Объект документа
Каждый window объект содержит document объект. Этот объект имеет свойства и методы, которые имеют дело со страницей, загруженной в окно. В главе 6 мы рассмотрели объектную модель документа, а также свойства и методы, используемые для управления элементами на странице. Объект document содержит несколько других методов, на которые стоит обратить внимание.
document.write ()
Метод write () просто записывает строку текста на страницу. Если страница уже загружена, она полностью заменит текущий документ:
document.write ('Hello, world!') ;
Это заменит весь документ строкой Hello, world!. В строку можно включить HTML, и это станет частью дерева DOM. Например, следующий фрагмент кода создаст узел тега и дочерний текстовый узел:
document.write ('Hello, world!') ;
Этот document.write () метод также можно использовать в документе внутри
Использование document.write () сильно не одобряется, поскольку его можно реально использовать только путем смешивания JavaScript с документом HTML. Есть еще несколько очень редких законных способов его использования, но
