Html action on close

Window: unload event

Warning: Developers should avoid using this event. See «Usage notes» below.

The unload event is fired when the document or a child resource is being unloaded.

The document is in the following state:

• All the resources still exist (img, iframe etc.)
• Nothing is visible anymore to the end user
• UI interactions are ineffective ( window.open , alert , confirm , etc.)
• An error won’t stop the unloading workflow

Please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("unload", (event) => >); onunload = (event) => >; 

Event type

Event handler aliases

In addition to the Window interface, the event handler property onunload is also available on the following targets:

Usage notes

Developers should avoid using this event.

Especially on mobile, the unload event is not reliably fired. For example, the unload event is not fired at all in the following scenario:

1. A mobile user visits your page.
2. The user then switches to a different app.
3. Later, the user closes the browser from the app manager.

Also, the unload event is not compatible with the back/forward cache (bfcache), because many pages using this event assume that the page will not continue to exist after the event is fired. To combat this, some browsers (such as Firefox) will not place pages in the bfcache if they have unload listeners, and this is bad for performance. Others, such as Chrome, will not fire the unload when a user navigates away.

The best event to use to signal the end of a user’s session is the visibilitychange event. In browsers that don’t support visibilitychange the next-best alternative is the pagehide event, which is also not fired reliably, but which is bfcache-compatible.

If you’re specifically trying to detect page unload events, it’s best to listen for the pagehide event.

See the Page Lifecycle API guide for more information about the problems associated with the unload event.

Examples

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Parent Frametitle> script> window.addEventListener("beforeunload", (event) =>  console.log("I am the 1st one."); >); window.addEventListener("unload", (event) =>  console.log("I am the 3rd one."); >); script> head> body> iframe src="child-frame.html">iframe> body> html> 

Below, the content of child-frame.html :

doctype html> html lang="en-US"> head> meta charset="UTF-8" /> title>Child Frametitle> script> window.addEventListener("beforeunload", (event) =>  console.log("I am the 2nd one."); >); window.addEventListener("unload", (event) =>  console.log("I am the 4th and last one…"); >); script> head> body> ☻ body> html> 

When the parent frame is unloaded, events will be fired in the order described by the console.log() messages.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Related events: DOMContentLoaded , readystatechange , load
• Unloading Documents — unload a document
• The visibilitychange event.
• Don’t lose user and app state, use Page Visibility explains in detail why you should use visibilitychange , not beforeunload / unload .
• Page Lifecycle API gives best-practices guidance on handling page lifecycle behavior in your web applications.
• PageLifecycle.js: a JavaScript library that deals with cross-browser inconsistencies in page lifecycle behavior.
• Back/forward cache explains what the back/forward cache is, and its implications for various page lifecycle events.

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

How to Create a Close Button in HTML CSS[With Examples]

Close buttons also called cancel buttons can be used to dismiss items on a website like menus, modals, and popups.

1. Close Button CSS 1: Times

You can make a close button using the times( × ) symbol.

2. Close Button CSS 2: Plus

You can also create a close button using the plus( + ) symbol.

You will need to rotate the plus sign so that it looks like a cancel button.

3. Close Button CSS 3

You can also use an SVG image of a cancel button for your close button.

4. Close Button CSS 4

You can also build a close button bulma style.

.navbar-burger < cursor: pointer; display: block; height: 3.25rem; position: relative; width: 3.25rem; >.navbar-burger span < background-color: currentColor; display: block; height: 1px; left: calc(50% - 8px); position: absolute; transform-origin: center; transition-duration: 86ms; transition-property: background-color,opacity,transform; transition-timing-function: ease-out; width: 16px; >.navbar-burger span:nth-child(1) < top: calc(50% - 6px); >.navbar-burger span:nth-child(2) < top: calc(50% - 1px); display: none; >.navbar-burger span:nth-child(3) < top: calc(50% + 4px); >.navbar-burger span:nth-child(1) < transform: translateY(5px) rotate(45deg); >.navbar-burger span:nth-child(3)

5. Close Button CSS 5: Before and After

You can also create a close button using Pseudo elements in CSS.

.close < position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.7; >.close:hover < opacity: 1; >.close:before, .close:after < position: absolute; left: 15px; content: ' '; height: 33px; width: 2px; background-color: #333; >.close:before < transform: rotate(45deg); >.close:after

6. Bootstrap Close Button

You can also create a close button on your website using Bootstrap.

Remember to import Bootstrap to your website before attempting to add the button.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

Recent Posts

Источник

Action on close

posted 19 years ago

Hi, All,
We need to invoke a clean-up action on the server-side when the browser window is being closed. Now we open a new window in onUnload() event and do the clean-up request from there.
But in latest version of IE user can disable opening of new window. Any other possibilities to do this?

posted 19 years ago

Not on the client side. Also the window will notopen if they have pop up blockers installed.
You are going to have to deal with it on server side.

posted 19 years ago

Well, if you really want to handle it with JavaScript, than here is the solution:

An alert needed there to create a time delay, otherwise browser (I had that with IE) may close before submiting a form.
the form will be submitted and handles by a server.
Aside from that,
I would really suggest you to consider some server side solution. For example, using J2EE, I would use reasonable session timeout and session listener implementation to perform your cleanup task.

posted 19 years ago

Guys,
thanks for your answers,
I’m aware that the clean-up may be done on the server-side via the session timeout, but it’s not the desired behavior.
Showing the alert dialog will not be accepted either.

Источник