JavaScript Window — The Browser Object Model

The Browser Object Model (BOM) allows JavaScript to «talk to» the browser.

The Browser Object Model (BOM)

There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.

The Window Object

The window object is supported by all browsers. It represents the browser’s window.

All global JavaScript objects, functions, and variables automatically become members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window object:

Window Size

Two properties can be used to determine the size of the browser window.

Both properties return the sizes in pixels:

• window.innerHeight — the inner height of the browser window (in pixels)
• window.innerWidth — the inner width of the browser window (in pixels)

The browser window (the browser viewport) is NOT including toolbars and scrollbars.

For Internet Explorer 8, 7, 6, 5:

• document.documentElement.clientHeight
• document.documentElement.clientWidth
• or
• document.body.clientHeight
• document.body.clientWidth

A practical JavaScript solution (covering all browsers):

Example

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

The example displays the browser window’s height and width: (NOT including toolbars/scrollbars)

Открытие окон и методы window

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/popup-windows.

Всплывающее окно («попап» – от англ. Popup window) – один из старейших способов показать пользователю ещё один документ.

В этой статье мы рассмотрим открытие окон и ряд тонких моментов, которые с этим связаны.

…При запуске откроется новое окно с указанным URL.

Большинство браузеров по умолчанию создают новую вкладку вместо отдельного окна, но чуть далее мы увидим, что можно и «заказать» именно окно.

Блокировщик всплывающих окон

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

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

Как же браузер понимает – посетитель вызвал открытие окна или нет?

Для этого при работе скрипта он хранит внутренний «флаг», который говорит – инициировал посетитель выполнение или нет. Например, при клике на кнопку весь код, который выполнится в результате, включая вложенные вызовы, будет иметь флаг «инициировано посетителем» и попапы при этом разрешены.

А если код был на странице и выполнился автоматически при её загрузке – у него этого флага не будет. Попапы будут заблокированы.

Полный синтаксис window.open

Функция возвращает ссылку на объект window нового окна, либо null , если окно было заблокировано браузером.

url URL для загрузки в новое окно. name Имя нового окна. Может быть использовано в параметре target в формах. Если позднее вызвать window.open() с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое. params Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.

Значения параметров params .

1. Настройки расположения окна:

left/top (число)

Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционировано за пределами экрана.

Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.

Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.

1. Свойства окна:

menubar (yes/no) Скрыть или показать строку меню браузера. toolbar (yes/no) Показать или скрыть панель навигации браузера (кнопки назад, вперёд, обновить страницу и остальные) в новом окне. location (yes/no) Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса. status (yes/no) Показать или скрыть строку состояния. С другой стороны, браузер может в принудительном порядке показать строку состояния. resizable (yes/no) Позволяет отключить возможность изменять размеры нового окна. Значение no обычно неудобно посетителям. scrollbars (yes/no) Разрешает убрать полосы прокрутки для нового окна. Значение no обычно неудобно посетителям.

1. Ещё есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: window.open.

Браузер подходит к этим параметрам интеллектуально. Он может проигнорировать их часть или даже все, они скорее являются «пожеланиями», нежели «требованиями».

• Если при вызове open указан только первый параметр, параметр отсутствует, то используются параметры по умолчанию. Обычно при этом будет открыто не окно, а вкладка, что зачастую более удобно.
• Если указана строка с параметрами, но некоторые yes/no параметры отсутствуют, то браузер выставляет их в no . Поэтому убедитесь, что все нужные вам параметры выставлены в yes .
• Когда не указан top/left , то браузер откроет окно с небольшим смещением относительно левого верхнего угла последнего открытого окна.
• Если не указаны width/height , новое окно будет такого же размера, как последнее открытое.

Доступ к новому окну

Вызов window.open возвращает ссылку на новое окно. Она может быть использована для манипуляции свойствами окна, изменения URL, доступа к его переменным и т.п.

В примере ниже мы заполняем новое окно содержимым целиком из JavaScript:

Make a link open a new window (not tab) [duplicate]

Is there a way to make a link open a new browser window (not tab) without using javascript?

5 Answers 5

With pure HTML you can’t influence this — every modern browser (= the user) has complete control over this behavior because it has been misused a lot in the past.

HTML option

You can open a new window (HTML4) or a new browsing context (HTML5). Browsing context in modern browsers is mostly «new tab» instead of «new window». You have no influence on that, and you can’t «force» modern browsers to open a new window.

In order to do this, use the anchor element’s attribute target [1] . The value you are looking for is _blank [2] .

JavaScript option

Forcing a new window is possible via javascript — see Ievgen’s excellent answer below for a javascript solution.

(!) However, be aware, that opening windows via javascript (if not done in the onclick event from an anchor element) are subject to getting blocked by popup blockers!

_{[1] This attribute dates back to the times when browsers did not have tabs and using framesets was state of the art. In the meantime, the functionality of this attribute has slightly changed (see MDN Docu)}

_{[2] There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent , _self or _top .}

Html browser window in windows

Browser.html is a research project aimed at building an experimental Servo browser in HTML. This project has 2 major pieces:

• Graphene: a runtime for building native apps in HTML. It’s currently in development and part of Servo.
• Browser.html: an experimental browser UI for desktop.

This repository is for Browser.html (the front-end). Active development of Graphene happens in the Servo repository. Questions? Check out the FAQ.

We welcome contributions from anyone. See CONTRIBUTING.md for help getting started.

There are two major components to the browser.html application.

1. Local server that serves application UI.
2. Client that is a application shell that connects to the server and renders served UI.

If you’re working on the Browser.html front-end, you’ll need Node.js to install all dependencies and run the development toolchain.

Once all dependencies are installed, you can run the server component with the following command:

Any changes to the source code will trigger a build, which is then automatically served. That will allow you to reload a client in order to see your changes. Alternatively you can use live-server to not only rebuild, but also trigger an automatic live code reload for the UI such that application state is preserved:

Window

Объект window представляет собой окно, содержащее DOM документ; свойство document указывает на DOM document, загруженный в данном окне. Окно текущего документа может быть получено с помощью свойства document.defaultView .

Данный раздел содержит описание всех методов, свойств и событий, доступных через объект window DOM. Объект window реализует интерфейс Window , который наследуется от интерфейса AbstractView . Некоторые дополнительные глобальные функции, пространства имён объектов, интерфейсы и конструкторы, как правило, не связанные с окном, но доступные в нем, перечислены в JavaScript ссылки и DOM ссылки.

В браузерах, поддерживающих вкладки, таком как Firefox, каждая вкладка содержит свой собственный объект window (и если вы пишете расширение, окно браузера тоже является отдельным объектом window — см. Работа с окнами в chrome коде). Таким образом, объект window не разделяется между разными вкладками в одном и том же окне. Некоторые методы, а именно window.resizeTo (en-US) и window.resizeBy (en-US) применяется для всего окна и не принадлежат объекту window отдельной вкладки. Как правило, если что-то логически нельзя отнести ко вкладке, это относят к окну.

Свойства

Данный интерфейс наследует свойства из интерфейса EventTarget и реализует свойства из WindowOrWorkerGlobalScope и миксин WindowEventHandlers .

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

Window.applicationCache (en-US) Только для чтения Объект OfflineResourceList , обеспечивающий для окна доступ к ресурсам вне сети. Window.closed Это API не было стандартизировано.

Только для чтения Свойство, указывающее было ли текущее окно закрыто или нет. Window.Components Это API не было стандартизировано.

Точка доступа к богатой функциональности XPCOM. Некоторые свойства, т.к. classes, доступны только для достаточно привилегированного кода. Web-код не должен использовать эти свойства. Window.console Это API не было стандартизировано.

Только для чтения Возвращает ссылку на объект консоли, обеспечивающего доступ к консоли браузера. Window.content (en-US) and Window._content Это API не было стандартизировано.

Этот API вышел из употребления и его работа больше не гарантируется.

Только для чтения Возвращает ссылку на элемент содержимого в текущем окне. Устаревший вариант в нижним подчёркиванием более не доступен для Web-содержимого. Window.controllers (en-US) Это API не было стандартизировано.

Только для чтения Возвращает XUL контроллер объектов для текущего окна chrome. Window.crypto Только для чтения Возвращает зашифрованный объект браузера. Window.defaultStatus (en-US) Вышла из употребления с версии Gecko 23 Получает/устанавливает текст статус-бара для данного окна. Window.devicePixelRatio Это API не было стандартизировано.

Только для чтения Возвращает соотношение между физическими пикселями и пикселями на дисплее текущего устройства. Window.dialogArguments (en-US) Только для чтения Получает аргументы, переданные в окно (если это диалоговое окно) в момент вызова window.showModalDialog() (en-US) . Это nsIArray . Window.directories (en-US) Этот API вышел из употребления и его работа больше не гарантируется.

Синоним window.personalbar (en-US) Window.document Только для чтения Возвращает ссылку на содержащийся в окне документ. Window.frameElement Только для чтения Возвращает элемент, в который встроено окно, или null, если оно не встроено. Window.frames Только для чтения Возвращает массив дополнительных фреймов в текущем окне. Window.fullScreen (en-US) Это свойство указывает, отображается ли окно в полноэкранном режиме или нет. Window.globalStorage Это API не было стандартизировано.

Вышла из употребления с версии Gecko 13 Не поддерживает с Gecko 13 (Firefox 13). Использовать вместо него Window.localStorage . Было: Множественные объекты хранения, которые используются для хранения данных на нескольких страницах. Window.history Только для чтения Возвращает ссылку на объект истории. Window.innerHeight Получает высоту области содержимого окна браузера, включая, если есть, горизонтальный скроллбар. window.innerWidth (en-US) Получает ширину области содержимого окна браузера, включая, если есть, вертикальный скроллбар. Window.isSecureContext (en-US) Только для чтения Указывает, способен ли контекст использовать функциональность, требующую безопасного контекста. Window.length Только для чтения Возвращает число фреймов в окне. Смотрите также window.frames . Window.location Только для чтения Получает/устанавливает расположение или текущий URL для текущего объекта окна. Window.locationbar (en-US) Только для чтения Возвращает объект locationbar, который может быть добавлен и убран из окна. Window.localStorage Только для чтения Возвращает ссылку на локальный объект хранилища, используемый для хранения данных, которые могут быть доступны только первоисточникам, создавшим их. Window.menubar (en-US) Только для чтения Возвращает объект menubar, который может быть добавлен и убран из окна. Window.messageManager Возвращает объект message manager для окна. Window.mozAnimationStartTime Только для чтения Время в миллисекундах с момента начала цикла данной анимации. Window.mozInnerScreenX (en-US) Только для чтения Это API не было стандартизировано.

Возвращает горизонтальную (X) координату верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри mozScreenPixelsPerCSSPixel в nsIDOMWindowUtils для конвертирования и адаптирования к экранным пикселям, если необходимо. Window.mozInnerScreenY (en-US) Только для чтения Это API не было стандартизировано.

Возвращает вертикальные (Y) координаты верхнего левого угла окна просмотра в экранных координатах. Значение возвращается в CSS-пикселях. Смотри mozScreenPixelsPerCSSPixel для конвертирования и адаптирования к экранным пикселям, если необходимо. Window.mozPaintCount (en-US) Это API не было стандартизировано.

Только для чтения Возвращает количество раз, за которые текущий документ был отрендерен для текущего экрана в этом окне. Может быть использовано для подсчёта скорости преобразования. Window.name Получает/устанавливает имя для окна. Window.navigator Только для чтения Возвращает ссылку на объект навигатора. Window.opener (en-US) Возвращает ссылку на окно, открывшее текущее окно. Window.orientation (en-US) Это API не было стандартизировано.

Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.

Только для чтения Возвращает ориентировку в градусах (с увеличением на 90 градусов) окна просмотра относительно настоящей ориентировки устройства. Window.outerHeight (en-US) Только для чтения Получает высоту вместе с внешней частью браузерного окна. Window.outerWidth (en-US) Только для чтения Получает ширину вместе с внешней частью браузерного окна. Window.pageXOffset Только для чтения Псевдоним для window.scrollX . Window.pageYOffset Только для чтения Псевдоним для window.scrollY Window.sessionStorage Только для чтения Возвращает ссылку на объект хранения сессии, используемый для хранения данных, которые могут быть получены только источником, создавшим их. Window.parent Только для чтения Возвращает ссылку на родителя текущего окна или встроенного фрейма. Window.performance Только для чтения Обеспечивает главенствующее пространство для атрибутов, относящихся к производительности. Window.personalbar (en-US) Только для чтения Возвращает объект personalbar, который может быть добавлен и убран из окна. Window.pkcs11 (en-US) Вышла из употребления с версии Gecko 29 Раньше предоставлял доступ к установке и удалению PKCS11 модуля. Window.returnValue Возвращаемое значение, которое будет передано в функцию, которая вызвала window.showModalDialog() (en-US) для отображения окна как модального диалога. Window.screen Только для чтения Возвращает ссылку на объект экрана, ассоциируемый с окном. Window.screenX Только для чтения Возвращает горизонтальный размер левой рамки браузера пользователя с левой стороны экрана. Window.screenY (en-US) Только для чтения Возвращает вертикальный размер верхней рамки браузера пользователя с верхней стороны экрана. Window.scrollbars (en-US) Только для чтения Возвращает объект scrollbars, который может быть добавлен и убран из окна. Window.scrollMaxX Это API не было стандартизировано.

Только для чтения Максимальный отступ, на который может быть проскроллено окно по горизонтали, состоящее из разницы ширины документа и ширины области просмотра. Window.scrollMaxY Это API не было стандартизировано.

Только для чтения Максимальный отступ, на который может быть проскроллено окно по вертикали, (т.е., разница высоты документа и высоты области просмотра). Window.scrollX Только для чтения Возвращает число пикселей, на которое документ уже был проскроллен по горизонтали. Window.scrollY Только для чтения Возвращает число пикселей, на которое документ уже был проскроллен по вертикали. Window.self Только для чтения Возвращает ссылку на самого себя. Window.sessionStorage Возвращает объект хранилища для данных в пределах сессии одной страницы. Window.sidebar (en-US) Это API не было стандартизировано.

Только для чтения Возвращает ссылку на объект окна sidebar. Window.speechSynthesis (en-US) Только для чтения Возвращает объект SpeechSynthesis (en-US) , который является точкой входа для использования Web Speech API, функциональности для речевого синтеза. Window.status (en-US) Получает/устанавливает текст в statusbar внизу браузера. Window.statusbar (en-US) Только для чтения Возвращает объект statusbar, который может быть добавлен и убран из окна. Window.toolbar (en-US) Только для чтения Возвращает объект toolbar, который может быть добавлен и убран из окна. Window.top Только для чтения Возвращает ссылку на самое первое окно в иерархии текущих окон. Только для чтения. Window.window (en-US) Только для чтения Возвращает ссылку на текущее окно. window[0] , window[1] , etc. Возвращает ссылку на объект окна во фреймах. Смотри Window.frames .

Свойства, реализованные из других мест

Методы

Этот интерфейс наследует методы от интерфейса EventTarget и реализует свойства WindowOrWorkerGlobalScope и EventTarget .

Window.alert() Отображает предупреждающее диалоговое окно. Window.back() (en-US) Это API не было стандартизировано.

Этот API вышел из употребления и его работа больше не гарантируется.

Возвращается на один шаг назад в истории окна. Window.blur() Убирает фокус с окна. Window.cancelIdleCallback() (en-US) Это экспериментальное API, которое не должно использоваться в рабочем коде.

Позволяет отменить колбэк-функцию прежде чем определить расписание её вызова с Window.requestIdleCallback . Window.captureEvents() (en-US) Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.

Регистрирует окно, которое будет перехватывать все события определённого типа. Window.clearImmediate() Отменяет повторяющееся исполнение, установленное с помощью setImmediate . WindowTimers.clearInterval() (en-US) Отменяет повторяющееся исполнение, установленное с помощью WindowTimers.setInterval() (en-US) . WindowTimers.clearTimeout() (en-US) Отменяет повторяющееся исполнение, установленное с помощью WindowTimers.setTimeout() . Window.close() Закрывает текущее окно. Window.confirm() Отображает диалог с сообщением, на которое пользователь должен ответить. Window.disableExternalCapture() Вышла из употребления с версии Gecko 24 FIXME: NeedsContents Window.dispatchEvent() Используется для вызова события. Window.dump() (en-US) Отправляет сообщение в консоль. Window.enableExternalCapture() Вышла из употребления с версии Gecko 24 FIXME: NeedsContents Window.find() (en-US) Ищет необходимую строку в окне window. Window.focus() (en-US) Устанавливает фокус на текущем окне. Window.forward() (en-US) Это API не было стандартизировано.

Этот API вышел из употребления и его работа больше не гарантируется.

Переходит на один документ вперёд в текущей истории окна. Window.getAttention() Заставляет мигать иконку приложения. Window.getAttentionWithCycleCount() FIXME: NeedsContents Window.getComputedStyle() Получает подсчитанные стили для определённого элемента. Подсчитанные стили включают подсчитанные значения всех CSS свойств элемента. Window.getDefaulComputedStyle() Получает подсчитанные стили по умолчанию для определённого элемента, игнорируя авторские стили. Window.getSelection() Возвращает выбранный объект, представляющий выбранный элемент(ы). Window.home() (en-US) Это API не было стандартизировано.

Этот API вышел из употребления и его работа больше не гарантируется.

Возвращает браузер на домашнюю страницу. Window.matchMedia() Возвращает объект MediaQueryList (en-US) , представляющий указанную строку медиавыражения. Window.maximize() FIXME: NeedsContents Window.minimize() (en-US) (top-level XUL windows only) Минимизирует окно. Window.moveBy() Сдвигает текущее окно на определённое значение. Window.moveTo() Сдвигает окно до определённых координат. Window.mozRequestAnimationFrame() (en-US) Сообщает браузеру, что анимация находится в прогрессе, требуя, чтобы браузер определил время перерисовки окна для следующего анимационного фрейма. Это вызовет событие MozBeforePaint, прежде чем произойдёт перерисовка . Window.open() (en-US) Открывает новое окно. Window.openDialog() (en-US) Opens a new dialog window. Window.postMessage() Предоставляет безопасный способ для одного окна передать строку с данными в другое окно, которое должно находиться в пределах того же домена, что и первое. Window.print() Открывает Print Dialog для распечатки текущего документа. Window.prompt() Возвращает текст, введённый пользователем в диалоге подсказки. Window.releaseEvents() (en-US) Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.

Возвращает окно с захваченных событий определённого типа. Window.removeEventListener() Удаляет обработчик события из окна. Window.requestIdleCallback() Это экспериментальное API, которое не должно использоваться в рабочем коде.

Позволяет назначить расписание задачи во время периода простоя браузера. Window.resizeBy() (en-US) Меняет размер текущего окна на определённое число. Window.resizeTo() (en-US) Динамически меняет размер окна. Window.restore() (en-US) FIXME: NeedsContents Window.routeEvent() (en-US) Вышла из употребления с версии Gecko 24 FIXME: NeedsContents Window.scroll() Scrolls the window to a particular place in the document. Window.scrollBy() Прокручивает документ в окна на данное число. Window.scrollByLines() Прокручивает документ на данное число строк. Window.scrollByPages() (en-US) Прокручивает документ на данное число страниц. Window.scrollTo() Прокручивает до заданных координат в документе. Window.setCursor() (en-US) Меняет курсор для текущего окна. Window.setImmediate() (en-US) Исполняет функцию после того, как браузер некую тяжёлую задачу. WindowTimers.setInterval() (en-US) Назначает выполнение функции каждые X миллисекунд. Window.setResizable FIXME: NeedsContents WindowTimers.setTimeout() Устанавливает отложенное выполнение функции. Window.showModalDialog() (en-US) Отображает модальный диалог. Window.sizeToContent() (en-US) Подгоняет размер окна под его содержимое. Window.stop() Останавливает загрузку страницы. Window.updateCommands() (en-US) Обновляет состояние команд текущего окна chrome (UI).

Методы, реализованные из других мест

Обработчики событий

Это методы объекта window, которые могут устанавливаться для перехвата всех событий, которые могут происходить с объектом window.

Интерфейс наследует обработчики событий от EventTarget интерфейса и реализует обработчики событий WindowEventHandlers .

Замета: Начиная с Gecko 9.0 , вы можете использовать синтаксис if («onabort» in window), чтобы определить существует ли обработчик данного события. Интерфейсы обработчиков событий были обновлены таким образом, чтобы соответствовать web IDL интерфейсам. Смотри обработчики событий DOM для деталей.

Свойство обработчика событий для обработки отказа события Promise . GlobalEventHandlers.onreset (en-US) Свойство обработчика событий для события reset в окне. GlobalEventHandlers.onresize (en-US) Свойство обработчика событий для изменения размера окна. GlobalEventHandlers.onscroll Свойство обработчика событий для прокрутки окна. GlobalEventHandlers.onwheel (en-US) Вызывается, когда было прокручено колёсико мыши в любую сторону. GlobalEventHandlers.onselect Свойство обработчика событий для события выбора в окне. GlobalEventHandlers.onselectionchange (en-US) EventHandler (en-US) , представляющий собой код, который будет вызван, когда произойдёт событие selectionchange . GlobalEventHandlers.onsubmit Свойство обработчика событий для события submits в окне формы. WindowEventHandlers.onunhandledrejection (en-US) Это экспериментальное API, которое не должно использоваться в рабочем коде.

Свойство обработчика событий для отвязки обработчика отказа события Promise . Window.onunload (en-US) Свойство обработчика событий для события unload в окне. Window.onuserproximity (en-US) Свойство обработчика событий для события изменения близости пользователя к устройству. Window.onvrdisplayconnected (en-US) Это экспериментальное API, которое не должно использоваться в рабочем коде.

Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было присоединено к компьютеру (когда запускается событие vrdisplayconnected ). Window.onvrdisplaydisconnected (en-US) Это экспериментальное API, которое не должно использоваться в рабочем коде.

Представляет обработчик события, который будет запущен, когда подходящее устройство виртуальной реальности было отсоединено от компьютера (когда запускается событие vrdisplaydisconnected ). Window.onvrdisplaypresentchange (en-US) Это экспериментальное API, которое не должно использоваться в рабочем коде.

Представляет обработчик события, который будет запущен, когда изменится состояние устройства виртуальной реальности — т.е. перейдёт от представленного к непредставленному или наоборот (когда будет запущено событие onvrdisplaypresentchange ).