| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .box { |
| width: 100px; |
| height: 100px; |
| background-color: red; |
| color : yellow; |
| font-size: 20px; |
| left: 0px; |
| top: 0px; |
| position: absolute; |
| transition: background-color .25s; |
| transition-timing-function: ease; |
| } |
| .box1{ |
| width: 100px; |
| height: 100px; |
| background-color: blue; |
| color: yellow; |
| font-size: 20px; |
| left: 0px; |
| top: 0px; |
| position:absolute; |
| transition: background-color .25s; |
| transition-timing-function: ease; |
| } |
| </style> |
| </head> |
| <body style="background-color: #1f52a5;"> |
| <div class="box" id="box">Sample</div> |
| <div id="immediately" style="display:block;"> |
| THIS SHOWS IMMEDIATELY |
| </div> |
| |
| <div id="beforeUnload" style="display:none;"> |
| THIS SHOWS AT BEFOREUNLOAD |
| </div> |
| |
| <div id="transitionEnd" style="display:none;"> |
| THIS SHOWS AT TRANSITIONEND |
| </div> |
| |
| |
| <script> |
| console.log('Running the script in beforeunload.html'); |
| |
| function updateTransition() { |
| var el = document.getElementById("box"); |
| if (el.className == "box") { |
| el.className = "box1"; |
| } else { |
| el.className = "box"; |
| } |
| } |
| |
| function transitionEndFunction() { |
| console.log("transitionend event"); |
| // Set this to true to simulate an unresponsive splash screen which does |
| // not call window.close(). |
| var unresponsive = true; |
| // This style change is only shown if unresponsive. |
| document.getElementById("transitionEnd").style.display="block"; |
| // Comment this out to test out an unresponsive |
| // window.ontransitionend function. |
| if (!unresponsive) { |
| window.close(); |
| } |
| } |
| // Either event handler or event listeners should work. |
| window.ontransitionend = transitionEndFunction; |
| //window.addEventListener("transitionend", transitionEndFunction, true); |
| |
| function beforeUnloadFunction() { |
| console.log("beforeunload event"); |
| document.getElementById("immediately").style.display="none"; |
| document.getElementById("beforeUnload").style.display="block"; |
| window.updateTransition(); |
| // Returning a string shows a confirmation dialog in Chrome. |
| return "returning text is futile"; |
| }; |
| // Either event handler or event listeners should work. |
| // window.onbeforeunload = beforeUnloadFunction; |
| window.addEventListener("beforeunload", beforeUnloadFunction, true); |
| |
| console.log("Ran the script in beforeunload.html"); |
| </script> |
| |
| </body> |
| </html> |
