Это седьмой день моего участия в августовском испытании обновлений, подробности о мероприятии:Испытание августовского обновления

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

Обзор

в браузере,windowобъект (примечание,wнижний регистр) относится к текущему окну браузера. Он также является объектом верхнего уровня текущей страницы, то есть объектом верхнего уровня, а все остальные объекты являются его подчиненными. Если переменная не объявлена, по умолчанию она является свойством объекта верхнего уровня.

a = 1;
window.a // 1

В приведенном выше кодеa— это переменная, которая присваивается напрямую без объявления и автоматически становится свойством объекта верхнего уровня.

windowУ него есть свое значение сущности, но он не подходит в качестве объекта верхнего уровня высшего уровня Это ошибка дизайна языка. Когда язык был первоначально разработан, первоначальная идея заключалась в том, что чем меньше объектов будет встроено в язык, тем лучше, что повысит производительность браузера. Поэтому языковой дизайнер Брендан Эйх поставилwindowОбъект обрабатывается как объект верхнего уровня, и все необъявленные переменные, которым присвоены значения, автоматически становятсяwindowсвойства объекта. Такой дизайн делает невозможным обнаружение необъявленных переменных на этапе компиляции, но сегодня нет возможности их исправить.

globalThis

ES11 представил globalThis для унификации с nodejs в браузере.globalThis === window, в узлахglovalThis === global

Свойства объекта окна

window.name

window.nameСвойство представляет собой строку, представляющую имя текущего окна браузера. Окну не обязательно нужно имя, этот атрибут в основном используется с гиперссылками и формами.targetиспользование имущества.

window.name = 'Hello World!';
console.log(window.name)
// "Hello World!"

Это свойство может сохранять только строки. Если записанное значение не является строкой, оно будет автоматически преобразовано в строку. Емкость хранилища этого значения варьируется от браузера к браузеру, но в целом она может достигать нескольких МБ.

Это свойство не исчезнет, ​​пока окно браузера не будет закрыто. Например, посетитеa.com, скрипт страницы устанавливаетwindow.name, а затем загружается в том же окнеb.com, скрипт новой страницы может читать настройки предыдущей страницыwindow.name. Это также относится к обновлениям страниц. Как только окно браузера закрывается, значение, сохраненное этим свойством, исчезает, поскольку окно больше не существует.

окно.закрыто, окно.открывается

window.closedСвойство возвращает логическое значение, указывающее, закрыто ли окно.

window.closed // false

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

var popup = window.open();

if ((popup !== null) && !popup.closed) {
  // 窗口仍然打开着
}

window.openerСвойство представляет родительское окно, которое открывает текущее окно. Если текущее окно не имеет родительского окна (т. е. открыто прямо в адресной строке), вернутьnull.

window.open().opener === window // true

Приведенное выше выражение откроет новое окно, а затем вернетtrue.

Если связь между двумя окнами не требуется, рекомендуетсяopenerсвойство явно установлено вnull, что может снизить некоторые риски безопасности.

var newWin = window.open('example.html', 'newWindow', 'height=400,width=400');
newWin.opener = null;

В приведенном выше коде дочернее окноopenerсвойство установлено наnull, нет возможности общаться между двумя окнами.

пройти черезopenerproperties вы можете получить глобальные свойства и методы родительского окна, но только когда два окна имеют одинаковое происхождение (см. главу «Ограничения одинакового происхождения»), и одно из окон открывается другим.<a>добавление элементаrel="noopener"Свойство может предотвратить получение родительского окна вновь открытым окном и снизить риск изменения URL-адреса родительского окна вредоносными веб-сайтами.

<a href="https://an.evil.site" target="_blank" rel="noopener">
恶意网站
</a>

окно.себя, окно.окно

window.selfа такжеwindow.windowВсе свойства указывают на само окно. Эти два свойства доступны только для чтения.

window.self === window // true
window.window === window // true

окно.кадры, окно.длина

window.framesСвойство возвращает массивоподобный объект, элементами которого являются все окна фреймов на странице, включаяframeэлементы иiframeэлемент.window.frames[0]Представляет первое окно кадра на странице.

еслиiframeэлемент установленidилиnameатрибут, то вы можете использовать значение атрибута для ссылки на этотiframeокно. Например<iframe name="myIFrame">Можно использоватьframes['myIFrame']илиframes.myIFrameЦитировать.

framesСобственность на самом делеwindowПсевдоним объекта.

frames === window // true

следовательно,frames[0]также можно использоватьwindow[0]Выражать. Однако семантически,framesяснее и с учетомwindowЭто также глобальный объект, поэтому рекомендуется всегда использоватьframes[0]письма. Дополнительные сведения см. в разделе «Многооконный режим» ниже.

window.lengthСвойство возвращает общее количество фреймов, содержащихся на текущей веб-странице. Если текущая страница не содержитframeа такжеiframeэлемент, тоwindow.lengthпросто вернись0.

window.frames.length === window.length // true

Приведенный выше код говорит,window.frames.lengthа такжеwindow.lengthдолжны быть равны.

window.frameElement

window.frameElementСвойство в основном используется, когда текущее окно встроено в другую веб-страницу (встроенное<object>,<iframe>или<embed>element), возвращает узел элемента, в котором находится текущее окно. Если текущее окно является окном верхнего уровня или встроенная веб-страница имеет другое происхождение, это свойство возвращаетnull.

// HTML 代码如下
// <iframe src="about.html"></iframe>

// 下面的脚本在 about.html 里面
var frameEl = window.frameElement;
if (frameEl) {
  frameEl.src = 'other.html';
}

В приведенном выше кодеframeElпеременная<iframe>элемент.

окно.верхняя часть, окно.родитель

window.topАтрибут указывает на окно верхнего уровня, которое в основном используется для получения окна верхнего уровня в окне фрейма.

window.parentСвойство указывает на родительское окно. Если текущее окно не имеет родительского окна,window.parentуказать на себя.

if (window.parent !== window.top) {
  // 表明当前窗口嵌入不止一层
}

Для страниц, не содержащих фреймов, эти два свойства эквивалентныwindowобъект.

window.status

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

window.devicePixelRatio

window.devicePixelRatioСвойство возвращает число, представляющее соотношение между размером одного пикселя CSS и размером одного физического пикселя. То есть он показывает, из скольких физических пикселей состоит пиксель CSS. Его можно использовать для оценки среды отображения пользователя.Если это соотношение велико, это означает, что пользователь использует экран высокой четкости, поэтому может отображаться изображение с более крупными пикселями.

свойство размера позиции

Следующие свойства возвращаютсяwindowИнформация о местоположении и размере объекта.

(1) окно.экранX, окно.экранY

window.screenXа такжеwindow.screenYСвойства, возвращающие горизонтальное и вертикальное расстояние (в пикселях) левого верхнего угла окна браузера относительно левого верхнего угла текущего экрана. Эти два свойства доступны только для чтения.

(2) окно.innerHeight, окно.innerWidth

window.innerHeightа такжеwindow.innerWidthСвойства, возвращающие высоту и ширину видимой части веб-страницы в текущем окне, то есть размер (в пикселях) «окна просмотра». Эти два свойства доступны только для чтения.

Когда пользователь увеличивает масштаб страницы (например, увеличивает масштаб со 100 % до 200 %), эти два свойства уменьшаются. Потому что размер веб-страницы в пикселях в это время остается неизменным (например, ширина по-прежнему 960 пикселей), но пространство экрана, занимаемое каждым пикселем, становится больше, поэтому видимая часть (окно просмотра) становится меньше.

Обратите внимание, что эти два значения свойства включают высоту и ширину полосы прокрутки.

(3) окно.outerHeight, окно.outerWidth

window.outerHeightа такжеwindow.outerWidthСвойства возвращают высоту и ширину окна браузера, включая меню браузера и границу (в пикселях). Эти два свойства доступны только для чтения.

(4) окно.прокруткаX, окно.прокруткаY

window.scrollXСвойство возвращает расстояние горизонтальной прокрутки страницы,window.scrollYСвойство возвращает расстояние прокрутки страницы по вертикали в пикселях. Эти два свойства доступны только для чтения.

Обратите внимание, что возвращаемые значения этих двух свойств являются не целыми числами, а числами с плавающей запятой двойной точности. Если страница не прокручивается, их значения равны0.

Например, если пользователь прокручивает вертикальную полосу прокрутки вниз на 75 пикселей, тоwindow.scrollYЭто примерно 75. Пользователь тянет горизонтальную полосу прокрутки на 200 пикселей по горизонтали вправо,window.scrollXЭто около 200.

if (window.scrollY < 75) {
  window.scroll(0, 75);
}

В приведенном выше коде, если расстояние прокрутки страницы меньше 75 пикселей, страница прокручивается вниз на 75 пикселей.

(5) окно.pageXOffset, окно.pageYOffset

window.pageXOffsetсвойства иwindow.pageYOffsetатрибут, даwindow.scrollXа такжеwindow.scrollYпсевдоним.

свойства компонента

Свойство компонента возвращает объект компонента браузера. Такие свойства заключаются в следующем.

• window.locationbar: объект адресной строки
• window.menubar: объект строки меню
• window.scrollbars: объект полосы прокрутки окна
• window.toolbar: объект панели инструментов
• window.statusbar: объект строки состояния
• window.personalbar: Объект персональной панели инструментов, устанавливаемый пользователем.

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

window.locationbar.visible
window.menubar.visible
window.scrollbars.visible
window.toolbar.visible
window.statusbar.visible
window.personalbar.visible

глобальные свойства объекта

Свойства глобального объекта указывают на некоторые собственные глобальные объекты браузера.

• window.document:направлениеdocumentобъект, подробности см. в главе "объект документа". Обратите внимание, что это свойство имеет ограничение по гомологии. Только сценарии из одного и того же источника могут читать это свойство.
• window.location:направлениеLocationОбъект для получения информации об URL текущего окна. это эквивалентноdocument.locationАтрибуты, подробности см. в главе «Объект местоположения».
• window.navigator:направлениеNavigatorОбъект, используемый для получения информации об окружении, подробности см. в главе «Объект Navigator».
• window.history:направлениеHistoryОбъект, представляющий историю посещенных страниц браузера, подробности см. в главе «Объект истории».
• window.localStorage: Указывает на данные localStorage, хранящиеся локально, подробности см. в главе «Интерфейс хранилища».
• window.sessionStorage: Указывает на локально сохраненные данные sessionStorage, подробности см. в главе «Интерфейс хранилища».
• window.console:направлениеconsoleОбъект, используемый для управления консолью, подробности см. в главе «Объект консоли».
• window.screen:направлениеScreenОбъект, представляющий экранную информацию, подробности см. в главе «Экранный объект».

window.isSecureContext

window.isSecureContextСвойство возвращает логическое значение, указывающее, находится ли текущее окно в зашифрованной среде. Если это протокол HTTPS,true, иначе этоfalse.

методы объекта окна

window.alert(), window.prompt(), window.confirm()

window.alert(),window.prompt(),window.confirm()Оба являются глобальными методами взаимодействия браузера с пользователем. Они выводят различные диалоговые окна с просьбой ответить пользователю. Обратите внимание, что все диалоговые окна, открываемые этими тремя методами, представляют собой стили, единообразно заданные браузером, и их нельзя настроить.

(1) окно.предупреждение()

window.alert()Диалоговое окно, всплывающее методом, имеет только одну кнопку «ОК», которая часто используется для уведомления пользователя определенной информации.

window.alert('Hello World');

Диалог исчезнет, ​​только если пользователь нажмет кнопку «ОК». Пока всплывает диалоговое окно, окно браузера зависает, и пользователь ничего не может сделать, не нажав кнопку «ОК».

window.alert()Параметрами метода могут быть только строки, нельзя использовать стили CSS, но можно использовать\nУказывает новую строку.

alert('本条提示\n分成两行');

(2) окно.приглашение()

window.prompt()Диалоговое окно выскочило методом, под текстом подсказки есть поле ввода, предлагающее пользователю ввести информацию, и есть две кнопки «ОК» и «Отмена». Он часто используется для получения данных, введенных пользователем.

var result = prompt('您的年龄？', 25)

Приведенный выше код вызовет всплывающее диалоговое окно с текстовым приглашением «Ваш возраст?», в котором пользователю будет предложено ввести свой собственный возраст в диалоговом окне (по умолчанию отображается 25). Значение, введенное пользователем, будет сохранено в переменной как возвращаемое значение.result.

window.prompt()Возвращаемое значение может быть в двух случаях: это может быть строка (может быть пустая строка) илиnull. Конкретно разделить на три случая.

1. Пользователь вводит информацию и нажимает «ОК», а введенная пользователем информация является возвращаемым значением.
2. Пользователь не входит в информацию, нажмите «ОК», то значение по умолчанию ввода по умолчанию является возвращающим значением.
3. Пользователь нажал «Отмена» (или нажал кнопку ESC), возвращаемое значение равноnull.

window.prompt()Второй параметр метода является необязательным, но всегда лучше указать второй параметр в качестве значения по умолчанию для поля ввода.

(3) окно.подтвердить()

window.confirm()В появившемся диалоговом окне, кроме подсказки информации, есть только две кнопки «ОК» и «Отмена», которые часто используются для запроса согласия пользователя.

var result = confirm('你最近好吗？');

Приведенный выше код открывает диалоговое окно только с одной строкой текста «Как дела?», и пользователь выбирает, нажать «ОК» или «Отмена».

confirmМетод возвращает логическое значение, если пользователь нажимает «ОК», возвращаетtrue; если пользователь нажмет "Отмена", вернутьfalse.

var okay = confirm('Please confirm this message.');
if (okay) {
  // 用户按下“确定”
} else {
  // 用户按下“取消”
}

confirmОдно из применений , заключается в том, что когда пользователь покидает текущую страницу, появляется диалоговое окно с вопросом, действительно ли пользователь хочет уйти.

window.onunload = function () {
  return window.confirm('你确定要离开当面页面吗？');
}

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

окно.открыть(), окно.закрыть(), окно.стоп()

(1) окно.открыть()

window.openЭтот метод используется для создания другого окна браузера, аналогично опции «Новое окно» в меню браузера. Возвращает ссылку на новое окно или, если новое окно не может быть создано, возвращаетnull.

var popup = window.open('somefile.html');

Приведенный выше код заставит браузер открыть новое окно с URL-адресом под текущим доменным именем.somefile.html.

openВсего метод может принимать три параметра.

window.open(url, windowName, [windowFeatures])

• url: строка, представляющая URL-адрес нового окна. Если опущено, URL-адрес по умолчаниюabout:blank.
• windowName: Строка, указывающая имя нового окна. Если окно с таким именем уже существует, занять его и больше не создавать новое окно. Если его не указать, он будет использоваться по умолчанию._blank, что означает создание нового окна без имени. Кроме того, есть несколько предустановленных значений,_selfпредставляет текущее окно,_topпредставляет окно верхнего уровня,_parentУказывает предыдущее окно.
• windowFeatures: строка, содержимое представляет собой пару ключ-значение, разделенную запятыми (подробности см. ниже), указывающую параметры нового окна, например наличие панели подсказок, панели инструментов и т. д. Если этот параметр опущен, по умолчанию открывается новое окно с полным пользовательским интерфейсом. Если новое окно является существующим окном, этот параметр не действует, и браузер использует параметры предыдущего окна.

Ниже приведен пример.

var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);

В приведенном выше коде говорится, что открывается новое окно высотой и шириной 200 пикселей, без адресной строки, но со строкой состояния и полосами прокрутки, которые позволяют пользователю изменять размер.

Третий параметр может задавать следующие свойства.

• слева: расстояние (в пикселях) нового окна от крайнего левого края экрана. Обратите внимание, что новое окно должно быть видимым и не может быть установлено за пределами экрана.
• top: расстояние (в пикселях) нового окна от верхней части экрана.
• height: Высота (в пикселях) области содержимого нового окна, не менее 100.
• width: Ширина (в пикселях) области содержимого нового окна, не менее 100.
• externalHeight: высота (в пикселях) всего окна браузера, не менее 100.
• OuterWidth: Ширина всего окна браузера не менее 100.
• menubar: отображать ли строку меню.
• панель инструментов: отображать ли панель инструментов.
• location: Отображать ли адресную строку.
• personalbar: отображать ли панель инструментов, установленную пользователем.
• статус: отображать ли строку состояния.
• зависимый: зависит ли от родительского окна. Если зависит, то при сворачивании родительского окна окно также сворачивается, а при закрытии родительского окна окно также закрывается.
• Минимизуемое: есть ли кнопка минимизации, предоставленаdialog=yes.
• noopener: Новое окно будет отрезано от родительского окна, т.е.window.openerвозврат собственностиnull, родительское окноwindow.open()метод также возвращаетnull.
• resizable: Можно ли изменить размер нового окна.
• полосы прокрутки: разрешить ли появление полос прокрутки в новых окнах.
• диалог: есть ли в строке заголовка нового окна элементы управления для максимизации, минимизации и восстановления исходного размера.
• titlebar: отображать ли строку заголовка в новом окне.
• alwaysRaised: отображать ли в верхней части всех окон.
• alwaysLowered: отображать ли внизу родительского окна.
• close: отображать ли кнопку закрытия в новом окне.

Для тех свойств, которые можно включать и выключать, установите значениеyesили1Или открыть без какого-либо значения, напримерstatus=yes,status=1,statusполучит тот же результат. Если вы хотите отключить его, не пишитеno, но просто опустите это свойство. То есть если в третьем параметре заданы одни свойства, то другие не заданыyes/noсвойства будут установлены наno,Толькоtitlebarи кнопка закрытия (их значения по умолчанию равныyes).

Для вышеуказанных свойств имя свойства и значение свойства соединяются знаком равенства, а свойства разделяются запятыми.

'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'

Кроме того,open()Хотя второй параметр метода может указывать существующее окно, это не означает, что другими окнами можно произвольно управлять. Чтобы предотвратить управление несвязанными окнами, браузер позволяет двум окнам иметь одно и то же происхождение или целевое окно открывается текущей веб-страницей.openметод указывает на это окно.

window.openМетод возвращает ссылку на новое окно.

var windowB = window.open('windowB.html', 'WindowB');
windowB.window.name // "WindowB"

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

Ниже приведен еще один пример.

var w = window.open();
console.log('已经打开新窗口');
w.location = 'http://example.com';

Приведенный выше код сначала открывает новое окно, затем в окне появляется диалоговое окно, а затем URL-адрес направляется наexample.com.

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

var popup = window.open();
if (popup === null) {
  // 新建窗口失败
}

(2) окно.закрыть()

window.closeМетод используется для закрытия текущего окна, обычно используется только для закрытияwindow.openспособ создания нового окна.

popup.close()

Этот метод действителен только для окон верхнего уровня,iframeЭтот метод недействителен для окон в фреймах.

(3) окно.стоп()

window.stop()Этот метод точно эквивалентен нажатию кнопки «Стоп» в браузере, которая остановит загрузку таких объектов, как изображения, видео и т. д., которые уже загружены или ожидают загрузки.

window.stop()

окно.moveTo(), окно.moveBy()

window.moveTo()Метод используется для перемещения окна браузера в указанное положение. Он принимает два параметра, горизонтальное расстояние и вертикальное расстояние от верхнего левого угла окна до верхнего левого угла экрана, в пикселях.

window.moveTo(100, 200)

Приведенный выше код перемещает окно на экран(100, 200)позиция.

window.moveBy()метод для перемещения окна в относительное положение. Он принимает два параметра: расстояние по горизонтали для перемещения левого верхнего угла окна вправо и расстояние по вертикали для перемещения вниз в пикселях.

window.moveBy(25, 50)

Приведенный выше код перемещает окно на 25 пикселей вправо и на 50 пикселей вниз.

Чтобы предотвратить злоупотребление этими двумя методами и перемещение окна пользователя по желанию, есть только один случай, когда браузер позволяет скрипту перемещать окно: окно используется сwindow.open()Метод только что создан и имеет только одну вкладку в окне. В остальных случаях использование двух вышеуказанных способов недопустимо.

окно.resizeTo(), окно.resizeBy()

window.resizeTo()Метод используется для масштабирования окна до заданного размера.

Он принимает два параметра, первый — масштабируемая ширина окна (outerWidthсвойства, в том числе полосы прокрутки, строки заголовка и т. д.), а второй — высота окна после масштабирования (outerHeightАтрибуты).

window.resizeTo(
  window.screen.availWidth / 2,
  window.screen.availHeight / 2
)

Приведенный выше код масштабирует текущее окно до половины ширины и высоты доступной области экрана.

window.resizeBy()Метод используется для увеличения окна. это сwindow.resizeTo()Разница в том, что он масштабируется на относительную величину,window.resizeTo()Необходимо указать масштабированный абсолютный размер.

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

window.resizeBy(-200, -200)

Приведенный выше код уменьшает ширину и высоту текущего окна на 200 пикселей.

окно.scrollTo(), окно.scroll(), окно.scrollBy()

window.scrollToМетод используется для прокрутки документа до указанной позиции. Он принимает два параметра, представляющих координаты страницы левого верхнего угла окна после прокрутки.

window.scrollTo(x-coord, y-coord)

Он также может принимать объект конфигурации в качестве параметра.

window.scrollTo(options)

объект конфигурацииoptionsЕсть три свойства.

• top: вертикальная координата верхнего левого угла страницы после прокрутки, то есть координата y.
• left: горизонтальная координата верхнего левого угла страницы после прокрутки, то есть координата x.
• behavior: Строка, указывающая способ прокрутки, с тремя возможными значениями (smooth,instant,auto), значение по умолчаниюauto.

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});

window.scroll()путьwindow.scrollTo()Псевдоним метода.

window.scrollBy()Метод используется для прокрутки веб-страницы на заданное расстояние (в пикселях). Он принимает два параметра: пиксели для горизонтальной прокрутки вправо и пиксели для вертикальной прокрутки вниз.

window.scrollBy(0, window.innerHeight)

Приведенный выше код используется для прокрутки веб-страницы вниз на один экран.

Если вместо прокрутки всего документа вы хотите прокрутить элемент, вы можете использовать следующие три свойства и метода.

• Element.scrollTop
• Element.scrollLeft
• Element.scrollIntoView()

window.print()

window.printМетод выпрыгнет из диалогового окна печати, что имеет тот же эффект, что и пользователь, щелкающий команду «Печать» в меню.

Ниже приведены общие коды кнопок печати.

document.getElementById('printLink').onclick = function () {
  window.print();
}

Не настольные устройства (например, мобильные телефоны) могут не иметь возможности печати, и об этом можно судить в данном случае.

if (typeof window.print === 'function') {
  // 支持打印功能
}

окно.фокус(), окно.размытие()

window.focus()Метод активирует окно, давая ему фокус и появляясь перед другими окнами.

var popup = window.open('popup.html', 'Popup Window');

if ((popup !== null) && !popup.closed) {
  popup.focus();
}

Сначала проверьте приведенный выше кодpopupЕсть ли еще окно, после подтверждения активации окна.

window.blur()Способ снятия фокуса с окна.

Запускается, когда текущее окно получает фокусfocusСобытие; срабатывает, когда текущее окно теряет фокусblurмероприятие.

window.getSelection()

window.getSelectionметод возвращаетSelectionОбъект, представляющий текст, который в данный момент выбирает пользователь.

var selObj = window.getSelection();

использоватьSelectionобъектtoStringметод для получения выделенного текста.

var selectedText = selObj.toString();

окно.getComputedStyle(), окно.matchMedia()

window.getComputedStyle()Метод принимает узел элемента в качестве параметра и возвращает объект, содержащий окончательную информацию о стиле для элемента, как подробно описано в главе «Операции с CSS».

window.matchMedia()метод проверки CSSmediaQueryУтверждения, подробности см. в главе «Операции CSS».

window.requestAnimationFrame()

window.requestAnimationFrame()метод сsetTimeoutАналогично отсрочке выполнения функции. разница заключается в том,setTimeoutдолжен указать время задержки,window.requestAnimationFrame()Он откладывается до следующей перерисовки браузера, а следующая перерисовка будет выполнена после выполнения. Перерисовка обычно выполняется один раз каждые 16 мс, но браузер автоматически регулирует эту скорость, например, когда веб-страница переключается на фоновую вкладку,requestAnimationFrame()исполнение будет приостановлено.

Если функция изменит макет веб-страницы, ее обычно помещают вwindow.requestAnimationFrame()Он выполняется внутри, что может сэкономить системные ресурсы и сделать эффект веб-страницы более плавным. Потому что медленные устройства будут перекомпоновывать и перерисовывать медленнее, а более быстрые устройства будут иметь более высокую скорость.

Этот метод принимает функцию обратного вызова в качестве параметра.

window.requestAnimationFrame(callback)

В приведенном выше кодеcallbackявляется функцией обратного вызова.callbackПри выполнении его параметр представляет собой высокоточную метку времени, переданную системой (performance.now()Возвращаемое значение ) в миллисекундах указывает время, прошедшее с момента загрузки веб-страницы.

window.requestAnimationFrame()Возвращаемое значение представляет собой целое число, которое можно передать вwindow.cancelAnimationFrame(), используемый для отмены выполнения функции обратного вызова.

Ниже приведенwindow.requestAnimationFrame()Пример выполнения веб-анимации.

var element = document.getElementById('animate');
element.style.position = 'absolute';

var start = null;

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  // 元素不断向左移，最大不超过200像素
  element.style.left = Math.min(progress / 10, 200) + 'px';
  // 如果距离第一次执行不超过 2000 毫秒，
  // 就继续执行动画
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

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

window.requestIdleCallback()

window.requestIdleCallback()а такжеsetTimeoutТочно так же он также откладывает выполнение функции, но гарантирует, что функция обратного вызова будет отложена до тех пор, пока системные ресурсы не будут простаивать. То есть, если задача не очень критична, можно использоватьwindow.requestIdleCallback()Отложите его выполнение, чтобы сохранить производительность страницы.

следуетwindow.requestAnimationFrame()Отличие состоит в том, что последний указывает, что callback-функция будет выполняться при следующем переупорядочении браузера, проблема в том, что ресурсы системы могут не простаивать во время следующего переупорядочения, и не может быть гарантировано его выполнение в течение 16 миллисекунд;window.requestIdleCallback()Гарантируется, что функция обратного вызова будет выполнена, когда системные ресурсы простаивают.

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

window.requestIdleCallback(callback[, options])

callbackПараметр является функцией обратного вызова. Когда функция обратного вызова будет выполнена, система перейдет вIdleDeadlineобъект в качестве параметра.IdleDeadlineобъект имеетdidTimeoutсвойство (логическое значение, указывающее, является ли вызов тайм-аутом) иtimeRemaining()метод (возвращает количество миллисекунд, оставшихся в этом периоде простоя).

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

window.requestIdleCallback()Метод возвращает целое число. Это целое число может быть передано вwindow.cancelIdleCallback()Отменить функцию обратного вызова.

Ниже приведен пример.

requestIdleCallback(myNonEssentialWork);

function myNonEssentialWork(deadline) {
  while (deadline.timeRemaining() > 0) {
    doWorkIfNeeded();
  }
}

В приведенном выше кодеrequestIdleCallback()Используется для выполнения некритичных задачmyNonEssentialWork. Задача сначала подтверждает, что в этот период простоя осталось время, а затем фактически начинает выполнение задачи.

Уточняется следующееtimeoutпример.

requestIdleCallback(processPendingAnalyticsEvents, { timeout: 2000 });

Приведенный выше код указывает,processPendingAnalyticsEventsДолжен быть выполнен в течение следующих 2 секунд.

Если функция обратного вызова выполняется из-за тайм-аута, тоdeadline.timeRemaining()вернуть0,deadline.didTimeoutвернутьtrue.

Если выполняется несколько разwindow.requestIdleCallback(), указать несколько функций обратного вызова, то эти функции обратного вызова будут расположены в очереди и выполняться в порядке «первым пришел — первым обслужен».

мероприятие

windowОбъекты могут получать следующие события.

событие загрузки и свойство загрузки

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

window.onload = function() {
  var elements = document.getElementsByClassName('example');
  for (var i = 0; i < elements.length; i++) {
    var elt = elements[i];
    // ...
  }
};

Приведенный выше код получает указанный элемент и обрабатывает его после загрузки веб-страницы.

событие ошибки и свойство onerror

Срабатывает при возникновении ошибки в скрипте браузераwindowобъектerrorмероприятие. мы можем пройтиwindow.onerrorсвойство определяет функцию обратного вызова для этого события.

window.onerror = function (message, filename, lineno, colno, error) {
  console.log("出错了！--> %s", error.stack);
};

По историческим причинам,windowизerrorФункция обратного вызова события не принимает объект ошибки в качестве параметра, но может принимать всего пять параметров, и их значения следующие.

• сообщение об ошибке
• URL скрипта с ошибкой
• номер строки
• номер столбца
• объект ошибки

Старые браузеры поддерживают только первые три параметра.

Не все ошибки запускают JavaScripterrorСобытия (т.е. заставить JavaScript сообщить об ошибке). Как правило, это событие вызывается только ошибками в сценарии JavaScript, и такие ошибки, как несуществующий файл ресурсов, не вызываются.

Ниже приведен пример, который отображает предупреждение, если для всей страницы имеется более 3 необработанных ошибок.

window.onerror = function(msg, url, line) {
  if (onerror.num++ > onerror.max) {
    alert('ERROR: ' + msg + '\n' + url + ':' + line);
    return true;
  }
}
onerror.max = 3;
onerror.num = 0;

Следует отметить, что если URL-адрес скрипта и URL-адрес веб-страницы находятся в разных доменах (например, если используется CDN), браузер вообще не предоставит подробную информацию об ошибке, а только выдаст сообщение об ошибке. тип — «Ошибка сценария», а номер строки — 0, никакой другой информации. Это то, что браузер предотвращает утечку информации во внешние скрипты. Обходной путь - установить сервер, на котором находится скрипт.Access-Control-Allow-OriginИнформация заголовка HTTP.

Access-Control-Allow-Origin: *

Затем на веб-странице<script>установить на этикеткеcrossoriginАтрибуты.

<script crossorigin="anonymous" src="//example.com/file.js"></script>

код вышеcrossorigin="anonymous"Указывает, что для чтения файла не требуется никакой идентификационной информации, т. е. не требуется никаких файлов cookie и сведений об аутентификации HTTP. Если установленоcrossorigin="use-credentials", это означает, что браузер будет загружать файлы cookie и данные аутентификации HTTP, а также необходимо будет открыть информацию заголовка HTTP на стороне сервера.Access-Control-Allow-Credentials.

Свойство прослушивателя событий объекта окна

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

• window.onafterprint:afterprintФункция прослушивания событий.
• window.onbeforeprint:beforeprintФункция прослушивания событий.
• window.onbeforeunload:beforeunloadФункция прослушивания событий.
• window.onhashchange:hashchangeФункция прослушивания событий.
• window.onlanguagechange: languagechangeфункция слушателя.
• window.onmessage:messageФункция прослушивания событий.
• window.onmessageerror:MessageErrorФункция прослушивания событий.
• window.onoffline:offlineФункция прослушивания событий.
• window.ononline:onlineФункция прослушивания событий.
• window.onpagehide:pagehideФункция прослушивания событий.
• window.onpageshow:pageshowФункция прослушивания событий.
• window.onpopstate:popstateФункция прослушивания событий.
• window.onstorage:storageФункция прослушивания событий.
• window.onunhandledrejection: Необработанный объект PromiserejectФункция прослушивания событий.
• window.onunload:unloadФункция прослушивания событий.

Многооконный режим

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

ссылка на окно

Скрипты в каждом окне могут ссылаться на другие окна. Браузеры предоставляют некоторые специальные переменные для возврата в другие окна.

• top: Окно верхнего уровня, то есть окно верхнего уровня
• parent:Родительское окно
• self: Текущее окно, которое само

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

if (window.top === window.self) {
  // 当前窗口是顶层窗口
} else {
  // 当前窗口是子窗口
}

Следующий код возвращает историю доступа родительского окна на один раз назад.

window.parent.history.back();

В соответствии с этими переменными браузер также предоставляет некоторые специальные имена окон дляwindow.open()метод,<a>Этикетка,<form>Этикетки и т.п. цитаты.

• _top: Окно верхнего уровня
• _parent:Родительское окно
• _blank: новое окно

Следующий код означает открытие ссылки в окне верхнего уровня.

<a href="somepage.html" target="_top">Link</a>

элемент iframe

дляiframeвстроенное окно,document.getElementByIdметод, чтобы получить узел DOM окна, а затем использоватьcontentWindowприобретение собственностиiframeузел содержитwindowобъект.

var frame = document.getElementById('theFrame');
var frameWindow = frame.contentWindow;

В приведенном выше кодеframe.contentWindowдочернее окноwindowобъект. Затем, с учетом того же ограничения источника, свойства внутри дочернего окна могут быть прочитаны.

// 获取子窗口的标题
frameWindow.title

<iframe>элементальcontentDocumentсвойства, вы можете получить дочернее окноdocumentобъект.

var frame = document.getElementById('theFrame');
var frameDoc = frame.contentDocument;

// 等同于
var frameDoc = frame.contentWindow.document;

<iframe>Элементы соблюдают политику одного и того же источника.Только когда родительское окно и дочернее окно находятся в одном домене, между ними может использоваться скриптовая связь, в противном случае используйте толькоwindow.postMessageметод.

<iframe>Внутри окна используйтеwindow.parentОтносится к родительскому окну. Если текущая страница не имеет родительского окна, тоwindow.parentСвойство возвращается само. Следовательно, поwindow.parentРавноwindow.selfЧтобы определить, будь то текущее окноiframeокно.

if (window.parent !== window.self) {
  // 当前窗口是子窗口
}

<iframe>окноwindowобъект, естьframeElementимущество, возврат<iframe>узел DOM в родительском окне. Для невстроенных окон это свойство равноnull.

var f1Element = document.getElementById('f1');
var f1Window = f1Element.contentWindow;

f1Window.frameElement === f1Element // true
window.frameElement === null // true

Свойство window.frames

window.framesСвойство возвращает массивоподобный объект, все элементы которого являются дочерними окнами.windowобъект. Вы можете использовать это свойство для достижения взаимной ссылки между окнами. Например,frames[0]Вернитесь к первому дочернему окну,frames[1].frames[2]Возвращает третье дочернее окно внутри второго дочернего окна,parent.frames[1]Возвращает второе дочернее окно родительского окна.

Уведомление,window.framesЗначением каждого члена является окно внутри фрейма (т. е. окно фрейма).windowобъект), вместоiframeУзел DOM метки в родительском окне. Если вы хотите получить дерево DOM внутри каждого кадра, вам нужно использоватьwindow.frames[0].documentписьма.

Кроме того, если<iframe>элемент установленnameилиidатрибут, то значение атрибута автоматически станет глобальной переменной и может быть передано черезwindow.framesСсылка на свойство, возвращает дочернее окноwindowобъект.

// HTML 代码为 <iframe id="myFrame">
window.myFrame // [HTMLIFrameElement]
frames.myframe === myFrame // true

Кроме того,nameЗначение свойства автоматически станет именем дочернего окна и может использоваться вwindow.openвторой параметр метода или<a>а также<frame>помеченtargetАтрибуты.