Coding Beauty Tutorial

{"draftJsState":{"blocks":[{"data":{"image":{"id":"63c5aad5fc573b13d00b9112"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2o52g"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"5sisr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы отследить событие закрытия браузера и вкладки в JavaScript, выполните следующие действия.","type":"unstyled","key":"ackld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте слушатель события beforeunload к глобальному window-объекту.","type":"ordered-list-item","key":"bepj2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этом слушателе вызовите метод preventDefault() для переданного ему Event-объекта.","type":"ordered-list-item","key":"dha0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установите свойство returnValue этого Event-объекта в пустую строку ('').","type":"ordered-list-item","key":"5uo8e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"window.addEventListener('beforeunload', (event) => {\n event.preventDefault();\n event.returnValue = '';\n});","type":"blockquote","key":"bfu9a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обнаружить событие закрытия браузера и вкладки нужно для того, чтобы предупредить пользователя о любых несохраненных изменениях на веб-странице.","type":"unstyled","key":"2u4kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Использование метода addEventListener() позволит прикрепить обработчик события к любым DOM-объектам, таким как HTML-элементы, HTML-document и window-объект.","type":"unstyled","key":"e173a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Событие beforeunload запускается непосредственно перед тем, как window, document и его ресурсы будут выгружены. В этот момент document все еще виден, и событие все еще можно отменить.","type":"unstyled","key":"7b6dd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Необходимо вызвать метод preventDefault() для Event-объекта, который получает обработчик, чтобы отобразить диалоговое окно подтверждения в браузере. Метод preventDefault() предотвращает действие события по умолчанию. Для события beforeunload метод preventDefault() останавливает выгрузку ресурсов, window и document.","type":"unstyled","key":"eij0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код JavaScript приведет к отображению диалогового окна подтверждения, когда пользователь попытается закрыть браузер или вкладку. Вот пример HTML-кода, написанного с использованием JavaScript.","type":"unstyled","key":"d89na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n \n Coding Beauty Tutorial\n \n \n \n Coding Beauty\n
\n Try to close the tab or browser \n \n \n","type":"blockquote","key":"9c2k5"},{"data":{"image":{"id":"63c5aaf382ce2a0bdb4eb354"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При попытке закрыть вкладку отображается диалоговое окно подтверждения","type":"atomic:image","key":"88uqr"},{"data":{"image":{"id":"63c5aaf3b91c2c52da28d690"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При попытке закрыть браузер отображается диалоговое окно подтверждения","type":"atomic:image","key":"5nv5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание, что событие beforeunload срабатывает не только при закрытии браузера или вкладки, но и при нажатии на ссылку, отправке формы, нажатии кнопок назад/вперед и обновлении страницы.","type":"unstyled","key":"5cc8j"},{"data":{"image":{"id":"63c5aaf3060dd82fc97789f4"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"При нажатии на ссылку на странице отображается диалоговое окно подтверждения","type":"atomic:image","key":"a8nl1"},{"data":{"image":{"id":"63c5aaf3431ef9119cf0793c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда пользователь пытается обновить страницу, отображается диалоговое окно подтверждения","type":"atomic:image","key":"67k6r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"7h55n"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":40,"offset":0}],"inlineStyleRanges":[],"text":"Кнопка sign-in для вашего веб-приложения","type":"unordered-list-item","key":"e3t9h"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":84,"offset":0}],"inlineStyleRanges":[],"text":"Продвинутые методы программирования на JavaScript: сравнение элементов двух массивов","type":"unordered-list-item","key":"9psmi"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":49,"offset":0}],"inlineStyleRanges":[],"text":"Три нашумевших диаграммы. Исследование JavaScript","type":"unordered-list-item","key":"aoh8p"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":8,"offset":14},{"key":5,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"1ab8q"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":13,"offset":15},{"key":7,"length":58,"offset":30}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Coding Beauty: How to Detect a Browser or Tab Close Event With JavaScript","type":"unstyled","key":"1s4d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"1choNFxFKrumFJujnSl4"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/16673/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://nuancesprog.ru/p/4831/","url":"https://nuancesprog.ru/p/4831/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://nuancesprog.ru/p/16610/","url":"https://nuancesprog.ru/p/16610/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/2630/","url":"https://nuancesprog.ru/p/2630/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://t.me/nuancesproghumor","url":"https://t.me/nuancesproghumor"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://codingbeauty.medium.com/","url":"https://codingbeauty.medium.com/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://codingbeauty.medium.com/javascript-detect-browser-tab-close-840a44c82d17","url":"https://codingbeauty.medium.com/javascript-detect-browser-tab-close-840a44c82d17"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}