HTML DOM PopStateEvent ऑब्जेक्ट

PopStateEvent ऑब्जेक्ट क्या है?

HTML DOM PopStateEvent ऑब्जेक्ट popstate इवेंट के लिए इवेंट ऑब्जेक्ट है, जो तब फायर होता है जब सक्रिय इतिहास प्रविष्टि बदलती है (उदाहरण: उपयोगकर्ता ब्राउज़र के बैक/फॉरवर्ड बटन दबाता है, या history.back()/history.forward()/history.go() कॉल किया जाता है)। यह history.pushState() या history.replaceState() के साथ जोड़ी गई स्टेट ऑब्जेक्ट तक पहुंच प्रदान करता है।

PopStateEvent की प्रॉपर्टी

उदाहरण

यह उदाहरण दर्शाता है कि कैसे popstate इवेंट काम करता है जब इतिहास में नेविगेट किया जाता है:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-size: 1.2rem; }
  .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 PopStateEvent इवेंट डेमो</h1>
<button onclick="display()" class="btn">मुझे क्लिक करें</button>
<script>
  function display() {
    window.onpopstate = function(event) {
      alert("स्थान: " + document.location + ", स्टेट: " + JSON.stringify(event.state));
    };
    history.pushState({ page: 1 }, "शीर्षक होम", "?page=home");
    history.pushState({ page: 2 }, "शीर्षक अबाउट", "?page=about");
    history.replaceState({ page: 3 }, "शीर्षक संपर्क", "?page=contact");
    history.back();
    history.back();
  }
</script>
</body>
</html>

आउटपुट

"मुझे क्लिक करें" बटन पर क्लिक करने पर, इतिहास में तीन प्रविष्टियां जोड़ी जाती हैं और फिर दो बार back() कॉल किया जाता है, जिससे दो popstate इवेंट फायर होते हैं। प्रत्येक अलर्ट वर्तमान URL और संबंधित स्टेट ऑब्जेक्ट दिखाता है।

मुख्य अवधारणाएं

• popstate इवेंट: केवल तब फायर होता है जब उपयोगकर्ता इतिहास में नेविगेट करता है (बैक/फॉरवर्ड बटन, history.back(), आदि)। pushState() या replaceState() को कॉल करने से नहीं फायर होता।
• स्टेट ऑब्जेक्ट: pushState(state, title, url) या replaceState(state, title, url) के माध्यम से सेट किया गया कोई भी सीरियलाइज़ेबल ऑब्जेक्ट हो सकता है।
• प्रारंभिक लोड: पेज लोड पर popstate फायर हो सकता है (ब्राउज़र पर निर्भर)।

उपयोग के मामले

• सिंगल-पेज एप्लिकेशन (SPA) रूटिंग बिना हैश (#) के।
• ब्राउज़र बैक/फॉरवर्ड बटन के लिए UI स्थिति संरक्षित करना।
• इतिहास नेविगेशन पर एनालिटिक्स ट्रैकिंग।
• डायनामिक सामग्री के लिए डीप लिंकिंग सक्षम करना।

सर्वोत्तम अभ्यास

// आधुनिक इवेंट लिसनर दृष्टिकोण (सुझाया गया)
window.addEventListener('popstate', function(event) {
  if (event.state) {
    // स्टेट के आधार पर UI पुनर्स्थापित करें
    restoreState(event.state);
  }
});

// स्टेट ऑब्जेक्ट को हल्का रखें (सीरियलाइज़ेबल, कोई फंक्शन/साइक्लिक रेफरेंस नहीं)
history.pushState({ view: 'detail', id: 123 }, '', '/detail/123');