Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
Server-Side Tutorials

Server-Side Tutorials

CC++C#JavaPHPPythonNode.jsExpress
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML onpagehide Attribute

Posted in HTML Tutorial
Updated on Oct 29, 2024
By Mari Selvan
👁️ 44 - Views
⏳ 4 mins
💬 1 Comment
HTML onpagehide Attribute

Photo Credit to CodeToFun

🙋 Introduction

The onpagehide attribute is a useful feature in HTML that allows developers to execute JavaScript code when a page is about to be hidden or unloaded.

This attribute is often employed to perform cleanup tasks or save session-related data before the user navigates away from the page.

🎯 Purpose of onpagehide

The primary purpose of the onpagehide attribute is to provide developers with a way to execute scripts just before a user leaves a page.

This can be valuable for performing actions such as saving user preferences, recording analytics data, or releasing resources to optimize performance.

💎 Values

The onpagehide attribute accepts JavaScript code as its value. This code will be executed when the page is being hidden or unloaded.

It is commonly used in conjunction with the window object to define event handlers.

📄 Example

Here's a simple example of how to use the onpagehide attribute in an HTML document:

onpagehide.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page with onpagehide Attribute</title>
</head>
<body onpagehide="handlePageHide()">

  <h1>Your Page Content Goes Here</h1>

  <script>
    function handlePageHide() {
      // Perform cleanup or save data before the page is hidden
      console.log("Page is about to be hidden. Perform cleanup here.");
    }
  </script>

</body>
</html>

🧠 How it Works

In this example, the onpagehide attribute is added to the <body> element, and it calls the handlePageHide() function when the page is about to be hidden.

🔄 Dynamic Values with JavaScript

You can dynamically set the onpagehide attribute using JavaScript.

This can be beneficial when you want to customize the behavior based on certain conditions or user interactions. Here's a brief example:

onpagehide.html
Copied
Copy To Clipboard
<script>
  // Dynamically set onpagehide event handler
  window.onpagehide = function() {
    // Custom logic to be executed when the page is about to be hidden
    console.log("Dynamic onpagehide event handler executed.");
  };
</script>

🧠 How it Works

In this script, the onpagehide attribute is dynamically set to a function that will be executed when the page is about to be hidden.

🏆 Best Practices

  • Use the onpagehide attribute for tasks that should be performed just before the user leaves the page, such as saving user preferences or analytics data.
  • Be cautious with resource-intensive operations in the onpagehide event, as it may affect the page unloading performance.
  • Test the functionality across different browsers to ensure consistent behavior.

🎉 Conclusion

The onpagehide attribute is a valuable tool for executing JavaScript code just before a page is hidden or unloaded.

By leveraging this attribute, developers can enhance the user experience and perform necessary cleanup tasks.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mari Selvan
Mari Selvan
9 months ago

If you have any doubts regarding this article (HTML onpagehide Attribute), please comment here. I will help you immediately.

0
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy