(नोट: शार्की की प्रतिक्रिया के अनुसार, मैंने बैकस्पेस का पता लगाने के लिए कोड शामिल किया है)
इसलिए, मैंने एसओ पर इन सवालों को अक्सर देखा है, और हाल ही में बैक बटन कार्यक्षमता को नियंत्रित करने के मुद्दे पर चला है। अपने आवेदन के लिए सबसे अच्छा समाधान खोजने के कुछ दिनों के बाद (हैश नेविगेशन के साथ सिंगल-पेज), मैं बैक बटन का पता लगाने के लिए एक सरल, क्रॉस-ब्राउज़र, लाइब्रेरी-कम प्रणाली के साथ आया हूं।
ज्यादातर लोग उपयोग करने की सलाह देते हैं:
window.onhashchange = function() {
//blah blah blah
}
हालांकि, यह फ़ंक्शन तब भी कहा जाएगा जब कोई उपयोगकर्ता इन-पेज तत्व का उपयोग करता है जो स्थान हैश को बदलता है। जब आपका उपयोगकर्ता क्लिक करता है और पृष्ठ पीछे या आगे की ओर जाता है, तो सबसे अच्छा उपयोगकर्ता अनुभव नहीं।
आपको मेरी प्रणाली की एक सामान्य रूपरेखा देने के लिए, मैं पिछले हैश के साथ एक सरणी को भर रहा हूं क्योंकि मेरा उपयोगकर्ता इंटरफ़ेस के माध्यम से चलता है। यह कुछ इस तरह दिखता है:
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हमेशा क्लिक में नहीं बुलाया गया था, और इसे एक ऑन्क्लिक में जोड़ने से यह कभी भी पर्याप्त तेजी से ट्रिगर नहीं होगा।
यह तब है जब मैंने बीच का अंतर देखना शुरू किया document, और window। मेरा अंतिम समाधान ध्वज का उपयोग करके सेट करना था document.onmouseover, और इसका उपयोग करके अक्षम करना था document.onmouseleave।
क्या होता है कि जब उपयोगकर्ता का माउस दस्तावेज़ क्षेत्र के अंदर होता है (पढ़ें: प्रस्तुत किया गया पृष्ठ, लेकिन ब्राउज़र फ्रेम को छोड़कर), मेरा बूलियन पर सेट है true। जैसे ही माउस दस्तावेज़ क्षेत्र छोड़ता है, बूलियन फ़्लिप हो जाता है 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();
}
}
});
});