Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

HTML Basic

HTML Reference

HTML onpageshow Attribute

Posted in HTML Tutorial
Updated on Sep 22, 2024
By Mari Selvan
👁️ 47 - Views
⏳ 4 mins
💬 1 Comment
HTML onpageshow Attribute

Photo Credit to CodeToFun

🙋 Introduction

The onpageshow attribute is a useful feature in HTML that allows developers to execute JavaScript code when a page is being loaded or shown.

This attribute is commonly associated with handling events related to the loading or showing of a page, providing developers with the ability to perform specific actions during these events.

🎯 Purpose of onpageshow

The primary purpose of the onpageshow attribute is to specify a JavaScript function that should be executed when a page is shown, including when it is initially loaded or when the user navigates back to it.

This can be beneficial for tasks such as initializing page content, updating data, or any other actions that should occur when the page becomes visible.

💎 Values

The onpageshow attribute accepts JavaScript code or function names.

When the page is shown, the specified code or function is executed.

It's important to note that the onpageshow event is fired not only when a page is initially loaded but also when the user navigates back to it using browser history.

📄 Example

Let's look at a simple example of how to use the onpageshow attribute in an HTML document:

onpageshow.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>onpageshow Example</title>
  <script>
    function onPageShowHandler() {
      alert("Page is being shown!");
      // Additional actions or code can be added here
    }
  </script>
</head>
<body onpageshow="onPageShowHandler()">
  <h1>Hello, World!</h1>
</body>
</html>

🧠 How it Works

In this example, the onpageshow attribute is set on the <body> element, specifying the JavaScript function onPageShowHandler to be executed when the page is shown.

🔄 Dynamic Values with JavaScript

You can dynamically set the onpageshow attribute using JavaScript.

This allows you to change the behavior based on certain conditions or user interactions. Here's a brief example:

onpageshow.html
Copied
Copy To Clipboard
<script>
  // Dynamically set onpageshow event for the body element
  document.body.onpageshow = function(event) {
    console.log("Page is being shown!", event);
    // Additional actions or code can be added here
  };
</script>

🧠 How it Works

In this script, the onpageshow event is dynamically set for the <body> element, and the associated function logs a message to the console when the page is shown.

🏆 Best Practices

  • Use the onpageshow attribute for tasks that need to be performed specifically when a page is being shown to the user.
  • Be mindful of the fact that the onpageshow event may also be triggered when the user navigates back to the page, so consider the implications of this behavior in your implementation.
  • Ensure that the JavaScript code or function specified in the onpageshow attribute is well-tested and handles various scenarios gracefully.

🎉 Conclusion

The onpageshow attribute in HTML provides developers with a convenient way to execute JavaScript code when a page is being loaded or shown.

By leveraging this attribute, you can enhance the interactivity and responsiveness of your web pages.

👨‍💻 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
8 months ago

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

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