यदि कोई उपयोगकर्ता बैक बटन का उपयोग करके किसी पेज पर गया है तो मुझे कैसे पता चलेगा?

Question 1

यह सवाल ट्रैक करने के समान है जब उपयोगकर्ता ब्राउज़र पर बैक बटन दबाता है , लेकिन समान नहीं ... मेरे पास एक समाधान है और इसे संदर्भ और प्रतिक्रिया के लिए यहां पोस्ट कर रहा हूं। यदि किसी के पास कोई बेहतर विकल्प है, तो मैं सभी कान हूँ!

स्थिति यह है कि मेरे पास एक पृष्ठ "एक जगह संपादित करें" के साथ है, एक ला फ़्लिकर है। Ie एक "विवरण जोड़ने के लिए यहां क्लिक करें" DIV है, जिसे क्लिक करने पर सहेजें और रद्द करें बटन के साथ TEXTAREA में बदल जाता है। डेटाबेस को अपडेट करने के लिए सेविंग सर्वर पर डेटा को क्लिक करता है और TEXTAREA के स्थान पर DIV में नया विवरण डालता है। यदि पृष्ठ ताज़ा किया जाता है, तो नया विवरण डेटाबेस से "क्लिक टू एडिट" विकल्प के साथ प्रदर्शित होता है। इन दिनों काफी मानक वेब 2.0 सामान।

मुद्दा यह है कि अगर:

पृष्ठ विवरण के बिना लोड किया गया है
उपयोगकर्ता द्वारा एक विवरण जोड़ा जाता है
पृष्ठ को एक लिंक पर क्लिक करके दूर रखा गया है
उपयोगकर्ता बैक बटन पर क्लिक करता है

फिर जो दिखाया गया है (ब्राउज़र के कैशे से) वह पृष्ठ का संस्करण है बिना गतिशील रूप से संशोधित किए गए डीआईवी के साथ नया विवरण।

यह एक काफी बड़ी समस्या है क्योंकि उपयोगकर्ता मानता है कि उनका अपडेट खो गया है और जरूरी नहीं कि यह समझ में आए कि बदलावों को देखने के लिए उन्हें पेज को रिफ्रेश करने की आवश्यकता है।

तो, सवाल यह है कि आप किसी पेज को लोड होने के बाद कैसे संशोधित कर सकते हैं, और तब पता लगा सकते हैं जब उपयोगकर्ता "वापस उसी पर जाता है" और उस स्थिति में ताज़ा करने के लिए मजबूर करता है?

Question 2

छिपे हुए रूप का उपयोग करें। जब आप किसी पृष्ठ पर वापस जाने के लिए पुनः लोड या हिट करते हैं तो प्रपत्र डेटा ब्राउज़रों में संरक्षित किया जाता है (आमतौर पर)। निम्नलिखित आपके पृष्ठ में जाता है (शायद नीचे के पास):

<form name="ignore_me">
    <input type="hidden" id="page_is_dirty" name="page_is_dirty" value="0" />
</form>

आपकी जावास्क्रिप्ट में, आपको निम्नलिखित की आवश्यकता होगी:

var dirty_bit = document.getElementById('page_is_dirty');
if (dirty_bit.value == '1') window.location.reload();
function mark_page_dirty() {
    dirty_bit.value = '1';
}

HTML को पूरी तरह से पार्स करने के बाद फॉर्म को सूँघने वाले js को निष्पादित करना पड़ता है, लेकिन यदि आप उपयोगकर्ता की विलंबता एक गंभीर चिंता है, तो आप पृष्ठ के शीर्ष पर js और इनलाइन दोनों को डाल सकते हैं।

Question 3

यहाँ इस पुरानी समस्या का एक बहुत ही आसान आधुनिक समाधान है।

if (window.performance && window.performance.navigation.type === window.performance.navigation.TYPE_BACK_FORWARD) {
    alert('Got here using the browser "Back" or "Forward" button.');
}

window.performance वर्तमान में सभी प्रमुख ब्राउज़रों द्वारा समर्थित है।

Question 4

यह लेख इसे समझाता है। नीचे दिए गए कोड देखें: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

<html>
    <head>
        <script>

            function pageShown(evt){
                if (evt.persisted) {
                    alert("pageshow event handler called.  The page was just restored from the Page Cache (eg. From the Back button.");
                } else {
                    alert("pageshow event handler called for the initial load.  This is the same as the load event.");
                }
            }

            function pageHidden(evt){
                if (evt.persisted) {
                    alert("pagehide event handler called.  The page was suspended and placed into the Page Cache.");
                } else {
                    alert("pagehide event handler called for page destruction.  This is the same as the unload event.");
                }
            }

            window.addEventListener("pageshow", pageShown, false);
            window.addEventListener("pagehide", pageHidden, false);

        </script>
    </head>
    <body>
        <a href="http://www.webkit.org/">Click for WebKit</a>
    </body>
</html>

Question 5

आधुनिक ब्राउज़रों के लिए, यह अब सही तरीका लगता है:

const perfEntries = performance.getEntriesByType('navigation');
if (perfEntries.length && perfEntries[0].type === 'back_forward') {
  console.log('User got here from Back or Forward button.');
}

यह अभी भी जनवरी 2020 के रूप में "प्रायोगिक" है, लेकिन अच्छी तरह से समर्थित प्रतीत होता है।

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming

Question 6

जैसा कि ऊपर उल्लेख किया गया है, मुझे एक समाधान मिला था और इसे संदर्भ और प्रतिक्रिया के लिए यहां पोस्ट कर रहा हूं।

समाधान का पहला चरण पृष्ठ पर निम्नलिखित जोड़ना है:

<!-- at the top of the content page -->
<IFRAME id="page_is_fresh" src="fresh.html" style="display:none;"></IFRAME>
<SCRIPT style="text/javascript">
  function reload_stale_page() { location.reload(); }
</SCRIPT>

सामग्री fresh.htmlमहत्वपूर्ण नहीं है, इसलिए निम्नलिखित को पर्याप्त होना चाहिए:

<!-- fresh.html -->
<HTML><BODY></BODY></HTML>

जब क्लाइंट साइड कोड पेज को अपडेट करता है, तो उसे निम्न प्रकार से संशोधन करना होगा।

function trigger_reload_if_user_clicks_back_button()
{
  // "dis-arm" the reload stale page function so it doesn't fire  
  // until the page is reloaded from the browser's cache
  window.reload_stale_page = function(){};

  // change the IFRAME to point to a page that will reload the 
  // page when it loads
  document.getElementById("page_is_fresh").src = "stale.html";
}

stale.htmlसभी काम करता है: जब इसे लोड किया जाता है तो यह reload_stale_pageफ़ंक्शन को कॉल करेगा जो आवश्यक होने पर पृष्ठ को ताज़ा करेगा। पहली बार इसे लोड किया गया (यानी संशोधन किए जाने के बाद, reload_stale_pageफ़ंक्शन कुछ भी नहीं करेगा।)

<!-- stale.html -->
<HTML><BODY>
<SCRIPT type="text/javascript">window.parent.reload_stale_page();</SCRIPT>
</BODY></HTML>

इस स्तर पर मेरे (न्यूनतम) परीक्षण से, यह वांछित काम करने लगता है। क्या मैंने कुछ भी अनदेखा किया है?

Question 7

आप इसे onbeforeunload घटना का उपयोग करके हल कर सकते हैं :

window.onbeforeunload = function () { }

स्निपेट का विस्तार करें

एक onbeforeunload खाली इवेंट मैनेजर फ़ंक्शन होने का मतलब है कि पृष्ठ हर एक बार इसे एक्सेस करने के बाद फिर से बनाया जाएगा। Javascripts फिर से चलेगा, सर्वर-साइड स्क्रिप्ट्स को फिर से चलाया जाएगा, पेज बनाया जाएगा जैसे कि उपयोगकर्ता पहली बार इसे मार रहा था, भले ही उपयोगकर्ता पृष्ठ पर बस पीछे या आगे बटन दबाकर मिला हो ।

यहाँ एक उदाहरण का पूरा कोड है:

<html>
<head>
<title>onbeforeunload.html</title>
<script>
window.onbeforeunload = function () { }

function myfun()
{
   alert("The page has been refreshed.");
}
</script>

<body onload="myfun()">

Hello World!<br>

</body>
</html>

स्निपेट का विस्तार करें

इसे आज़माएं, इस पृष्ठ को दूर करें और फिर अपने ब्राउज़र में "बैक" या "फॉरवर्ड" बटन का उपयोग करके वापस जाएं।

यह IE, FF और Chrome में ठीक काम करता है।

बेशक आप myfun फ़ंक्शन के अंदर जो चाहें कर सकते हैं ।

अधिक जानकारी: http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript

Question 8

फ्लैग सेट करने के लिए आप लोकलस्टोरेज या सेशनस्टोरेज ( http://www.w3schools.com/html/html5_webstorage.asp ) का उपयोग कर सकते हैं (बजाय छिपे हुए फॉर्म का उपयोग करने के)।

Question 9

इस पृष्ठ का उपयोग करते हुए, विशेष रूप से @ श्वेत और इस पृष्ठ द्वारा उत्तर के बारे में @sajith द्वारा टिप्पणी को शामिल करना: http://www.mrc-productivity.com/techblog/?p=1235

<form name="ignore_me" style="display:none">
    <input type="text" id="reloadValue" name="reloadValue" value="" />
</form>

$(function ()
{
    var date = new Date();
    var time = date.getTime();

    if ($("#reloadValue").val().length === 0)
    {
        $("#reloadValue").val(time);
    }
    else
    {
        $("#reloadValue").val("");
        window.location.reload();
    }
});

Question 10

यहाँ एक jQuery संस्करण है। जब कोई उपयोगकर्ता बैक बटन दबाता है तो सफारी डेस्कटॉप / मोबाइल कैश को हैंडल करने के तरीके के कारण इसे कुछ बार उपयोग करने की आवश्यकता होती है।

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        // Loading from cache
    }
});

Question 11

मैं आज एक ऐसी ही समस्या में चला गया हूं और मैंने इसे स्थानीय स्तर पर हल कर दिया है (यहाँ थोड़ा jQuery के साथ):

$(function() {

    if ($('#page1').length) {
        // this code must only run on page 1

        var checkSteps = function () {
            if (localStorage.getItem('steps') == 'step2') {
                // if we are here, we know that:
                // 1. the user is on page 1
                // 2. he has been on page 2
                // 3. this function is running, which means the user has submitted the form
                // 4. but steps == step2, which is impossible if the user has *just* submitted the form
                // therefore we know that he has come back, probably using the back button of his browser
                alert('oh hey, welcome back!');
            } else {
                setTimeout(checkSteps, 100);
            }
        };

        $('#form').on('submit', function (e) {
            e.preventDefault();
            localStorage.setItem('steps', 'step1'); // if "step1", then we know the user has submitted the form
            checkOrderSteps();
            // ... then do what you need to submit the form and load page 2
        });
    }

    if ($('#page2').length) {
        // this code must only run on page 2
        localStorage.setItem('steps', 'step2');
    }

});

मूल रूप से:

पृष्ठ 1 पर, जब उपयोगकर्ता फ़ॉर्म सबमिट करता है, तो हम यह इंगित करने के लिए कि उपयोगकर्ता ने क्या कदम उठाया है, स्थानीय मान में "मान" सेट किया है। उसी समय, हम टाइमआउट के साथ एक फ़ंक्शन लॉन्च करते हैं जो यह जांच करेगा कि क्या यह मान बदल गया है (जैसे 10 बार / सेकंड)।

पृष्ठ 2 पर, हमने तुरंत कहा मान बदल दिया है।

इसलिए यदि उपयोगकर्ता बैक बटन का उपयोग करता है और ब्राउज़र पेज 1 को सटीक स्थिति में रखता है तो जब हमने इसे छोड़ा था, तो चेकस्टेप्स फ़ंक्शन अभी भी चल रहा है, और यह पता लगाने में सक्षम है कि लोकलस्टोरेज में मूल्य बदल दिया गया है (और उचित कार्रवाई कर सकते हैं) )। एक बार जब इस चेक ने अपना उद्देश्य भर दिया है, तो इसे जारी रखने की कोई आवश्यकता नहीं है, इसलिए हम बस अब सेटटाइमआउट का उपयोग नहीं करते हैं।