क्या बैक बटन पर क्लिक करने पर क्रॉस-ब्राउज़र ऑनलोड घटना है?

185

सभी प्रमुख ब्राउज़रों के लिए (IE को छोड़कर), जावास्क्रिप्ट onloadइवेंट में आग नहीं लगती है जब पृष्ठ बैक बटन ऑपरेशन के परिणामस्वरूप लोड होता है - यह केवल उस समय फायर करता है जब पेज पहली बार लोड होता है।

क्या कोई मुझे कुछ नमूना क्रॉस-ब्राउज़र कोड (फ़ायरफ़ॉक्स, ओपेरा, सफारी, IE,…) पर इंगित कर सकता है जो इस समस्या को हल करता है? मैं फ़ायरफ़ॉक्स की pageshowघटना से परिचित हूं, लेकिन दुर्भाग्य से न तो ओपेरा और न ही सफारी इसे लागू करते हैं।

javascript pageload

— बिल
स्रोत

6

यह कोई समस्या नहीं है - यह उपयोगकर्ता को बैक बटन दबाने पर वेब पेज को जल्दी से लोड करने की अनुमति देता है। विवरण के लिए नीचे मेरा उत्तर देखें। यहाँ सुझाए गए वर्कअराउंड वेब पेज को उपयोगकर्ता के लिए अधिक कष्टप्रद बनाते हैं, क्योंकि पीछे / आगे नेविगेट करना धीमा है।

— निकोलय

2

@romkyns: आपकी टिप्पणी इस प्रश्न से संबंधित नहीं है। जब ब्राउज़र्स JS / DOM राज्य को पुनर्स्थापित नहीं करते हैं, तो वे लोड इवेंट को फायर करते हैं।

— निकोले

iOS 5+ इतिहास का बैक बटन यहां हल किया गया stackoverflow.com/a/12652160/1090395

— Mladen Janjetovic

117

दोस्तों, मैंने पाया कि JQuery का केवल एक ही प्रभाव है: पृष्ठ को पुनः लोड किया जाता है जब बैक बटन दबाया जाता है। इसका " तैयार " से कोई लेना-देना नहीं है ।

यह कैसे काम करता है? खैर, JQuery एक onunload घटना श्रोता जोड़ता है।

// http://code.jquery.com/jquery-latest.js
jQuery(window).bind("unload", function() { // ...

डिफ़ॉल्ट रूप से, यह कुछ नहीं करता है। लेकिन किसी तरह यह सफारी, ओपेरा और मोज़िला में एक पुनः लोड को ट्रिगर करने के लिए लगता है - चाहे कोई भी घटना हैंडलर शामिल हो।

[ संपादित करें (निकोले) : यहाँ क्यों यह इस तरह से काम करता है: webkit.org , developer.mozilla.org । कृपया उन लेखों (या नीचे एक अलग उत्तर में मेरा सारांश) को पढ़ें और विचार करें कि क्या आपको वास्तव में ऐसा करने की आवश्यकता है और अपने उपयोगकर्ताओं के लिए अपना पृष्ठ लोड धीमा करें।]

विश्वास नहीं कर सकता? इसे इस्तेमाल करे:

<body onunload=""><!-- This does the trick -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>

JQuery का उपयोग करते समय आपको समान परिणाम दिखाई देंगे।

हो सकता है कि आप इस पर बिना किसी भार के तुलना करना चाहें

<body><!-- Will not reload on back button -->
<script type="text/javascript">
    alert('first load / reload');
    window.onload = function(){alert('onload')};
</script>
<a href="http://stackoverflow.com">click me, then press the back button</a>
</body>

— user123444555621
स्रोत

1

बहुत अच्छा है .. हालाँकि यह एक अनैच्छिक सुविधा है / बग हालांकि, और बस ब्राउज़र के भविष्य के संस्करणों में काम करना बंद कर सकता है, लेकिन यह अभी भी दिलचस्प है।

— वादी एम।

3

यह भी काम करता है (onunload = "" भाग को न भूलें, अन्यथा ff3 पर काम नहीं करेगा): <body onload = "alert ('onload');" onunload = "">

— वाडीह M.

3

ऐसा इसलिए है क्योंकि ब्राउज़र मान लेता है कि पृष्ठ अप्राप्य है यदि इसमें कोई onunloadहैंडलर है (पेज ने पहले ही सब कुछ नष्ट कर दिया है; तो इसे कैश क्यों करें?)।

— केसी चु

14

उत्तर आधुनिक ब्राउज़रों में काम नहीं करता है - नवीनतम क्रोम और ओपेरा में जांचा गया

— एंड्रयू

10

यह iPad सफारी में काम नहीं करता है ... कृपया, इसे एक उत्तर के रूप में

— चिह्नित करें

74

कुछ आधुनिक ब्राउज़र (फ़ायरफ़ॉक्स, सफारी और ओपेरा, लेकिन क्रोम नहीं) विशेष "बैक / फॉरवर्ड" कैश का समर्थन करते हैं (मैं इसे bfcache कहूंगा, जो कि मोज़िला द्वारा आविष्कृत एक शब्द है), जब उपयोगकर्ता वापस नेविगेट करता है। नियमित (HTTP) कैश के विपरीत, यह पृष्ठ की संपूर्ण स्थिति (जेएस, डोम की स्थिति सहित) को कैप्चर करता है। यह इसे पृष्ठ को फिर से लोड करने की अनुमति देता है और ठीक उसी तरह जैसे उपयोगकर्ता ने इसे छोड़ा था।

loadजब पृष्ठ को इस bfcache से लोड किया जाता है , तो घटना को आग नहीं माना जाता है। उदाहरण के लिए, यदि आपने "लोड" हैंडलर में अपना यूआई बनाया है, और "लोड" इवेंट को प्रारंभिक लोड पर एक बार निकाल दिया गया था, और दूसरी बार जब पृष्ठ को bfcache से फिर से लोड किया गया था, तो पेज के साथ समाप्त हो जाएगा यूआई तत्वों की नकल करें।

यही कारण है कि "अनलोड" हैंडलर को जोड़ने से पृष्ठ को bfcache में संग्रहीत होने से रोका जाता है (इस प्रकार यह वापस नेविगेट करने में धीमी बना देता है) - अनलोड हैंडलर क्लीन-अप कार्य कर सकता है, जो पेज को असमान स्थिति में छोड़ सकता है।

उन पृष्ठों के लिए जिन्हें जानने की आवश्यकता है कि वे कब दूर / वापस, फ़ायरफ़ॉक्स 1.5+ और सफारी के संस्करण बग 28758 के लिए फिक्स के साथ "पेजशो" और "पेजहाइड" नामक विशेष आयोजनों का समर्थन करते हैं।

संदर्भ:

वेबकिट: http://webkit.org/blog/516/webkit-page-cache-ii-the-unload-bvent/
फ़ायरफ़ॉक्स: https://developer.mozilla.org/En/Using_Firefox_1.5_caching ।
Chrome: https://code.google.com/p/chromium/issues/detail?id=2879

— Nickolay
स्रोत

यह बहुत अच्छा है। मैं इस समय ऐसी स्थिति में हूं, जहां मेरे डोम हेरफेर bfcache में सहेजे नहीं जाते हैं। क्या ऐसी कोई परिस्थितियाँ हैं जहाँ आप यह उम्मीद कर सकते हैं?

— बेन्सन

1

@ बेंसन: जब फ़ायरफ़ॉक्स bfcache में आपके पेज को नहीं बचाएगा, तो संभावित कारण मुझे सूचीबद्ध किए गए dev.mo पेज पर सूचीबद्ध हैं। मुझे नहीं लगता कि पृष्ठ को bfcache पर सहेजना संभव है, लेकिन कुछ DOM स्थिति को सहेजा नहीं जा सकता है।

— निकोले

निकोले, मुझे आपकी अनिच्छा को पुनः लोड करने और bfcache द्वारा किए गए अच्छे काम को पूर्ववत करने के लिए मिलता है, लेकिन क्या bfcache में पृष्ठ के डोम को अपडेट करने का एक और तरीका है? उदाहरण के लिए, उस स्थिति पर विचार करें जहां मैं उस पृष्ठ से जाता हूं जिसमें उनमें से एक के लिए संदेशों की एक सूची है, और जब मैं "वापस" जाता हूं तो मैं चाहता हूं कि पढ़ने / अपठित सूचक को बदलना चाहिए। पृष्ठ को पुनः लोड किए बिना यह कैसे किया जा सकता है?

— ग्रेग

@Greg: पृष्ठ को नियंत्रित करने वाले डेवलपर के रूप में आपका मतलब है? एक 'पेजशो' श्रोता से अजाक्स अनुरोध को बंद करें।

— निकोले

JQuery का उपयोग करने और तेज़ bfcache समर्थन प्राप्त करने के बारे में कोई विचार?

— एलेक्स ब्लैक

31

मैं एक समस्या में भाग गया था कि जब उपयोगकर्ता वापस या आगे क्लिक किया था तो मेरा js निष्पादित नहीं कर रहा था। मैंने पहले ब्राउज़र को कैशिंग से रोकने के लिए सेट किया था, लेकिन यह समस्या प्रतीत नहीं हुई। मेरे जावास्क्रिप्ट को सभी पुस्तकालयों आदि के लोड होने के बाद निष्पादित करने के लिए सेट किया गया था। मैंने इन्हें तैयार किए गए स्टेस्टचेंज इवेंट के साथ चेक किया।

कुछ परीक्षण के बाद मुझे पता चला कि जिस पृष्ठ पर वापस क्लिक किया गया है उसमें एक तत्व का रेडीस्टेट 'भरा हुआ' नहीं है, बल्कि 'पूरा' है। जोड़ा जा रहा है || element.readyState == 'complete'मेरी सशर्त बयान करने के लिए मेरे समस्याओं को हल किया।

बस सोचा था कि मैं अपने निष्कर्षों को साझा करूंगा, उम्मीद है कि वे किसी और की मदद करेंगे।

पूर्णता के लिए संपादित करें

मेरा कोड निम्नानुसार देखा गया:

script.onreadystatechange(function(){ 
   if(script.readyState == 'loaded' || script.readyState == 'complete') {
      // call code to execute here.
   } 
});

स्क्रिप्ट चर के ऊपर कोड नमूने में एक नव निर्मित स्क्रिप्ट तत्व था जिसे DOM में जोड़ा गया था।

— ब्रायन हेसे
स्रोत

7

आपने इसे कहाँ जोड़ा? और उपयोगकर्ता द्वारा वापस हिट करने के बाद आपको आग लगाने के लिए कुछ भी कैसे मिला? कृपया हमें कुछ कोड दिखाएं!

— केरिगन

जब आप "मेरे सशर्त बयान" कहते हैं, तो आपका क्या मतलब है?

— फिलिप सन्ह

1

@Phillip एक सशर्त बयान एक if statement है।

— ब्रायन हीज़

22

ठीक है, यहाँ एक अंतिम समाधान है जो कि क्रैमर के प्रारंभिक समाधान और पैलेहोर के उदाहरण पर आधारित है जो ओपेरा सहित सभी ब्राउज़रों में काम करता है। यदि आप history.navigationMode को 'संगत' पर सेट करते हैं, तो jQuery का तैयार फ़ंक्शन ओपेरा के साथ-साथ अन्य प्रमुख ब्राउज़रों में भी बैक बटन संचालन पर आग लगा देगा।

इस पृष्ठ में अधिक जानकारी है ।

उदाहरण:

history.navigationMode = 'compatible';
$(document).ready(function(){
  alert('test');
});

मैंने इसे ओपेरा 9.5, IE7, FF3 और सफारी में परीक्षण किया और यह उन सभी में काम करता है।

— बिल
स्रोत

2

जाहिर है यह कुछ समय (लगभग 5.5 वर्ष) रहा है, लेकिन यह ध्यान देने योग्य है कि आपका लिंक मृत है।

— जेफ

2

यह समाधान मेरे लिए काम नहीं करता है। मुझे यह मुद्दा नवीनतम फ़ायरफ़ॉक्स (45.0.1)

— आर्मिन

6

मुझे काम करने के लिए उपरोक्त उदाहरण नहीं मिले। जब मैं बैक बटन के माध्यम से पृष्ठ पर वापस आ रहा हूं, तो मैं कुछ संशोधित div क्षेत्रों का एक रिफ्रेश ट्रिगर करना चाहता था। मैंने जिस ट्रिक का इस्तेमाल किया, वह एक छिपा इनपुट फ़ील्ड (जिसे "गंदा बिट" कहा जाता है) को 1 से सेट करना था, जैसे ही डिव क्षेत्रों को मूल से बदल दिया गया। जब मैं वापस क्लिक करता हूं, तो छिपा हुआ इनपुट फ़ील्ड वास्तव में इसका मूल्य बनाए रखता है, इसलिए मैं इस बिट के लिए जांच कर सकता हूं। यदि यह सेट है, तो मैं पृष्ठ को ताज़ा करता हूं (या बस divs ताज़ा करें)। मूल लोड पर, हालांकि, बिट सेट नहीं है, इसलिए मैं पृष्ठ को दो बार लोड करने में समय बर्बाद नहीं करता हूं।

<input type='hidden' id='dirty'>

<script>
$(document).ready(function() {
  if ($('#dirty').val()) {
    // ... reload the page or specific divs only
  }
  // when something modifies a div that needs to be refreshed, set dirty=1
  $('#dirty').val('1');
});
</script>

जब भी मैं बैक बटन पर क्लिक करता हूं तो यह ठीक से ट्रिगर हो जाता है।

— thorie
स्रोत

3

जब भी यह फ़ायरफ़ॉक्स में काम नहीं करता है, मुझे लगता है कि यह IE / Chrome में स्थिति को संभालने का एक चालाक तरीका है जहां छिपे हुए क्षेत्र की दृढ़ता बहुत उपयोगी है। मैंने आपकी चाल का उपयोग किया है और "पेजशो" इवेंट का भी, इसलिए मैंने सभी मुख्य ब्राउज़रों को कवर किया है।

— मैग्नस स्मिथ

क्या ब्राउज़र पृष्ठों के साथ काम नहीं करता है जो यह करता है?

— जस्टिन

4

अगर मुझे ठीक से याद है, तो एक अनलोड () घटना को जोड़ने का मतलब है कि पेज कैश नहीं किया जा सकता है (आगे / पिछड़े कैश में) - क्योंकि यह राज्य परिवर्तन है / जब उपयोगकर्ता नेविगेट करता है तो बदल सकता है। इसलिए - इतिहास वस्तु के माध्यम से नेविगेट करके पृष्ठ पर अंतिम-दूसरी स्थिति को पुनर्स्थापित करना सुरक्षित नहीं है।

4

मुझे लगा कि यह "ऑनऑनलोड" के लिए होगा, पेज लोड नहीं, क्योंकि हम "बैक" मारते समय किसी ईवेंट को फायर करने की बात नहीं कर रहे हैं? $ document.ready () पृष्ठ लोड पर वांछित घटनाओं के लिए है, भले ही आप उस पृष्ठ पर न जाएं (यानी रीडायरेक्ट करना, ब्राउज़र को सीधे URL पर खोलना, आदि), "बैक" पर क्लिक करने पर नहीं, जब तक आप बात नहीं कर रहे हों जब वह फिर से लोड होता है तो पिछले पृष्ठ पर आग लगाने के बारे में। और मुझे यकीन नहीं है कि पेज कैश नहीं हो रहा है क्योंकि मैंने पाया है कि जावास्क्रिप्ट अभी भी हैं, तब भी जब $ document.ready () उन्हें शामिल किया गया है। हमें अपनी स्क्रिप्ट्स को संपादित करते समय Ctrl + F5 को हिट करना पड़ता है, जब भी यह घटना होती है जब भी हम उन्हें संशोधित करते हैं और हम अपने पृष्ठों में परिणामों का परीक्षण करना चाहते हैं।

$(window).unload(function(){ alert('do unload stuff here'); });

"बैक" को हिट करने और वर्तमान पृष्ठ को अनलोड करने के दौरान आप एक ऑनऑनलोड घटना के लिए क्या चाहते हैं, और जब उपयोगकर्ता ब्राउज़र विंडो को बंद करता है, तब भी आग लग जाएगी। यह और अधिक लग रहा था जैसे कि क्या वांछित था, भले ही मैं $ डॉक्यूमेंट (पहले से) प्रतिक्रियाओं से बाहर हो गया हूं। मूल रूप से अंतर वर्तमान पृष्ठ पर एक ईवेंट फायरिंग के बीच होता है जब यह बंद हो रहा होता है या लोड होने पर "बैक" पर क्लिक करते समय लोड होता है। IE 7 में ठीक परीक्षण, अन्य ब्राउज़रों के लिए नहीं बोल सकता क्योंकि उन्हें अनुमति नहीं है कि हम कहां हैं। लेकिन यह एक और विकल्प हो सकता है।

— टॉम
स्रोत

4

मैं ckramer की पुष्टि कर सकता हूं कि jQuery का रेडी इवेंट IE और FireFox में काम करता है। यहाँ एक नमूना है:

<html>
<head>
    <title>Test Page</title>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(document).ready(function () {
               var d = new Date();
               $('#test').html( "Hi at " + d.toString() );
            });
    </script>
</head>
<body>
    <div id="test"></div>
    <div>
        <a href="http://www.google.com">Go!</a>
    </div>
</body>
</html>

— निर्बल घोड़ा
स्रोत

4

जो लोग पूरे jquery पुस्तकालय का उपयोग नहीं करना चाहते हैं उनके लिए मैंने अलग कोड में कार्यान्वयन निकाला। यह केवल 0,4 KB बड़ा है।

आप इस विकी में एक जर्मन ट्यूटोरियल के साथ मिलकर कोड पा सकते हैं: http://www.easy-coding.de/wiki/html-ajax-und-co/onload-event-cross-browser-kompatibler-incontcontentloaded.html

— तोरबन ब्रोड्ट
स्रोत

1

लोन लिंक को एक खराब उत्तर माना जाता है ( faq देखें ) क्योंकि यह अपने आप से अर्थहीन है और लक्ष्य संसाधन भविष्य में जीवित रहने की गारंटी नहीं है । यहां उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर होगा ।

— j0k

3

jQuery की तैयार घटना सिर्फ इस तरह के मुद्दे के लिए बनाई गई थी। आप कवर के तहत क्या चल रहा है यह देखने के लिए कार्यान्वयन में खुदाई करना चाह सकते हैं।

— ckramer
स्रोत

6

लंबे समय बाद, readyबैक बटन का उपयोग करते समय फ़ायरफ़ॉक्स में ट्रिगर नहीं किया गया लगता है। निकोल का जवाब भी देखें ।

— अर्जन

2

बिल, मैं आपके प्रश्न का उत्तर देने का साहस करता हूं, हालांकि मैं अपने अनुमानों के साथ 100% निश्चित नहीं हूं। मुझे लगता है कि अन्य तब IE ब्राउज़र जब इतिहास में एक पृष्ठ पर उपयोगकर्ता को ले जा रहे हैं, तो न केवल पेज और इसके संसाधनों को कैश से लोड किया जाएगा, बल्कि वे इसके लिए संपूर्ण डोम (पढ़ें सत्र) राज्य को भी पुनर्स्थापित करेंगे। IE डोम पुनर्स्थापना नहीं करता है (या पट्टे पर नहीं किया था) और इस प्रकार ओनोड घटना को उचित पृष्ठ फिर से आरंभीकरण के लिए आवश्यक लगता है।

— सर्गेई इलिंस्की
स्रोत

2

मैंने $ (दस्तावेज़) का उपयोग करके बिल से समाधान की कोशिश की। पहले से ही ... लेकिन पहले यह काम नहीं किया। मुझे पता चला कि अगर स्क्रिप्ट को html अनुभाग के बाद रखा जाता है, तो यह काम नहीं करेगा। यदि यह हेड सेक्शन है तो यह काम करेगा लेकिन केवल IE में। फ़ायरफ़ॉक्स में स्क्रिप्ट काम नहीं करती है।

— जोहान
स्रोत

1

ठीक है, मैंने यह कोशिश की और यह फ़ायरफ़ॉक्स 3, सफारी 3.1.1 और IE7 में काम करता है लेकिन ओपेरा 9.52 में नहीं ।
यदि आप नीचे दिखाए गए उदाहरण का उपयोग करते हैं (पैलेहोर के उदाहरण के आधार पर), तो आपको पृष्ठ के पहले लोड होने पर एक अलर्ट बॉक्स पॉप-अप मिलता है। लेकिन यदि आप फिर किसी अन्य URL पर जाते हैं, और फिर इस पृष्ठ पर वापस जाने के लिए बैक बटन दबाते हैं, तो आपको ओपेरा में एक अलर्ट बॉक्स पॉप-अप नहीं मिलता है (लेकिन आप अन्य ब्राउज़रों में करते हैं)।

वैसे भी, मुझे लगता है कि यह अब के लिए काफी करीब है। सबको धन्यवाद!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<meta http-equiv="expires" content="0">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( 
                    function(){
                      alert('test');
                    }
                 );
</script>
</head>
<body>
<h1>Test of the page load event and the Back button using jQuery</h1>
</body>
</html>

— बिल
स्रोत

1

IE 9 पर अनलोड इवेंट ठीक काम नहीं कर रहा है। मैंने इसे लोड इवेंट (ऑनलोड ()) के साथ आज़माया, यह IE 9 और FF5 पर ठीक काम कर रहा है ।

उदाहरण:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    jQuery(window).bind("load", function() {
        $("[name=customerName]").val('');
    });
</script>
</head>
<body>
    <h1>body.jsp</h1>
    <form action="success.jsp">
        <div id="myDiv">

        Your Full Name: <input name="yourName" id="fullName"
            value="Your Full Name" /><br> <br> <input type="submit"><br>

        </div>

    </form>
</body>
</html>

— mallesham
स्रोत

0

मैंने एक html टेम्पलेट का उपयोग किया है। इस टेम्पलेट के custom.js फ़ाइल में, इस तरह एक फ़ंक्शन था:

    jQuery(document).ready(function($) {

       $(window).on('load', function() {
          //...
       });

    });

लेकिन जब दूसरे पृष्ठ पर जाने के बाद मैं वापस जाता हूं तो यह फ़ंक्शन काम नहीं करता था।

इसलिए, मैंने यह कोशिश की और इसने काम किया है:

    jQuery(document).ready(function($) {
       //...
    });

   //Window Load Start
   window.addEventListener('load', function() {
       jQuery(document).ready(function($) {
          //...
       });
   });

अब, मेरे पास 2 "तैयार" फ़ंक्शन हैं, लेकिन यह कोई त्रुटि नहीं देता है और पृष्ठ बहुत अच्छी तरह से काम कर रहा है।

फिर भी, मुझे यह घोषित करना होगा कि उसने विंडोज 10 - ओपेरा v53 और एज v42 पर परीक्षण किया है लेकिन कोई अन्य ब्राउज़र नहीं है। इस बात का ध्यान रखें ...

नोट: jquery संस्करण 3.3.1 था और माइग्रेट संस्करण 3.0.0 था

— bafsar
स्रोत