दिलचस्प पोस्ट
मैं PHP परियोजना में अप्रयुक्त फ़ंक्शन कैसे प्राप्त करूं? Google Play सेवाएं संस्करण कैसे जांचें? मैं कैसे जांच करूं कि क्या कोई अंतर दो संख्याओं के बीच है? ASP.NET MVC के लिए ग्रिड नियंत्रण? जावा पूर्णांक तुलना करें () – क्यों तुलना बनाम घटाव का उपयोग करें? स्विफ्ट – प्लास्ट पढ़ें क्या सी # में संग्रह की तुलना करने के लिए एक अंतर्निहित पद्धति है? त्रुटि: mksdcard SDK उपकरण चलाने में असमर्थ गिट में एक शाखा में बदलाव कैसे प्राप्त करें जावा कमांड प्रॉम्प्ट पर काम नहीं कर रहा है एक से अधिक EditText के लिए TextWatcher एक ब्राउज़र में extzs कोड का परीक्षण करने के लिए कोई सुझाव, अधिमानतः सेलेनियम के साथ? घातक त्रुटि: अधिकतम 30 सेकंड का निष्पादन समय पार हो गया वेब सर्वर पर फ़ाइल को डाउनलोड करने के लिए सेना – एएसपी .नेट सी # कैसे केन्द्रित स्ट्रेक प्रतिशत barchart लेबल

ब्राउज़र बैक बटन इवेंट का पता लगाने के लिए – क्रॉस ब्राउज़र

आप निश्चित रूप से कैसे पता लगा सकते हैं कि उपयोगकर्ता ने ब्राउज़र में वापस बटन दबाया है या नहीं?

आप #URL सिस्टम का उपयोग करते हुए किसी एकल पृष्ठ वेब अनुप्रयोग के अंदर इन-पेज बैक बटन के उपयोग को कैसे लागू करते हैं?

क्यों पृथ्वी पर ब्राउज़र वापस नहीं बटन अपने स्वयं के घटनाओं आग !?

वेब के समाधान से एकत्रित समाधान "ब्राउज़र बैक बटन इवेंट का पता लगाने के लिए – क्रॉस ब्राउज़र"

(नोट: शार्की की प्रतिक्रिया के अनुसार, मैंने बैकस्पेस का पता लगाने के लिए कोड शामिल किया है)

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

अधिकांश लोग इसका उपयोग करने की अनुशंसा करते हैं:

 window.onhashchange = function() { //blah blah blah } 

हालांकि, इस फ़ंक्शन को तब भी बुलाया जाएगा जब कोई उपयोगकर्ता इन-पेज तत्व का उपयोग करता है जो स्थान हैश बदलता है। जब आपके उपयोगकर्ता क्लिक नहीं करता है और पृष्ठ पीछे या आगे जाता है तो सबसे अच्छा उपयोगकर्ता अनुभव नहीं

आपको अपने सिस्टम की एक सामान्य रूपरेखा देने के लिए, मैं पिछले हैश के साथ एक सरणी भर रहा हूँ क्योंकि मेरे उपयोगकर्ता इंटरफ़ेस के माध्यम से आगे बढ़ता है I ऐसा कुछ दिखता है:

 function updateHistory(curr) { window.location.lasthash.push(window.location.hash); window.location.hash = curr; } 

बहुत सीधा। मैं क्रॉस-ब्राउज़र समर्थन सुनिश्चित करने के साथ-साथ पुराने ब्राउज़रों के लिए समर्थन भी करता हूं। बस फ़ंक्शन में नया हैश पास करें, और यह आपके लिए स्टोर करेगा और फिर हैश बदल देगा (जो तब ब्राउज़र के इतिहास में डाल दिया गया है)।

मैं एक इन-पेज बैक बटन का भी उपयोग करता हूं जो उपयोगकर्ता को lasthash सरणी का उपयोग कर पृष्ठों के बीच ले जाता है। यह इस तरह दिख रहा है:

 function goBack() { window.location.hash = window.location.lasthash[window.location.lasthash.length-1]; //blah blah blah window.location.lasthash.pop(); } 

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

इसलिए। मैं कैसे पता लगा सकता हूं कि उपयोगकर्ता ने मेरे इन-पेज बैक बटन या ब्राउज़र बटन का उपयोग किया है या नहीं?

सबसे पहले मैंने window.onbeforeunload पर देखा। बाद में, लेकिन कोई फायदा नहीं हुआ – यह केवल तभी बुलाया जाता है जब उपयोगकर्ता पृष्ठ बदलना चाहते हैं। यह हैश नेविगेशन का उपयोग करते हुए एक-पेज-ऐप्लिकेशन में नहीं होता है।

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

यह तब होता है जब मैंने document और window बीच अंतर को देखना शुरू कर दिया। मेरा अंतिम समाधान document.onmouseover का उपयोग करके ध्वज सेट करना था। ओनोमाउवरओवर, और document.onmouseleave का उपयोग करके इसे अक्षम document.onmouseleave

क्या होता है कि जब उपयोगकर्ता का माउस दस्तावेज़ क्षेत्र के अंदर होता है (पढ़ा जाता है: प्रदान किए गए पृष्ठ, लेकिन ब्राउज़र फ़्रेम को छोड़कर), मेरा बूलियन सही पर सेट है जैसे ही माउस दस्तावेज़ क्षेत्र को छोड़ देता है, बूलियन false झलकता है।

इस तरह, मैं अपनी window.onhashchange को बदल सकता हूं।

 window.onhashchange = function() { if (window.innerDocClick) { window.innerDocClick = false; } else { if (window.location.hash != '#undefined') { goBack(); } else { history.pushState("", document.title, window.location.pathname); location.reload(); } } } 

आप #undefined लिए चेक को नोट करेंगे इसका कारण यह है कि अगर मेरे ऐरे में कोई इतिहास उपलब्ध नहीं है, तो यह undefined रिटर्न देता है। मैं इसका उपयोग उपयोगकर्ता से पूछने के लिए करता हूं अगर वे window.onbeforeunload का उपयोग करना छोड़ना चाहते हैं।

इसलिए, संक्षेप में, और उन लोगों के लिए जो जरूरी एक इन-पेज बैक बटन या इतिहास को स्टोर करने के लिए एक सरणी का उपयोग नहीं कर रहे हैं:

 document.onmouseover = function() { //User's mouse is inside the page. window.innerDocClick = true; } document.onmouseleave = function() { //User's mouse has left the page. window.innerDocClick = false; } window.onhashchange = function() { if (window.innerDocClick) { //Your own in-page mechanism triggered the hash change } else { //Browser back button was clicked } } 

आखिर तुमने इसे हासिल कर ही लिया है। हैश नेविगेशन के संबंध में वापस पृष्ठ उपयोग बनाम इन-पेज तत्वों का पता लगाने के लिए एक सरल, तीन-भाग का तरीका

संपादित करें:

यह सुनिश्चित करने के लिए कि उपयोगकर्ता बैक ईवेंट को ट्रिगर करने के लिए बैकस्पेस का उपयोग नहीं करता है, तो आप निम्न में भी शामिल कर सकते हैं ( इस सवाल पर @thetoolman के लिए धन्यवाद):

 $(function(){ /* * this swallows backspace keys on any non-input element. * stops backspace -> back */ var rx = /INPUT|SELECT|TEXTAREA/i; $(document).bind("keydown keypress", function(e){ if( e.which == 8 ){ // 8 == backspace if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){ e.preventDefault(); } } }); }); 

आप popstate ईवेंट हैंडलर का प्रयास कर सकते हैं, जैसे:

 window.addEventListener('popstate', function(event) { // The popstate event is fired each time when the current history entry changes. var r = confirm("You pressed a Back button! Are you sure?!"); if (r == true) { // Call Back button programmatically as per user confirmation. history.back(); // Uncomment below line to redirect to the previous page instead. // window.location = document.referrer // Note: IE11 is not supporting this. } else { // Stay on the current page. history.pushState(null, null, window.location.pathname); } history.pushState(null, null, window.location.pathname); }, false); 

नोट: सर्वोत्तम परिणामों के लिए, आपको केवल विशिष्ट पृष्ठों पर इस कोड को लोड करना चाहिए, जहां आप किसी अन्य अप्रत्याशित समस्याओं से बचने के लिए तर्क को लागू करना चाहते हैं।

पॉपस्टेट इवेंट हर बार निकाल दिया जाता है जब वर्तमान इतिहास प्रविष्टि में बदलाव होता है (उपयोगकर्ता एक नए राज्य में जाने जाता है)। ऐसा तब होता है जब उपयोगकर्ता ब्राउज़र के बैक / फ़ॉरवर्ड बटन पर क्लिक करता है या जब history.back() , history.forward() , history.go() विधियों को प्रोग्रामेटिक रूप से बुलाया जाता है।

event.state घटना की संपत्ति इतिहास राज्य ऑब्जेक्ट के बराबर है

JQuery सिंटैक्स के लिए, इसे लपेटें (दस्तावेज़ तैयार होने के बाद भी श्रोता जोड़ने के लिए):

 (function($) { // Above code here. })(jQuery); 

यह भी देखें: पृष्ठ लोड पर विंडो


सिंगल पेज एप्लिकेशन और एचटीएमएल 5 पुशस्टेट पृष्ठ पर भी उदाहरण देखें:

 <script> // jQuery $(window).on('popstate', function (e) { var state = e.originalEvent.state; if (state !== null) { //load content with ajax } }); // Vanilla javascript window.addEventListener('popstate', function (e) { var state = e.state; if (state !== null) { //load content with ajax } }); </script> 

यह क्रोम 5+, फायरफॉक्स 4+, आईई 10 +, सफारी 6+, ओपेरा 11.5+ और समान के साथ संगत होना चाहिए।

यहाँ पर यह मेरा ले लिया है यह धारणा है, जब यूआरएल बदल जाता है, लेकिन document भीतर कोई क्लिक नहीं है, तो यह एक ब्राउज़र बैक (हाँ या आगे) है। Ajax के माध्यम से सामग्री को लोड करने वाले पृष्ठों पर यह काम करने के लिए एक उपयोगकर्ता क्लिक 2 सेकंड के बाद रीसेट हो जाता है:

 (function(window, $) { var anyClick, consoleLog, debug, delay; delay = function(sec, func) { return setTimeout(func, sec * 1000); }; debug = true; anyClick = false; consoleLog = function(type, message) { if (debug) { return console[type](message); } }; $(window.document).click(function() { anyClick = true; consoleLog("info", "clicked"); return delay(2, function() { consoleLog("info", "reset click state"); return anyClick = false; }); }); return window.addEventListener("popstate", function(e) { if (anyClick !== true) { consoleLog("info", "Back clicked"); return window.dataLayer.push({ event: 'analyticsEvent', eventCategory: 'test', eventAction: 'test' }); } }); })(window, jQuery); 

Document.mouseover IE और फ़ायरफ़ॉक्स के लिए काम नहीं करता है हालांकि मैंने यह कोशिश की है:

 $(document).ready(function () { setInterval(function () { var $sample = $("body"); if ($sample.is(":hover")) { window.innerDocClick = true; } else { window.innerDocClick = false; } }); }); window.onhashchange = function () { if (window.innerDocClick) { //Your own in-page mechanism triggered the hash change } else { //Browser back or forward button was pressed } }; 

यह क्रोम और आईई के लिए काम करता है और फ़ायरफ़ॉक्स नहीं है अभी भी फ़ायरफ़ॉक्स सही पाने के लिए काम कर रहा है ब्राउज़र बैक / फ़ॉरवर्ड बटन क्लिक का पता लगाने के लिए कोई आसान तरीका स्वागत है, विशेष रूप से JQuery में नहीं बल्कि AngularJS या सादे जावास्क्रिप्ट।

ब्राउज़र: https://jsfiddle.net/Limitlessisa/axt1Lqoz/

मोबाइल नियंत्रण के लिए: https://jsfiddle.net/Limitlessisa/axt1Lqoz/show/

 $(document).ready(function() { $('body').on('click touch', '#share', function(e) { $('.share').fadeIn(); }); }); // geri butonunu yakalama window.onhashchange = function(e) { var oldURL = e.oldURL.split('#')[1]; var newURL = e.newURL.split('#')[1]; if (oldURL == 'share') { $('.share').fadeOut(); e.preventDefault(); return false; } //console.log('old:'+oldURL+' new:'+newURL); } 
 .share{position:fixed; display:none; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); color:white; padding:20px; 
 <!DOCTYPE html> <html> <head> <title>Back Button Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body style="text-align:center; padding:0;"> <a href="#share" id="share">Share</a> <div class="share" style=""> <h1>Test Page</h1> <p> Back button press please for control.</p> </div> </body> </html> 

मैं इस आवश्यकता के साथ काफी समय तक संघर्ष कर रहा था और इसे लागू करने के लिए ऊपर दिए गए कुछ समाधान ले लिया था। हालांकि, मैं एक अवलोकन पर ठोकर खाई और ऐसा लगता है कि क्रोम, फ़ायरफ़ॉक्स और सफ़ारी ब्राउज़रों + एंड्रॉइड और आईफ़ोन पर काम करते हैं

पेज लोड पर:

 window.history.pushState({page: 1}, "", ""); window.onpopstate = function(event) { // "event" object seems to contain value only when the back button is clicked // and if the pop state event fires due to clicks on a button // or a link it comes up as "undefined" if(event){ // Code to handle back button or prevent from navigation } else{ // Continue user action through link or button } } 

मुझे बताएं क्या इससे मदद मिलती है। अगर कुछ याद आ रही है, तो मुझे समझने में खुशी होगी।

मैंने उपरोक्त विकल्पों की कोशिश की लेकिन उनमें से कोई भी मेरे लिए काम नहीं कर रहा है यहाँ समाधान है

 if(window.event) { if(window.event.clientX < 40 && window.event.clientY < 0) { alert("Browser back button is clicked..."); } else { alert("Browser refresh button is clicked..."); } } 

अधिक जानकारी के लिए इस लिंक को देखें http://www.codeproject.com/Articles/696526/Solution-to-Browser-Backton-Click-Event-Handli