Front-end, вы действительно знаете об этих способах использования BOM?

JavaScript
Front-end, вы действительно знаете об этих способах использования BOM?

BOM

1. Введение в спецификацию и подготовка к написанию

Введение в спецификацию

Спецификация: объектная модель браузераОбъектная модель браузера

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

Изучение спецификации — это изучение объекта окна в JavaScript.

письменный фон

Видимый《你不知道的JavaScript》Все мои друзья знают, что в книге есть такая формулаJavaScript = ES + DOM + BOM

И ES, и DOM нам знакомы, и это также верно в повседневной разработке.Большую часть времени мы используем синтаксис ES + DOM для программирования. Спецификация будет использоваться время от времени. Причина, по которой я вдруг захотел написать эту заметку, заключается в том, что я не был знаком с этой частью знаний несколько дней назад, что вызвало производственную ошибку. К счастью, она была обнаружена тестируемыми во время онлайн-теста. , иначе пришлось бы запоминать.

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

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

2. Оконные объекты

Основным объектом спецификации является окно, представляющее экземпляр браузера.

В браузере окно играет двойную роль: интерфейсный объект, к которому JavaScript обращается в браузере, и глобальный объект в ES.

Это означает, что любой объект, переменная или функция на веб-странице использует окно в качестве своего глобального объекта.

​ -- "Продвинутое программирование на JavaScript"

С точки зрения непрофессионала, все переменные, объекты, функции и т. д. на веб-странице в конечном счете являются подсвойствами объекта окна.

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

В ECMAScript объект окна играет роль объекта Global, то есть все переменные и функции, объявленные в глобальной области видимости, станут свойствами и методами окна, доступ к которым можно получить черезwindow.属性名（或方法名）позвонить напрямую

Следует отметить следующие моменты

  • использоватьwindow.attrобъявленные переменные иvarМежду объявленными переменными есть разница, используйтеvarобъявленная переменная, не может быть использованаdeleteудалить, использоватьwindow.Объявленные переменные можно удалить
  • В JavaScript попытка использовать необъявленную переменную вызывает ошибку, но черезwindowЗапрос объекта для необъявленных переменных будет возвращать толькоundefined

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

пройти черезwindow.open()Либо перейдите к определенному URL-адресу, либо откройте новое окно браузера.

Функция принимает четыре параметра:

  • URL
  • оконная цель
  • Строка символов для нового окна, например:'height=400,width=400,top=10,left=10,resizable=yes'
  • Логическое значение, следует ли заменить текущую страницу (действительно только, если не открывается новое окно)

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

// 如果存在topFrame窗口，则在topFrame窗口打开指定url,否则新创建一个窗口并命名为topFrame

window.open('htttp://www.maxiaofei.com','topFrame')
==> <a href="http://www.maxiaofei.com" target="topFrame"></a>

window.open()Вернет ссылку на новое окно, которое является новым окномwindowобъект

var myWin = window.open('http://www.maxiaofei.com','myWin')

window.close()только для прохожденияwindow.open()открытое окно

Вновь созданныйwindowобъект имеетopenerсвойство, указывающее на исходный объект окна, открывший его

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

Примечание:window.locationа такжеdocument.locationотносится к одному и тому же объекту.locationобеwindowсвойства предметов, а такжеdocumentсвойства объекта

3.1 Свойства объекта локации

Возьмите этот URL в качестве примера:http://www.baidu.com:8080/web/javascript/test.js#12345?a=10&b=20

Имя свойства пример иллюстрировать
hash #12345 Символ после # в utl, если нет, вернуть пустую строку
host www.baidu.com:80 Имя сервера и номер порта
hostname www.baidu.com Доменное имя без номера порта
href Woohoo. Baidu.com:8080/Web/Java SCR… полный URL
pathname web/javascript/test.js путь к файлу под сервером
port 8080 Номер порта URL, нет NULL
protocol http используемый протокол
search ?a=10&b=20 Строка запроса URL-адреса, обычно ? что следует

3.2 Возвращаемый объект параметра строки пользовательского запроса

//假设当前URL：'http://www.maxiaofei.com/Web/test.js?name=mafei&age=24&sex=m'

function getQueryObj(){
    let location = window.location;
    let queryStr = location.search.length > 0 ? location.search.substring(1) : '';
    let obj = {},item;
    let queryArr = queryStr.length > 0 ? queryStr.split('&') : []
    
    for(let i=0;i<queryArr.length;i++){
        item = queryArr[i].split('=');
        obj[item[0]] = item[1]
    }

    return obj
}

getQueryObj()
//=》{
    name: 'maxiaofei',
    age: 24,
    sex: 'm'
}

3.3 Изменить местоположение

каждая модификацияlocationизhashЛюбое свойство, кроме , страница перезагрузится с новым URL-адресом.

window.location = 'http://www.maxiaofei.com'

location.search = '?name=mafei&age=18'

location.hostname = 'www.baidu.com'

location.pathname = 'web/html/a.html'

location.port = '1234'

КромеhashЛюбое изменение, отличное от значения, приведет к созданию новой записи в истории браузера, по которой можно перейти на предыдущую страницу с помощью кнопки «Назад» браузера, доступ к которой можно получить черезreplace()способ запретить такое поведение, используйтеreplaceОткрытая страница, не могу вернуться на предыдущую страницу

// 尝试在浏览器控制台输入如下代码，浏览器将不支持回退
location.replace('http://www.baidu.com')

3.4 Перезагрузка

пройти черезlocation.reload()метод перезагрузки страницы

  • location.reload(): перезагрузить (возможно из кеша)
  • location.reload(true): перезагрузить (перезагрузить с сервера)

4. объект навигатора

navigatorОбъект в основном используется для получения свойств браузера и определения типа браузера.

navigatorЕсть много свойств объекта, и совместимость сложнее.Нажмите, чтобы узнать больше о свойствах навигатора

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

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

​ -- "Продвинутое программирование на JavaScript"

общая история следующих трех методов и свойства

1. history.go()

  • Принимает целое число или строковый параметр: перейти на страницу, содержащую указанную строку в самой последней записи
history.go('maixaofei.com')		//向前或者向后寻找指定字符串页面，没有找到则无响应
  • Когда параметр представляет собой целое число, положительное число означает переход вперед на указанную страницу, а отрицательное число означает возврат на указанную страницу.
history.go(3)	//向前跳转三个记录
history.go(-1)	//向后跳转一个记录

2. history.forward()

  • Перейти вперед на одну страницу

3. history.back()

  • Перейти на одну страницу назад

4. history.length

  • Получить количество записей истории, если это первая открытая страница, тоhistory.length == 0, вы можете использовать это свойство, чтобы определить, является ли текущая открытая веб-страница первой веб-страницей, открытой окном.

Суммировать

Эта статья в основном вводит несколько обычно используемых объектов в модели объекта браузера (BOM), включаяnavigator,window, location, history

  1. windowЭто одновременно и глобальный объект JavaScript, и экземпляр спецификации. Доступ ко всем глобальным методам, свойствам и свойствам в спецификации можно получить черезwindow.звонить
  2. windowВ качестве примера спецификации наиболее часто используемые методы:window.open(),window.close(), которые используются для открытия и закрытия страницы окна браузера соответственно.При этом следует отметить, что страница, открытая методом open, может быть закрыта только методом close.
  3. locationЭтот объект также является объектом спецификации, который используется чаще. Он в основном используется для управления некоторой информацией, связанной с URL-адресом. В дополнение к изменению любых атрибутов, кроме хэша, страница будет перезагружена, и будет добавлена ​​​​дополнительная запись истории к записи истории.
  4. locationобъект имеет другойreload()Метод используется для ручной перезагрузки страницы, метод принимает необязательный параметр, которыйtrueКогда имеется в виду перезагрузка с сервера, иначе страница может быть перезагружена из кеша браузера
  5. объект местоположенияЕсть еще один специальный метод,location.replace(), этот метод может перезаписать текущую страницу и перезагрузить ее без создания истории в истории
  6. объект навигатораВ основном он используется для получения некоторой информации, связанной с браузером, при его использовании нужно обращать внимание на совместимость. Может использоваться для получения классов браузеров (Chrome, safrai, FireFox, Edge, IE) и т. д.
  7. объект историиВ основном он используется для управления историей URL-адресов браузера. Вы можете использовать параметры для перехода вперед, назад или перехода к указанному URL-адресу. в состоянии пройтиlengthАтрибут получает количество записей, чтобы определить, является ли текущая страница первой открытой страницей.
Категории