Tips (Total 11)
# Tips-1) What is HTML onafterprint Event Attribute
Definition and Usage
The onafterprint attribute fires when a page has started printing, or if the print dialogue box has been closed.
Tip: The onafterprint attribute is often used together with the onbeforeprint attribute.
Browser Support
Note: In IE/Edge, the onafterprint attribute occurs before the print dialogue box, instead of after.
Syntax
<element onafterprint="script">
Attribute Values
| Value | Description |
|---|---|
| script | The script to be run on onafterprint |
Technical Details
| Supported HTML tags: | <body> |
|---|
How to create HTML onafterprint Event Attribute
Execute a JavaScript when a page has started printing, or if the print dialogue box has been closed.
index.html
Example:
HTML
<body onafterprint="myFunction()">
Output should be:
How to Execute a JavaScript when a page has started printing, or if the print dialogue box has been closed
Try to print this document Tip: Keyboard shortcuts, such as Ctrl+P sets the page to print. Note: The onafterprint event is not supported in Safari and Opera. Note: In IE, the onafterprint event occurs before the print dialogue box, instead of after.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onafterprint="myFunction()">
<h1>Try to print this document</h1>
<p><b>Tip:</b> Keyboard shortcuts, such as Ctrl+P sets the page to print.</p>
<p><b>Note:</b> The onafterprint event is not supported in Safari and Opera.</p>
<p><b>Note:</b> In IE, the onafterprint event occurs before the print dialogue box, instead of after.</p>
<script>
function myFunction() {
alert("This document is now being printed");
}
</script>
</body>
</html>
Output should be:
# Tips-2) What is HTML onbeforeprint Event Attribute
Definition and Usage
The onbeforeprint attribute fires when a page is about to be printed (before the print dialogue box appears).
Tip: The onbeforeprint attribute is often used together with the onafterprint attribute.
Browser Support
Syntax
<element onbeforeprint="script">
Attribute Values
| Value | Description |
|---|---|
| script | The script to be run on onbeforeprint |
Technical Details
| Supported HTML tags: | <body> |
|---|
Example of HTML onbeforeprint Event Attribute
Here executes a JavaScript when a page is about to be printed.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onbeforeprint="myFunction()">
<h1>Try to print this document</h1>
<p><b>Tip:</b> Keyboard shortcuts, such as Ctrl+P sets the page to print.</p>
<p><b>Note:</b> The onbeforeprint event is not supported in Safari and Opera.</p>
<script>
function myFunction() {
alert("You are about to print this document!");
}
</script>
</body>
</html>
Output should be:
How to add a JavaScript when a page is about to be printed
Try to print this document Tip: Keyboard shortcuts, such as Ctrl+P sets the page to print. Note: The onbeforeprint event is not supported in Safari and Opera.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onbeforeprint="myFunction()">
<h1>Try to print this document</h1>
<p><b>Tip:</b> Keyboard shortcuts, such as Ctrl+P sets the page to print.</p>
<p><b>Note:</b> The onbeforeprint event is not supported in Safari and Opera.</p>
<script>
function myFunction() {
alert("You are about to print this document!");
}
</script>
</body>
</html>
Output should be:
# Tips-3) What is HTML onbeforeunload Event Attribute
Definition and Usage
The onbeforeunload event fires when the document is about to be unloaded.
This event allows you to display a message in a confirmation dialog box to inform the user whether he/she wants to stay or leave the current page.
The default message that appears in the confirmation box, is different in different browsers. However, the standard message is something like "Are you sure you want to leave this page?". You cannot remove this message.
However, you can write a custom message together with the default message. See the first example on this page.
Note: In Firefox, only the default message will be displayed (not the custom message (if any)).
Browser Support
The numbers in the table specify the first browser version that fully supports the event.
Syntax
<element onbeforeunload="script">
Attribute Values
| Value | Description |
|---|---|
| script | The script to be run on onbeforeunload |
Technical Details
| Supported HTML tags: | <body> |
|---|
Example of HTML onbeforeunload Event
Here executes a JavaScript when the page is about to be unloaded.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
<a href="https://horje.com">Click here to go to horje.com</a>
<script>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
Output should be:
How to execute a JavaScript when the page is about to be unloaded
Close this window, press F5 or click on the link below to invoke the onbeforeunload event.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onbeforeunload="return myFunction()">
<p>Close this window, press F5 or click on the link below to invoke the onbeforeunload event.</p>
<a href="https://horje.com">Click here to go to horje.com</a>
<script>
function myFunction() {
return "Write something clever here...";
}
</script>
</body>
</html>
Output should be:
# Tips-4) What is HTML onerror Event Attribute
Definition and Usage
The onerror attribute fires when an error occurs while loading an external file (e.g. a document or an image).
Browser Support
Syntax
<element onerror="script">
Attribute Values
| Value | Description |
|---|---|
| script | The script to be run on onerror |
Technical Details
| Supported HTML tags: | <img>, <input type="image">, <object>, <link>, and <script> |
|---|
Example of HTML onerror Event Attribute
Here executes a JavaScript if an error occurs when loading an image.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<img src="https://horje.com/avatar.png" onerror="myFunction()">
<p>A function is triggered if an error occurs when loading the image. The function shows an alert box with a text. In this example we refer to an image that does not exist, therefore the onerror event occurs.</p>
<script>
function myFunction() {
alert("The image could not be loaded.");
}
</script>
</body>
</html>
Output should be:
How to add a JavaScript if an error occurs when loading an image
A function is triggered if an error occurs when loading the image. The function shows an alert box with a text. In this example we refer to an image that does not exist, therefore the onerror event occurs.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<img src="https://horje.com/avatar.png" onerror="myFunction()">
<p>A function is triggered if an error occurs when loading the image. The function shows an alert box with a text. In this example we refer to an image that does not exist, therefore the onerror event occurs.</p>
<script>
function myFunction() {
alert("The image could not be loaded.");
}
</script>
</body>
</html>
Output should be:
# Tips-5) What is HTML onhashchange Event Attribute
Definition and Usage
The onhashchange attribute fires when there has been changes to the anchor part (begins with a '#' symbol) of the current URL.
An example of what an anchor part actually is: Assume that the current URL is
http://www.example.com/test.htm#part2 - The anchor part of this URL would be #part2.
To invoke this event, you can:
- Change the anchor part by setting the location.hash or location.href property of the Location Object
- Navigate to the current page with a different bookmark (Use the "back" or "forward" buttons)
- Click on a link to a bookmark anchor
Browser Support
The numbers in the table specify the first browser version that fully supports the event attribute.
Syntax
<element onhashchange="script">
Attribute Values
| Value | Description |
|---|---|
| script | The script to be run on onhashchange |
Technical Details
| Supported HTML tags: | <body> |
|---|
Example of HTML onhashchange Event Attribute
Here executes a JavaScript when the anchor part has been changed
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onhashchange="myFunction()">
<p>Click the button to change the anchor part of the current URL to #part5</p>
<button onclick="changePart()">Try it</button>
<p id="demo"></p>
<script>
// Using the location.hash property to change the anchor part
function changePart() {
location.hash = "part5";
let x = "The anchor part is now: " + location.hash;
document.getElementById("demo").innerHTML = x;
}
// Alert some text if there has been changes to the anchor part
function myFunction() {
alert("The anchor part has changed!");
}
</script>
</body>
</html>
Output should be:
How to add a JavaScript when the anchor part has been changed
Click the button to change the anchor part of the current URL to #part5
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onhashchange="myFunction()">
<p>Click the button to change the anchor part of the current URL to #part5</p>
<button onclick="changePart()">Try it</button>
<p id="demo"></p>
<script>
// Using the location.hash property to change the anchor part
function changePart() {
location.hash = "part5";
let x = "The anchor part is now: " + location.hash;
document.getElementById("demo").innerHTML = x;
}
// Alert some text if there has been changes to the anchor part
function myFunction() {
alert("The anchor part has changed!");
}
</script>
</body>
</html>
Output should be:
# Tips-6) What is HTML onload Event Attribute
Definition and Usage
The onload attribute fires when an object has been loaded.
onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see "Supported HTML tags" below).
The onload attribute can be used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.
The onload attribute can also be used to deal with cookies (see "More Examples" below).
Browser Support
Syntax
<element onload="script">
Attribute Values
| Value | Description |
|---|---|
| script | The script to be run on onload |
Technical Details
| Supported HTML tags: | <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style> |
|---|
Example of HTML onload Event Attribute
Here executes a JavaScript immediately after a page has been loaded.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
Output should be:
How to add a JavaScript immediately after a page has been loaded
See the code.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
Output should be:
How to use onload on an <img> element. Alert "Image is loaded" immediately after an image has been loaded
See the code.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<img src="https://horje.com/avatar.png" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
</body>
</html>
Output should be:
How to use the onload event to deal with cookies (using "advanced" javascript)
Here is Cookies are enabled.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
let text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Output should be:
# Tips-7) What is HTML onoffline Event Attribute
Definition and Usage
The onoffline attribute fires when the browser's connection status changes from online to offline.
Tip: The onoffline attribute is the opposite of the ononline attribute.
Browser Support
The numbers in the table specify the first browser version that fully supports the event attribute.
Syntax
<element onoffline="script">
Attribute Values
| Value | Description |
|---|---|
| script | The script to be run on onoffline |
Technical Details
| Supported HTML tags: | <body> |
|---|
Example of HTML onoffline Event Attribute
Here executes a JavaScript when the browser changes from working online to working offline.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">
<p>Try to disconnect from the internet to toggle between working online and offline.</p>
<script>
function onFunction() {
alert ("Your browser is working online.");
}
function offFunction() {
alert ("Your browser is working offline.");
}
</script>
</body>
</html>
Output should be:
How to add a JavaScript when the browser changes from working online to working offline
Try to disconnect from the internet to toggle between working online and offline.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">
<p>Try to disconnect from the internet to toggle between working online and offline.</p>
<script>
function onFunction() {
alert ("Your browser is working online.");
}
function offFunction() {
alert ("Your browser is working offline.");
}
</script>
</body>
</html>
Output should be:
# Tips-8) What is HTML ononline Event Attribute
Definition and Usage
The ononline attribute fires when the browser's connection status changes from offline to online.
Tip: The ononline attribute is the opposite of the onoffline attribute.
Browsers Support of HTML ononline Event Attribute
The numbers in the table specify the first browser version that fully supports the event attribute.
Output should be:
Syntax of HTML ononline Event Attribute
<element ononline="script">
Attribute Values of HTML ononline Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on ononline |
Technical Details of HTML ononline Event Attribute
| Supported HTML tags: | <body> |
|---|
Example of HTML ononline Event Attribute
Execute a JavaScript when the browser changes from working offine to working online.
index.html
Example:
HTML
<body ononline="myFunction()">
Output should be:
How to add a JavaScript when the browser changes from working offine to working online
Try to disconnect from the internet to toggle between working online and offline
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body ononline="onFunction()" onoffline="offFunction()">
<p>Try to disconnect from the internet to toggle between working online and offline.</p>
<script>
function onFunction() {
alert ("Your browser is working online.");
}
function offFunction() {
alert ("Your browser is working offline.");
}
</script>
</body>
</html>
Output should be:
# Tips-9) What is HTML onpageshow Event Attribute
Definition and Usage
The onpageshow event occurs when a user navigates to a webpage.
The onpageshow event is similar to the onload event, except that it occurs after the onload event when the page first loads. Also, the onpageshow event occurs every time the page is loaded, whereas the onload event does not occur when the page is loaded from the cache.
Example of HTML onpageshow Event Attribute
Here Executes a JavaScript when a user navigates to a webpage.
index.html
Example:
HTML
<body onpageshow="myFunction()">
Output should be:
Browser Support of HTML onpageshow Event Attribute
The numbers in the table specify the first browser version that fully supports the event attribute.
img
Syntax of HTML onpageshow Event Attribute
<element onpageshow="script">
Attribute Values of HTML onpageshow Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onpageshow |
Technical Details of HTML onpageshow Event Attribute
| Supported HTML tags: | <body> |
|---|
How to add a JavaScript when a user navigates to a webpage
See the code.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onpageshow="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Welcome!");
}
</script>
</body>
</html>
Output should be:
# Tips-10) What is HTML onresize Event Attribute
Definition and Usage
The onresize attribute fires when the browser window is resized
Example of HTML onresize Event Attribute
Here executes a JavaScript when the browser window is resized.
index.html
Example:
HTML
<body onresize="myFunction()">
Output should be:
Browser Support of HTML onresize Event Attribute
Syntax of HTML onresize Event Attribute
<element onresize="script">
Attribute Values of HTML onresize Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onresize |
Technical Details of HTML onresize Event Attribute
Supported HTML tags:
How to execute a JavaScript when the browser window is resized
Here tries to resize the browser window
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onresize="myFunction()">
<p>Try to resize the browser window.</p>
<script>
function myFunction() {
alert("You have changed the size of the browser window!");
}
</script>
</body>
</html>
Output should be:
# Tips-11) What is HTML onunload Event Attribute
onunload event attribute in HTML allows the execution of a JavaScript script when a document is being unloaded. This event occurs in various scenarios, including:Example of HTML onunload Event Attribute
Here executes a JavaScript when a user unloads the document.
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onunload="myFunction()">
<h1>Welcome to my Home Page</h1>
<p>Close this window or press F5 to reload the page.</p>
<p><strong>Note:</strong> Due to different browser settings, this event may not always work as expected.</p>
<script>
function myFunction() {
alert("Thank you for visiting W3Schools!");
}
</script>
</body>
</html>
Output should be:
Definition and Usage of HTML onunload Event Attribute
The onunload attribute fires once a page has unloaded (or the browser window has been closed).
onunload occurs when the user navigates away from the page (by clicking on a link, submitting a form, closing the browser window, etc.)
Note: If you reload a page, you will also trigger the onunload event (and the onload event).
Browser Support of HTML onunload Event Attribute
Note: Due to different browser settings, this event may not always work as expected.
try
Syntax of HTML onunload Event Attribute
<element onunload="script">
Attribute Values of HTML onunload Event Attribute
| Value | Description |
|---|---|
| script | The script to be run on onunload |
How to execute a JavaScript when a user unloads the document
Close this window or press F5 to reload the page.
Note: Due to different browser settings, this event may not always work as expected
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<body onunload="myFunction()">
<h1>Welcome to my Home Page</h1>
<p>Close this window or press F5 to reload the page.</p>
<p><strong>Note:</strong> Due to different browser settings, this event may not always work as expected.</p>
<script>
function myFunction() {
alert("Thank you for visiting W3Schools!");
}
</script>
</body>
</html>
Output should be:
