Повторно изучите объект окна JavaScript

Добро пожаловать в общедоступную учетную запись внешнего интерфейса [Xiaoyao classmate]

ECMAScript — это ядро JavaScript, но если вы хотите использовать JavaScript в Интернете, BOM — это реальное ядро, BOM предоставляет ряд объектов и функций для доступа к браузеру, эти функции не зависят от какого-либо веб-контента.

1. оконный объект

Основным объектом спецификации является окно, представляющее экземпляр браузера. В браузере объект окна имеет двойную роль: это не только интерфейс для доступа к окну браузера через JS, но и глобальный объект, указанный ES. Это означает, что любой объект, переменная и функция, определенные на веб-странице, имеют окно в качестве глобального объекта, поэтому они имеют доступ к таким методам, как parseInt(),

1.1 Глобальный охват

Поскольку объект окна также играет роль объекта Global в ES, все переменные и функции, объявленные в глобальной области видимости, станут свойствами и методами объекта окна.

var age = 29
function sayAge() {
    console.log(this.age)
}
console.log(window.age) // 29
sayAge()    // 29
window.sayAge() // 29

Стук в точку: Браузер IE платформы window Mobile не позволяет создавать новые свойства или методы непосредственно на объекте окна через форму window.property=value, однако все переменные и функции, объявленные в глобальной области видимости, все равно будут изменены на член объекта окна.

1.2 Отношение окон и фрейм

Если страница содержит фреймы, каждый фрейм имеет собственный объект окна, который хранится в коллекции фреймов. В коллекции фреймов вы можете получить доступ к соответствующему объекту окна по числовому индексу или имени фрейма, каждый объект окна имеет свойство имени, которое содержит имя фрейма.

Стук в точку: В случае использования фреймворка в браузере будет несколько глобальных объектов. Глобальные переменные, определенные в каждом фреймворке, автоматически станут свойствами объекта окна в фреймворке. Поскольку каждый объект окна содержит конструктор нативного типа, каждый фреймворк имеет свой собственный набор конструкторов. Эти конструкторы идут один за другим. Соответствующие, но не равный.

1.3 Положение окна

Существует множество свойств и методов для определения и изменения положения оконного объекта. И IE, и Chrome предоставляют свойства screenLeft и screenTop, которые используются для указания положения окна относительно левой и верхней части экрана соответственно.

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

1.4 Размер окна

Каждый отдельный браузер обеспечивает innerWidth, innerHeight, externalWidth и externalHeight. Но в разных браузерах границы значений, которые они получают, тоже разные.

1.5 Навигация и открытие окон

Мы можем открыть определенный URL-адрес с помощью window.open() или мы можем открыть новое окно браузера. Этот метод принимает четыре параметра:URL-адрес для загрузки, цель окна, строка атрибута и логическое значение, указывающее, должна ли новая страница заменить текущую загруженную страницу в истории браузера.. Обычно требуется только один параметр URL.

1.6 Прерывистые вызовы и вызовы по тайм-ауту

Потому что JS — это однопоточный язык, но он позволяет планировать выполнение кода в определенные моменты, задавая значения таймаута и прерывистые значения времени. Первый выполняет код через указанное время, а второй выполняет код каждый указанный момент времени. Методы, как показано ниже

setTimeout('方法名','延迟执行时间')

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

clearTimeout(timeoutId)

Код, вызываемый таймаутом, выполняется в глобальной области видимости, поэтому значение this в функции обычно указывает на объект окна.

setInterval('方法名','间个时间')

clearInterval(intervalId)

2. объект местоположения

location 是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。常用的就是用来打开新页面等。 Параметры следующие:

Имя свойства	иллюстрировать
hash	Возвращает хэш в URL # сзади, если URL отсутствует, возвращает пустую строку
host	Возвращает номер порта сервера
hostname	Возвращает имя сервера без номера порта
herf	Возвращает URL текущей страницы
pathname	Возвращает каталог или файл в URL
port	Возвращает номер порта, указанный в URL
protocol	Возвращает протокол, используемый страницей
search	Возвращает строку запроса URL

2.1 Параметры строки запроса

С помощью location.search вы можете запрашивать параметры, содержащиеся в URL-адресе, разбивать строку запроса по символу & и возвращать массив строк в формате имя-значение.

2.2 Позиционное управление

Использование объекта местоположения может изменить местоположение браузера несколькими способами. Используйте метод assign() и передайте ему URL-адрес, который немедленно открывает новый URL-адрес и создает запись в истории браузера.

3. объект истории

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

3.1 go()

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

3.2 back()

Может имитировать обратную операцию браузера

3.3 forward()

Имитация кнопки «вперед» в браузере

4. Резюме

Объектная модель браузера (BOM) опирается на объект окна, который представляет окно браузера и видимую область страницы. В то же время объект окна также является глобальным объектом в ES, поэтому все глобальные переменные и функции являются его свойствами, а все нативные конструкторы и другие функции также существуют в его пространстве имен.

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

Есть несколько оконных указателей, которые можно использовать для ссылки на другие фреймы, включая родительский фрейм.
Верхний объект всегда указывает на крайний фрейм, то есть на все окно браузера.
Родительский объект представляет фрейм, содержащий текущий фрейм, а сам объект ссылается на окно.
Используйте объект местоположения для программного доступа к системе навигации браузера. Установите соответствующие свойства, вы можете изменить URL-адрес браузера в разделах или в целом
Вызовите метод replace(), чтобы перейти к новому URL-адресу, который заменяет страницу, отображаемую в настоящее время в истории браузера.
Объект navigator предоставляет информацию о браузере. Это зависит от браузера пользователя.
Спецификация также имеет два объекта:экран и история. Объект экрана содержит информацию, связанную с дисплеем клиента. Объект history обращается к истории браузера. Вы можете перемещаться назад или вперед на любую страницу в истории.

Повторно изучите серию js

Введение в JavaScript повторное изучение js

Изучите JS заново, чтобы использовать JavaScript в HTML

Повторное изучение основных концепций JavaScript в js (on) => типы данных

Повторное изучение основных концепций JavaScript в js (середина) => оператор

Повторное изучение основных концепций JavaScript в js (ниже) => оператор

Повторное изучение переменных js JavaScript, проблем с областью действия и памятью

Повторное изучение эталонного типа js в JavaScript

Повторное изучение JavaScript объектно-ориентированного программирования js (создание объектов)

Повторное изучение объектно-ориентированного программирования в JavaScript => Наследование

Повторное изучение анонимных функций в JavaScript

Вступительная серия ES6