2012-10-11 15 views
5

मैं एक सरल वेब पेज, अर्थात् है:किसी भिन्न डोमेन पर किसी पृष्ठ से वापस जाने पर फ़ायरफ़ॉक्स ईवेंट को फ़ायरफ़ॉक्स कैसे प्राप्त करें?

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>History hacks</title> 
<script> 
window.onpopstate = function (e) { 
    alert("location: " + document.location + ", state: " + JSON.stringify(e.state)); 
} 
window.onload = function (e) { 
    alert('page loaded'); 
} 
</script> 
</head> 
<body> 
<p> <a href="http://www.yahoo.com">Yahoo</a> <a href="#part1">Part 1</a></p> 
</body> 
</html> 

अब के बारे में कैसे Chrome और Firefox popstate घटना ट्रिगर (मुझे लगता है कि क्या मैं जब मैं चारों ओर करने के लिए मिल के खिलाफ हूँ कंपकंपी मतभेद के एक नंबर रहे हैं परीक्षण आईई), लेकिन जो मुझे यहां समस्याएं दे रहा है वह यह है कि क्रोम एक पॉपस्टेट ईवेंट ट्रिगर करेगा जब भी मैं उन दो लिंक में से किसी एक पर क्लिक करता हूं, और फिर जब मैं बैक बटन दबाता हूं। फ़ायरफ़ॉक्स उस लिंक के लिए ईवेंट ट्रिगर करेगा जो हैश भाग को बदलता है (केवल पहली बार हैश लिंक समान है), और यदि मैं याहू लिंक पर क्लिक करता हूं और फिर बैक बटन पर क्लिक करता हूं तो इसे ट्रिगर नहीं करेगा।

तो क्या कोई तरीका है कि मैं फ़ायरफ़ॉक्स में बता सकता हूं कि उपयोगकर्ता ने अभी वापस क्लिक किया है और एक अलग डोमेन पर पूरी तरह से अलग साइट से अपने पृष्ठ पर वापस उतर लिया है? क्या कोई और घटना है जो फ़ायरफ़ॉक्स में इस उद्देश्य के लिए काम करेगी? (जब मैं yahoo.com से वापस जाता हूं तो लोड इवेंट ट्रिगर नहीं होता है।)

उत्तर

1

यदि आप अपने पृष्ठ को दिखाए जाने पर दिखाए जाने पर भी सूचित किया जाना चाहते हैं तो भी आपको pageshow ईवेंट की तलाश करनी होगी पेज कैश में कैश किया गया।

ध्यान दें कि यदि कोई लोड ईवेंट नहीं है तो इसका अर्थ यह भी है कि पृष्ठ में अभी भी वही डोम और स्क्रिप्ट निष्पादन वातावरण है, जब इसे सेविगेट किया गया था। असल में ऐसा लगता है जैसे उपयोगकर्ता ने नेविगेट करने के विरोध में कुछ समय के लिए टैब स्विच किया था।

तो दिया गया है, क्या आप अभी भी उस स्थिति में कोई ईवेंट प्राप्त करना चाहते हैं? क्या आपको ऐसी घटनाएं मिलती हैं जब आप उस पृष्ठ पर अपने पृष्ठ के साथ टैब पर वापस स्विच करते हैं?

9

एक popstate घटना जब वापस (या आगे) बटन प्रारंभिक पृष्ठ लोड करने के लिए जाने के लिए प्रयोग किया जाता है पाने के लिए, का उपयोग replaceState()

window.onload = function(e) { 
    history.replaceState(null, null, document.URL); 
} 

तरह उपेक्षा करने के लिए प्रारंभिक popstate कि Chrome जेनरेट करता, जब पेज लोड जब भी आप pushState/replaceState पर कॉल करते हैं, तो आप राज्य को टैग कर सकते हैं, उदाहरण के लिए

history.pushState({myTag: true}, null, url); 

फिर अपने popstate हैंडलर बस के लिए myTag

window.onpopstate = function(e) { 
    if (!e.state.myTag) return; // none of my business 
    // code to handle popstate 
} 

फिल्टर आप एक छोटी सी पार ब्राउज़र समाधान के लिए इन दोनों को जोड़ सकते हैं:

window.onpopstate = function(e) { 
    if (!e.state.myTag) return; // none of my business 
    // code to handle popstate 
} 

window.onload = function(e) { 
    history.replaceState({myTag: true}, null, document.URL); 
} 

@Boris Zbarsky bfcache विस्तृत हो गया है। मैंने इस बारे में सोचा नहीं है कि मेरे दृष्टिकोण के साथ इसे कैसे जोड़ना है। मैं तो बस द्वारा adding a page unload handler

window.onunload = function(e) { } 
+0

यह बताया गया हो कि इतिहास एपीआई एक ही क्रॉस प्लेटफॉर्म काम करने के लिए के लिए एक महान जवाब ओपी के है, लेकिन यह वास्तव में उत्तर नहीं देता प्रश्न:। ** कैसे करता है, तो उपयोगकर्ता वास्तव में "वापस" पेज पर खत्म करने के लिए क्लिक बताने के लिए ** अपने उदाहरण का उपयोग करना, आप बता सकते हैं कि उपयोगकर्ता क्रोम और सफारी में वापस क्लिक किया क्योंकि mytag onpopstate हैंडलर में रिक्त नहीं हो जाएगा । फ़ायरफ़ॉक्स में हालांकि, onpopstate नहीं बुलाया जाता है तो वहाँ उपयोगकर्ता पृष्ठ पर या अगर यह एक पहली बार यात्रा है लौटा रहा है, तो यह निर्धारित करने के कोई रास्ता नहीं हो रहा है। तो क्या वास्तव में फ़ायरफ़ॉक्स में इसे अलग करने का कोई तरीका है? – Karmacon

+1

@ कर्म: यदि आप bfcache को अक्षम करते हैं (मेरे उत्तर का अंतिम भाग देखें) तो फ़ायरफ़ॉक्स को क्रोम के समान व्यवहार करना चाहिए। लेकिन यदि आप Chrome की व्यवहार करने के लिए Firefox के पेज कैश को प्राथमिकता देनी चाहिए का एक अच्छा उदाहरण के लिए पढ़ने के बोरिस Zbarsky का जवाब। –

+0

धन्यवाद @ सेन होगन। बाद फ़ायरफ़ॉक्स bfCaching पर एक फिर से पढ़ा है, मुझे एहसास हुआ कि यह अपनी साइट पर काम नहीं करता है, क्योंकि हम https का उपयोग। फ़ायरफ़ॉक्स हमेशा पृष्ठ को रीफ्रेश करता है। मुझे लगता है कि मैं इसके बारे में कुछ भी नहीं कर सकता। – Karmacon

0

उसे निष्क्रिय अनलोड करने से पहले मैं अपने पृष्ठ को फिर से लोड (प्रारंभिक स्थिति पाने के लिए) तो सेट नई href

window.onunload = function(e) { 
 
    location.reload(); 
 
    location.href = **new_url** ; 
 
}

मैं क्या करना है कि क्योंकि फ़ायरफ़ॉक्स की बचत होती है मेरे पृष्ठ की अंतिम स्थिति और इसे फिर से बनाने के बजाय इसे पुनर्स्थापित करती है।

0

मेरे पास एक ही सवाल था और यह पता लगाने के लिए कि किसी भी ब्राउज़र में पॉपस्टेट ईवेंट क्यों नहीं आग लगती है, जब विभिन्न डोमेन पर किसी पृष्ठ से वापस आने के लिए बैक बटन का उपयोग किया जाता है, तो यह पता लगाने के लिए spec में खोदना पड़ता था। यह पता चला है कि इस मामले में पॉपस्टेट को आग नहीं लगनी चाहिए क्योंकि दस्तावेज़ का राज्य बदल गया है और पॉपस्टेट केवल तभी आग लगाना चाहिए जब राज्य बदल गया हो। राज्य के लिए सच्चे spec पर सेट करने के लिए बदल दिया गया है:

निर्दिष्ट प्रविष्टि के दस्तावेज़ में नवीनतम प्रविष्टि होने पर स्थिति बदलनी चाहिए, और वह प्रविष्टि निर्दिष्ट प्रविष्टि नहीं है; अन्यथा यह झूठी होने दें।

मेरी समझ यह है कि जब हम अलग-अलग डोमेन में किसी पृष्ठ से हमारे पृष्ठ पर वापस आते हैं तो हमारे पृष्ठ में कोई नया प्रविष्टि नहीं है क्योंकि दस्तावेज़ बदल गया है और नए दस्तावेज़ में अभी तक कोई नवीनतम प्रविष्टि नहीं है। फिर से spec:

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

हालांकि वहां अभी भी देखने का कोई तरीका है अगर उपयोगकर्ता अपने पृष्ठ में history.state में एक ध्वज की स्थापना इतिहास के pushState या replaceState तरीकों का उपयोग कर और history.state में इस ध्वज के अस्तित्व को चेक करके अपनी पृष्ठ पर वापस आ गया है पेज लोड पर।

WHATWG के HTML में अधिक पढ़ने के लिए popstate घटना से निपटने हिस्सा विशिष्ट जानकारी: https://html.spec.whatwg.org/multipage/browsers.html#history-traversal

संबंधित मुद्दे