What does the HTML onpageshow attribute do?

The onpageshow attribute is an inline event handler for the pageshow event on the window — it runs JavaScript when the page becomes visible, including first load and when restored from the back-forward cache.

Where do I put the onpageshow attribute?

On the body element as a window event handler, or assign window.onpageshow / addEventListener('pageshow', handler) in JavaScript.

What is event.persisted on pageshow?

event.persisted is true when the page was restored from the back-forward cache (bfcache) instead of being loaded fresh — JavaScript state may still be in memory.

HTML onpageshow Attribute

Q: What is the difference between onpageshow and onload?

onload fires once on initial document load. onpageshow also fires when the user navigates back to a cached page — use it to refresh stale UI.

Q: Should I use onpageshow or addEventListener?

Modern code prefers window.addEventListener('pageshow', handler) so you can read event.persisted. Inline onpageshow on body works for learning.

Q: Is onpageshow supported in all browsers?

Yes in all modern browsers. Internet Explorer 11+ supports the pageshow event.

Beginner

⏱️ 7 min read

📚 Updated: Jun 2026

🎯 3 Examples

Events & Handlers

HTML onpageshow attribute tutorial — JavaScript when the page becomes visible

Overview

Introduction

The onpageshow attribute is an inline event handler for the pageshow event on the window. It runs when the page becomes visible — on first load and when the user returns via the Back button from the back-forward cache (bfcache). Use it to restore drafts saved in onpagehide, refresh stale data, or reinitialize UI. Check event.persisted in script to know if the page was cached. Put onpageshow on <body> or use window.addEventListener("pageshow", …).

What You’ll Learn

Event handler

Inline JS.

pageshow

Page visible.

window / body

Global scope.

event.persisted

bfcache restore.

+ onpagehide

Save / restore.

vs onload

Back button too.

Fundamentals

Purpose of `onpageshow` Attribute

The primary purpose of onpageshow is to run setup or refresh logic whenever the user sees the page — including when they navigate back and the browser restores a cached copy instead of reloading from the server. Common tasks include restoring form drafts, refetching API data, restarting timers, or updating a “last visited” timestamp.

The pageshow event fires on the window object. Unlike load, which runs only on a full document load, pageshow also runs when a bfcache entry is restored — so your app can fix stale UI that was frozen in memory.

💡

Pair with onpagehide

Save work in onpagehide and restore or refresh in onpageshow. Together they cover the full page lifecycle.

Foundation

📝 Syntax

Set onpageshow on body or assign window.onpageshow in JavaScript:

onpageshow.html

<body onpagehide="handlePageHide()" onpageshow="handlePageShow()">
  …
</body>

<script>
  window.onpageshow = handlePageShow;
  window.onpagehide = handlePageHide;
</script>

Syntax Rules

Value is JavaScript executed when the pageshow event fires on the window.
Valid on <body> as a window event content attribute.
Also assignable as window.onpageshow or document.body.onpageshow in script.
Pair with onpagehide for save-on-leave / restore-on-return.
Use addEventListener to access event.persisted.
Fires on initial load and bfcache restore — not the same as onload.
Not for individual elements — this is a browser page lifecycle event.

Reference

💎 Values

The onpageshow attribute accepts a string of JavaScript code:

onpageshow="handlePageShow()" — Call a named function.
onpageshow="restoreDraft()" — Restore saved form data.
JavaScript: window.onpageshow = (event) => { … } — property assignment.

pageshow-handler.html

function handlePageShow(event) {
  restoreDraftFromStorage();
  if (event.persisted) {
    status.textContent = "Restored from bfcache — refreshing data…";
    refetchLatestData();
  } else {
    status.textContent = "Fresh page load.";
  }
}

window.addEventListener("pageshow", handlePageShow);

Cheat Sheet

⚡ Quick Reference

Property / event	When it fires	Notes
`pageshow`	Page becomes visible	`onpageshow`
`pagehide`	Page is hidden	`onpagehide`
`event.persisted`	On pageshow / pagehide	`true` = bfcache
`load`	Initial document load	Does not fire on Back
Handler attribute	`onpageshow` on `body`	Window event handler

Scope

Applicable Elements

Target	Supported?	Notes
`<body>`	Yes	Window event on body (HTML)
`window`	Yes	Primary target in JavaScript
`<div>`, `<button>`	No	Use window listeners
`<frameset>`	Yes (legacy)	Rare today
`DOMContentLoaded`	Related	DOM ready, not bfcache restore

Compare

`onpageshow` vs `onpagehide` vs `onload`

API	When it fires	Typical use
`onpageshow`	Page shown (incl. Back)	Restore UI, refresh data
`onpagehide`	Page hidden	Save draft, cleanup
`onload` / `body onload`	First full load only	Initial setup
`visibilitychange`	Tab hidden / shown	Pause video, analytics

Hands-On

Examples Gallery

Inline body handler, dynamic assignment, and bfcache restore with event.persisted.

👀 Live Preview

Visit count updates on every pageshow (including Back navigation):

Loading…

Example — onpageshow on body

Show visible feedback when the page is shown:

body-onpageshow.html

<body onpageshow="onPageShowHandler()">
  <p id="status"></p>
</body>

<script>
  function onPageShowHandler() {
    document.getElementById("status").textContent =
      "Page is being shown!";
  }
</script>

Try It Yourself

How It Works

The browser fires pageshow on the window when the page becomes visible. The body attribute runs onPageShowHandler() at that moment.

Dynamic Values with JavaScript

Set the handler on document.body or window:

dynamic-onpageshow.html

<script>
  document.body.onpageshow = function (event) {
    document.getElementById("log").textContent =
      "Page shown at " + new Date().toLocaleTimeString();
  };
</script>

Try It Yourself

How It Works

Assigning document.body.onpageshow is equivalent to the inline body attribute for the pageshow event.

Example — Detect bfcache with event.persisted

Refresh stale data when the page is restored from cache:

pageshow-persisted.html

window.addEventListener("pageshow", function (event) {
  if (event.persisted) {
    log.textContent = "Restored from bfcache — refetching data…";
    refetchLatestData();
  } else {
    log.textContent = "Fresh load — initializing page.";
  }
});

Try It Yourself

How It Works

When event.persisted is true, the browser did not reload the page — refresh any data that may have changed while the user was away.

A11y

♿ Accessibility

Restore focus thoughtfully — After bfcache restore, ensure focus order still makes sense.
Announce refreshed content — Use aria-live="polite" if data reloads on pageshow.
Do not surprise users — Avoid auto-playing media on every pageshow without user intent.
Preserve form state — Restore drafts so users do not lose work after navigating back.
Keep restore logic fast — Slow refetches on Back navigation hurt perceived performance.

🧠 How onpageshow Works

User leaves page

Link, Back away.

pagehide

User returns

Back or reload.

Navigate

pageshow fires

onpageshow runs.

Event

Restore UX

Refresh, init.

Compatibility

Browser Support

The pageshow event and onpageshow handler are supported in all modern browsers, including Internet Explorer 11+.

✓ Page Lifecycle · Fully supported

Universal `onpageshow` support

All major browsers fire pageshow when the page becomes visible.

99% Browser support

Google Chrome Fully supported

Full support

Mozilla Firefox Fully supported

Full support

Apple Safari Fully supported

Full support

Microsoft Edge Fully supported

Full support

Internet Explorer IE 11+ supported

Full support

Opera Fully supported

Full support

onpageshow attribute 99% supported

Bottom line: Reliable for restore-on-return logic in all modern browsers.

Pro Tips

💡 Best Practices

✅ Do

Pair onpageshow with onpagehide
Check event.persisted and refresh stale data
Use addEventListener("pageshow", …) in production
Restore drafts saved before the user left
Test with Back button navigation

❌ Don’t

Use alert() on every pageshow
Assume pageshow equals a fresh server load
Rely on onload alone for Back navigation
Run heavy sync on every bfcache restore
Put onpageshow on random divs — use window

Wrap Up

Conclusion

The onpageshow attribute runs JavaScript when the page becomes visible — on first load and when restored from bfcache — essential for refreshing stale UI and restoring user work.

Pair it with onpagehide, read event.persisted with addEventListener, and do not rely on onload alone when users navigate with Back.

View Examples Gallery Try onpageshow demo

Summary

Key Takeaways

Knowledge Unlocked

Five truths every developer should know about `onpageshow`

Bookmark these before wiring page restore logic.

Core concepts

📄 01

Window event

Global.

Scope

🔄 02

+ onpagehide

Pair both.

Pattern

🔎 03

.persisted

bfcache.

API

💾 04

Restore UI

On return.

⚠ 05

Not onload

Back too.

Gotcha

❓ Frequently Asked Questions

What does the onpageshow attribute do?

It runs JavaScript when the pageshow event fires — when the page becomes visible, including first load and bfcache restore.

Is onpageshow the same as onload?

No. onload fires once on initial load. onpageshow also fires when the user navigates back to a cached page.

What is event.persisted?

true when the page was restored from the back-forward cache — JavaScript variables may still hold old values.

How do I test pageshow?

Load the page, navigate to another URL, then click Back. pageshow fires again — often with event.persisted === true.

Should I use onpageshow or addEventListener?

window.addEventListener("pageshow", handler) is preferred — you need it to read event.persisted.

Is onpageshow supported in all browsers?

Yes in all modern browsers; Internet Explorer 11+.

Handle page restore gracefully

Practice the onpageshow attribute with bfcache and restore examples in the Try It editor.

Try onpageshow demo →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

HTML onpagehide Attribute HTML onpaste Attribute

HTML onpageshow Attribute

Introduction

What You’ll Learn

Event handler

pageshow

window / body

event.persisted

+ onpagehide

vs onload

Purpose of onpageshow Attribute

📝 Syntax

Syntax Rules

💎 Values

⚡ Quick Reference

Applicable Elements

onpageshow vs onpagehide vs onload

Examples Gallery

👀 Live Preview

Example — onpageshow on body

How It Works

Dynamic Values with JavaScript

How It Works

Example — Detect bfcache with event.persisted

How It Works

♿ Accessibility

🧠 How onpageshow Works

User leaves page

User returns

pageshow fires

Restore UX

Browser Support

Universal onpageshow support

💡 Best Practices

✅ Do

❌ Don’t

Conclusion

Key Takeaways

Five truths every developer should know about onpageshow

Window event

+ onpagehide

.persisted

Restore UI

Not onload

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML onpagehide Attribute

HTML onpaste Attribute

HTML onbeforeunload Attribute

Try onpageshow Demo

Handle page restore gracefully

About the author

Purpose of `onpageshow` Attribute

`onpageshow` vs `onpagehide` vs `onload`

Universal `onpageshow` support

Five truths every developer should know about `onpageshow`