diff --git a/3-frames-and-windows/01-popup-windows/article.md b/3-frames-and-windows/01-popup-windows/article.md index de116459a0..1cfcde0ec2 100644 --- a/3-frames-and-windows/01-popup-windows/article.md +++ b/3-frames-and-windows/01-popup-windows/article.md @@ -1,4 +1,4 @@ -# Открытие окон и методы window +# Всплывающие окна и методы window Всплывающее окно ("попап" – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ. @@ -15,7 +15,7 @@ window.open('https://javascript.info/') Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/...), так как: -1. Попап - это отдельное окно со своим JavaScript-окружением. Так что открытие попапа со стороннего, не доверенного сайта вполне безопасно +1. Попап - это отдельное окно со своим JavaScript-окружением. Так что открытие попапа со стороннего, не доверенного сайта относительно безопасно (учитывая, что сохраняются риски фишинга и другие угрозы). 2. Открыть попап очень просто. 3. Попап может производить навигацию (менять URL) и отсылать сообщения в основное окно. @@ -23,7 +23,7 @@ window.open('https://javascript.info/') В прошлом злонамеренные сайты заваливали посетителей всплывающими окнами. Такие страницы могли открывать сотни попапов с рекламой. Поэтому теперь большинство браузеров пытаются заблокировать всплывающие окна, чтобы защитить пользователя. -**Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события `onclick`).** +**Всплывающее окно блокируется в том случае, если вызов window.open был выполнен не в результате действия посетителя (например, события `click`).** Например: ```js @@ -38,15 +38,15 @@ button.onclick = () => { Таким образом браузеры могут защитить пользователя от появления нежелательных попапов, при этом не отключая попапы полностью. -## Полный синтаксис window.open +## window.open -Синтаксис открытия нового окна: `window.open(url, name, params)`: +Синтаксис открытия попапа: `window.open(url, name, params)`: url : URL для загрузки в новом окне. name -: Имя нового окна. У каждого окна есть свойство `window.name`, в котором можно задавать, какое окно использовать для попапа. Таким образом, если уже существует окно с заданным именем – указанный в параметрах URL откроется в нем, в противном случае откроется новое окно. +: Имя нового окна. У каждого окна есть свойство `window.name`, в котором можно задавать, какое окно использовать для попапа. Таким образом, если уже существует окно с заданным именем – указанный в параметрах URL откроется в нём, иначе откроется новое окно. params : Строка параметров для нового окна. Содержит настройки, разделённые запятыми. Важно помнить, что в данной строке не должно быть пробелов. Например `width=200,height=100`. @@ -71,26 +71,24 @@ params Давайте откроем окно с минимальным набором настроек, просто чтобы посмотреть, какие из них браузер позволит отключить: ```js run -let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, -width=0,height=0,left=-1000,top=-1000`; +let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=0,height=0,left=-1000,top=-1000`; -open('/', 'test', params); +window.open('/', 'test', params); ``` В этом примере большинство настроек заблокированы и само окно находится за пределами видимой области экрана. Посмотрим, что получится в результате. Большинство браузеров "исправит" странные значения – как, например, нулевые `width/height` и отрицательные `left/top`. Например, Chrome установит высоту и ширину такого окна равной высоте и ширине экрана, так что попап будет занимать весь экран. -Давайте исправим значения и зададим нормальные координаты (`left` и `top`) и значения размеров окна (`width` и `height`): +Давайте исправим значения и зададим нормальные координаты (`left` и `top`) и размеры окна (`width` и `height`): ```js run -let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, -width=600,height=300,left=100,top=100`; +let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=600,height=300,left=100,top=100`; -open('/', 'test', params); +window.open('/', 'test', params); ``` Большинство браузеров выведет окно с заданными нами настройками. -Правила для опущенных параметров: +Правила для пропущенных настроек: - Если третий аргумент при вызове `open` отсутствует или он пустой, будут использованы настройки окна по умолчанию. - Если строка параметров передана, но некоторые параметры yes/no пропущены, то считается, что указано `no`, так что соответствующие возможности будут отключены, если на это нет ограничений со стороны браузера. Поэтому при задании параметров убедитесь, что вы явно указали все необходимые yes. @@ -104,15 +102,15 @@ open('/', 'test', params); Например, здесь мы генерируем содержимое попапа из JavaScript: ```js -let newWin = window.open("about:blank", "hello", "width=200,height=200"); +let newWindow = window.open("about:blank", "hello", "width=200,height=200"); -newWin.document.write("Hello, world!"); +newWindow.document.write("Hello, world!"); ``` А здесь содержимое окна модифицируется после загрузки: ```js run -let newWindow = open('/', 'example', 'width=300,height=300') +let newWindow = window.open('/', 'example', 'width=300,height=300') newWindow.focus(); alert(newWindow.location.href); // (*) about:blank, загрузка ещё не началась @@ -125,7 +123,7 @@ newWindow.onload = function() { }; ``` -Обратите внимание: сразу после `window.open` новое окно ещё не загружено. Это демонстрируется в строке `(*)`. Так что нужно ждать `onload`, чтобы его изменить. Или же поставить обработчик `DOMContentLoaded` на `newWin.document`. +Обратите внимание: сразу после `window.open` новое окно ещё не загружено. Это демонстрируется в строке `(*)`. Так что нужно ждать события `load`, чтобы его изменить. Или же поставить обработчик `DOMContentLoaded` на `newWindow.document`. ```warn header="Политика одного источника" Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port). @@ -140,9 +138,9 @@ newWindow.onload = function() { Если вы запустите код ниже, то он заменит содержимое открывшего (текущего) окна на "Тест": ```js run -let newWin = window.open("about:blank", "hello", "width=200,height=200"); +let newWindow = window.open("about:blank", "hello", "width=200,height=200"); -newWin.document.write( +newWindow.document.write( "