doka-guide · ra1nbow1 · Oct 13, 2024 · Oct 18, 2024 · Oct 19, 2024 · Oct 20, 2024
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Пример window.close() — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      scrollbar-gutter: stable;
+    }
+
+    html {
+      height: 100vh;
+      color-scheme: dark;
+      font-size: 18px;
+    }
+
+    body {
+      min-height: 100vh;
+      padding: 50px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: 4rem;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+    .button {
+      min-width: 210px;
+      padding: 9px 15px;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      font-size: 1rem;
+      font-weight: 300;
+      font-family: inherit;
+      transition: background-color 0.2s linear;
+      color: #000000;
+      background-color: #C56FFF;
+    }
+    .button:hover {
+      background-color: #FFFFFF;
+      cursor: pointer;
+      transition: background-color 0.2s linear;
+    }
+    .button:disabled {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+  </style>
+</head>
+<body>
+    <button id="buttonOpen" class="button">Открыть окно</button>
+    <button id="buttonClose" class="button" disabled>Закрыть окно</button>
+  <script>
+    const buttonOpen = document.querySelector('#buttonOpen')
+    const buttonClose = document.querySelector('#buttonClose')
+
+    const openWindow = () => {
+        const newWindow = window.open('https://doka.guide/index.html', '_blank', 'top=40, left=40, width=500, height=400')
+        return newWindow
+    }
+
+    const closeWindow = (windowProxy) => windowProxy.close()
+
+    let currentWindow
+
+    buttonOpen.addEventListener('click', function (event) {
+        buttonOpen.disabled = true
+        buttonClose.disabled = false
+        currentWindow = openWindow()
+    })
+
+    buttonClose.addEventListener('click', function (event) {
+        buttonClose.disabled = true
+        buttonOpen.disabled = false
+        closeWindow(currentWindow)
+    })
+  </script>
+</body>
+</html>
@@ -2,34 +2,58 @@
 title: "`window.close()`"
 description: "Закройте окно, а то что-то холодно."
 authors:
-  - doka-dog
+  - ra1nbow1
+contributors:
+  - vitya-ne
 related:
   - js/window-open
   - js/window-history
   - js/window-print
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-Метод `close()` объекта `window` закрывает текущее или другое вызванное окно.
+Метод `.close()` объекта `window` закрывает окно ранее открытое с использованием [`windiw.open()`](/js/window-open/).
 
 ## Пример
 
 ```js
-let openedWindow
+// Создаём функцию для открытия окна с Докой
+const openWindow = () => window.open('doka.guide/index.html')
+// Создаём функцию для закрытия окна
+const closeWindow = (windowProxy) => windowProxy.close()
 
-function openWindow() {
-  openedWindow = window.open("doka.guide.html")
-}
+// Открываем окно
+const currentWindow = openWindow();
 
-function closeOpenedWindow() {
-  openedWindow.close()
-}
+// Работаем с новым окном
+// ...
+
+// Закрываем открытое ранее окно
+closeWindow(currentWindow)
 ```
 
+## Интерактивный пример
+
+<iframe title="Закрываем открытое окно" src="demos/open-close-window/" height="695"></iframe>
+
 ## Как пишется
 
-Метод можно вызвать только если окно было открыто через [`window.open()`](/js/window-open/) или если это окно верхнего уровня без записей в истории.
+```js
+openedWindow.close()
+```
+`openedWindow` — `windowProxy`-объект, результат ранее выполненного `window.open()`.
+
+Метод `close()` не имеет параметров и возвращает `undefined`.
+
+## Как понять
+
+Метод `close()` закрывает окно, только если окно было открыто через [`window.open()`](/js/window-open/). Это ограничение связано с вопросами безопасности в браузерах: оно предотвращает закрытие окон, которые открыл сам пользователь.
+
+Например, с помощью этого метода невозможно закрыть открытую с помощью браузера вкладку или сам браузер.
+
+## Подсказки
+
+💡 Используйте `window.close()`, только когда пользователь готов к закрытию окна. Для этого можно добавить поп-ап с согласием.