В чем разница между окном, экраном и документом в Javascript?

244

Я вижу, что эти термины используются взаимозаменяемо как глобальная среда для DOM. В чем разница (если она есть) и когда мне следует использовать каждый из них?

javascript TimeEmit
источник

Ответы:

250

Windowявляется основным корнем объекта JavaScript, также называемым global objectв браузере, также может рассматриваться как корень объектной модели документа. Вы можете получить к нему доступ какwindow

window.screenили просто screenнебольшой информационный объект о физических размерах экрана.

window.documentили просто documentявляется основным объектом потенциально видимой (или еще лучше: визуализированной) объектной модели / DOM документа.

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

Питер Арон Зентаи
источник
46
Документ может быть больше окна - окно является «видимой» частью вашего браузера.
Мэнди
1
@ Сделайте элемент HTML, если он не является частью документа, невидимым. Вы можете создавать iframe,
чьи
27
Комментарий от @Mandy путает windowс окном просмотра . A window- это объект JavaScript для вкладки браузера или <iframe>(или устаревший <frame>). Окно просмотра - это прямоугольник визуализированного вида documentна вкладке или в рамке.
Беннет Браун
2
window.document или документ все время один и тот же?
BOZ
2
так как окно является глобальным объектом - к каждому свойству / методу его можно получить доступ без фактического записи [window.], поэтому window.document может быть записан как просто документ, и, конечно, он указывает на то же самое - как само свойство это то же самое только что сослались на несколько способов.
Питер Арон Зентаи
102

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

А как насчет объекта документа тогда? Объект документа - это ваш html, aspx, php или другой документ, который будет загружен в браузер. Документ на самом деле загружается внутри объекта окна и имеет доступные ему свойства, такие как заголовок, URL, cookie и т. Д. Что это действительно означает? Это означает, что если вы хотите получить доступ к свойству для окна, это window.property, если это документ, это window.document.property, который также доступен в сокращении как document.property.

дом

Это кажется достаточно простым. Но что происходит, когда вводится IFRAME?

IFrame

Арлан Т
источник
14
Вводит в заблуждение тот, кто пытается изучить основы: «Объект документа - это ваш HTML, ASPX, PHP или другой документ, который будет загружен в браузер». Браузер отображает HTML и CSS и выполняет JavaScript. Файлы с серверными языками, такими как PHP, не видны в браузере.
Беннет Браун
Это действительно полезное объяснение, за которым следует картинка для лучшего понимания ..
Фарис Райхан,
49

Вкратце, с более подробной информацией ниже,

  • window это контекст выполнения и глобальный объект для JavaScript этого контекста
  • document содержит DOM, инициализированный при разборе HTML
  • screen описывает полный экран физического дисплея

См W3C и Mozilla ссылки на подробную информацию об этих объектах. Самые основные отношения между этими тремя в том , что каждая вкладка браузера имеет свой собственный window, и windowимеет window.documentи window.screenсвойства. Вкладки браузера windowявляются глобальным контекстом, поэтому documentи screenссылаются на window.documentи window.screen. Более подробная информация о трех объектах приведена ниже, следуя JavaScript Фланагана: Полное руководство .

window

Каждая вкладка браузера имеет свой собственный windowобъект верхнего уровня . Каждый <iframe>(и устаревший <frame>) элемент также имеет свой собственный windowобъект, вложенный в родительское окно. Каждое из этих окон получает свой отдельный глобальный объект. window.windowвсегда ссылается window, но window.parentи window.topможет относиться к окружающим окнам, предоставляя доступ к другим контекстам выполнения. В дополнение к documentи screenописано ниже, windowсвойства включают в себя

  • setTimeout()и setInterval()привязка обработчиков событий к таймеру
  • location давая текущий URL
  • historyс методами back()и forward()давая изменчивую историю вкладки
  • navigator описание программного обеспечения браузера

document

Каждый windowобъект имеет documentобъект для визуализации. Эти объекты частично запутываются, потому что HTML-элементы добавляются в глобальный объект при назначении уникального идентификатора. Например, во фрагменте HTML

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

На элемент абзаца можно ссылаться любым из следующих:

  • window.holyCow или window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

У windowобъекта также есть screenобъект со свойствами, описывающими физическое отображение:

  • свойства экрана widthи heightполный экран

  • Свойства экрана availWidthи availHeightопустить панель инструментов

Часть экрана, отображающая визуализированный документ, является областью просмотра в JavaScript, что может сбивать с толку, потому что мы называем часть экрана приложения окном, когда говорим о взаимодействии с операционной системой. getBoundingClientRect()Способ по любому documentэлементу будет возвращать объект с top, left, bottom, и rightсвойством , описывающее местоположение элемента в окне просмотра.

Беннет Браун
источник
есть эквивалентная инструкция для window.onloadиспользования объекта документа?
FilipeCanatto
@FilipeCanatto см stackoverflow.com/questions/588040/...
Bennett Brown
48

windowЯвляется фактическим глобальным объектом.

screen экран, он содержит свойства отображения пользователя.

Это documentгде DOM.

Нит Тёмный Абсол
источник
11
documentтакже может быть window.document, screenможет быть window.screenи windowможет быть window.window(или window.window.window) :-P
Rocket Hazmat
6
@PeterAronZentai: Это потому, что windowэто глобальная переменная, которая делает его свойством глобального windowобъекта. :-)
Ракета Хазмат
1
Мне нужно открыть новую страницу с помощью ajax, я хочу заменить всю текущую страницу новой. Должен ли я использовать либо $ (документ) .load (страница); или $ (окно) .load (страница); ?
Мартин Эй Джей
11

windowсодержит все, так что вы можете позвонить window.screenи window.documentполучить эти элементы. Проверьте эту скрипку, красиво печатая содержимое каждого объекта: http://jsfiddle.net/JKirchartz/82rZu/

Вы также можете увидеть содержимое объекта в инструментах firebug / dev, например:

console.dir(window);
console.dir(document);
console.dir(screen);

windowявляется корнем всего, screenимеет размеры экрана и documentявляется верхним DOM-объектом. так что вы можете думать об этом как windowо супер document...

JKirchartz
источник
1

Окно - это первое, что загружается в браузер. Этот оконный объект имеет большинство свойств, таких как длина, innerWidth, innerHeight, name, если он был закрыт, его родительские элементы и многое другое.

Объект документа - это ваш html, aspx, php или другой документ, который будет загружен в браузер. Документ на самом деле загружается внутри объекта окна и имеет доступные ему свойства, такие как заголовок, URL, cookie и т. Д. Что это действительно означает? Это означает, что если вы хотите получить доступ к свойству для окна, то это window.property, если это документ, это window.document.property, который также доступен кратко как document.property.

Манжунатх Радди
источник