PageTransitionEvent क्या है?
DOM PageTransitionEvent एक इवेंट इंटरफ़ेस है जो तब फायर होता है जब उपयोगकर्ता वेबपेज के बीच नेविगेट करता है। इसमें दो इवेंट प्रकार शामिल हैं: pageshow (पेज दिखाए जाने पर) और pagehide (पेज छोड़ने पर)। यह ब्राउज़र कैशिंग व्यवहार (bfcache - बैक/फॉरवर्ड कैश) का पता लगाने के लिए विशेष रूप से उपयोगी है।
PageTransitionEvent की प्रॉपर्टी
| प्रॉपर्टी | विवरण |
|---|---|
persisted |
बूलियन: true यदि पेज ब्राउज़र द्वारा कैश किया गया था (bfcache से पुनर्स्थापित), false यदि नए सिरे से लोड किया गया। |
इवेंट प्रकार
| इवेंट | विवरण |
|---|---|
pagehide |
उपयोगकर्ता पेज से दूर नेविगेट करता है जब फायर होता है। persisted=true का अर्थ है पेज कैश में जा रहा है। |
pageshow |
उपयोगकर्ता पेज पर नेविगेट करता है जब फायर होता है। persisted=true का अर्थ है पेज कैश से पुनर्स्थापित हुआ। |
उदाहरण
यह उदाहरण जांचता है कि पेज ब्राउज़र द्वारा कैश किया गया था या नहीं:
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; color: #fff; background: #ff7f5094; height: 100%; }
.btn {
background: #0197F6;
border: none;
height: 2rem;
border-radius: 2px;
width: 35%;
margin: 2rem auto;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM PageTransitionEvent इवेंट डेमो</h1>
<button onclick="checkPage(event)" class="btn">मुझे क्लिक करें</button>
<script>
function checkPage(event) {
if (event.persisted) {
confirm("पेज ब्राउज़र द्वारा कैश किया गया था");
} else {
confirm("पेज ब्राउज़र द्वारा कैश नहीं किया गया था");
}
}
// वास्तविक pageshow/pagehide हैंडलर्स:
window.addEventListener('pageshow', function(event) {
console.log('pageshow:', event.persisted ? 'कैश से पुनर्स्थापित' : 'नया लोड');
});
window.addEventListener('pagehide', function(event) {
console.log('pagehide:', event.persisted ? 'कैश में जा रहा' : 'अनलोड हो रहा');
});
</script>
</body>
</html>आउटपुट
बटन पर क्लिक करने पर (क्लिक इवेंट पर event.persisted की जांच करके - ध्यान दें: क्लिक इवेंट में persisted नहीं होता; वास्तविक उपयोग pageshow/pagehide लिसनर्स में होता है), यह दर्शाता है कि प्रॉपर्टी कैसे काम करती है।
bfcache (बैक/फॉरवर्ड कैश) क्या है?
आधुनिक ब्राउज़र पेज को मेमोरी में कैश करते हैं जब आप उनसे दूर नेविगेट करते हैं, ताकि बैक बटन दबाने पर वे तुरंत पुनर्स्थापित हो सकें (पुनः लोड किए बिना)। persisted प्रॉपर्टी आपको बताती है कि यह हुआ या नहीं।
उपयोग के मामले
- एनालिटिक्स: वास्तविक पेज व्यू बनाम कैश पुनर्स्थापना ट्रैक करना।
- स्थिति पुनर्स्थापना: यदि
persisted=true, तो JS स्थिति पहले से बहाल है; पुनः आरंभीकरण छोड़ें। - कनेक्शन प्रबंधन:
pagehideपर WebSocket/सर्वर-सेंट इवेंट कनेक्शन बंद करें (यदि!persisted)। - टाइमर/इंटरवल साफ़ करना:
pagehideपर (यदि कैश नहीं किया गया)।
ब्राउज़र समर्थन
सभी आधुनिक ब्राउज़रों में पूर्ण समर्थन। persisted प्रॉपर्टी व्यापक रूप से समर्थित है।
