जब फेसबुक पृष्ठों के माध्यम से ब्राउज़ शीर्षक और निश्चित पाद लेख अनुभाग पृष्ठ लोड है और उसके अनुसार पता बार परिवर्तन में URL के बीच दृश्यमान रहती हैं। कम से कम, कि भ्रम मैं मिलता है।
फेसबुक कि कैसे प्राप्त करता है तकनीकी रूप से बोल रहा?
कैसे फेसबुक शीर्ष लेख और पाद तय करते हुए एक अलग पेज लोड हो रहा है रखता है?
वोट
15
5 जवाब
वोट 3
3
एक तरह से शीर्षलेख और पादलेख कि अपरिवर्तनीय दिखाई प्रदान करने के लिए सीएसएस के माध्यम से है - यहाँ एक निश्चित पाद लेख का एक उदाहरण ( "स्थिति: तय," नोटिस) है:
#Footer {
font-size:xx-small;
text-align:left;
width:100%;
bottom:0px;
position:fixed;
left:0px;
background-color: #CCCCCC;
border-top: 1px solid #999999;
padding:4px;
padding-right:20px;
color:#666666;
}
आप (उन है कि पेज के मुख्य भाग को भरने) निश्चित पाद लेख के लिए कमरे (एक हेडर का उपयोग कर मार्जिन टॉप के साथ एक ही) छोड़ने के लिए सुनिश्चित करें कि आप अपने पृष्ठ divs करने के लिए कुछ margin-bottom जोड़ने बनाने के लिए चाहता हूँ।
यह करता है नहीं वास्तव में, पृष्ठ पर रहने बल्कि इसलिए स्थिति इतनी तंग और अपरिवर्तनीय है जैसे कि वह जब तक आपके पृष्ठ लोड बहुत लंबा ले करता है यह दिखाई देगा। मैं अगर यह क्या फेसबुक करता है पता नहीं है, लेकिन यह आप के लिए बहुत ही प्रभाव दे देंगे।
वोट 0
0
ठीक है, जिस तरह से पूरा करने के लिए ऐसी बात AJAX के माध्यम से होगा, लेकिन जहाँ तक मैं देख सकते हैं, इस तथ्य ऐसा नहीं करती है में फेसबुक ... मैं सिर्फ जाँच की, और यह सबसे अधिक साइटों की तरह हैडर ताज़ा करता है ...
संपादित करें: जब मैं पहली बार इस उत्तर दिया, मैं गूगल क्रोम के साथ फेसबुक (2.0) है, जो किसी भी कारण से, वास्तव में यह इस तरह से काम नहीं करता देख रहा था -> जब मैं मुखपृष्ठ से मेरा प्रोफ़ाइल पर क्लिक करें, यह मुझे इस देता है पता बार में: http://www.facebook.com/profile.php?id=1304250071&ref=profile
और इसलिए पूरे पृष्ठ ताज़ा करता है ... अजीब
वोट 38
38
हालांकि मुझे नहीं लगता कि है कि आप यहां क्या पूछ रहे हैं करते हैं, यह कैसे शैली के लिए मार्क Brittingham के जवाब का संदर्भ लें। मैं तुम्हें यह कैसे काम करता है (और क्यों यह काफी शानदार है) के लिए तकनीकी विवरणों दे देंगे।
स्थिति पट्टी पर एक नज़र डालें जब आप शीर्ष लेख में प्रोफाइल लिंक पर जाएँ ...
http://www.facebook.com/profile.php?id=514287820&ref=profile
यही कारण है कि जहां कि <a> टैग की ओर इशारा कर रहा है। अब पता पट्टी पर देखने के लिए जब आप इसे क्लिक करें ...
http://www.facebook.com/home.php#/profile.php?id=514287820&ref=profile
सूचना "#" टुकड़ा पहचानकर्ता / हैश ? यह मूल रूप से साबित होता है कि आप पृष्ठ नहीं छोड़ा है और पिछले अनुरोध AJAX के साथ बनाया गया था। वे इन लिंक पर क्लिक ईवेंट में अवरोध उत्पन्न कर, और अपने स्वयं के कुछ के साथ डिफ़ॉल्ट कार्यक्षमता अधिभावी कर रहे हैं।
इस जावास्क्रिप्ट के साथ ऐसा करने के लिए, तुम सब करने की है, तो जैसे उन लिंक्स के लिए क्लिक करें ईवेंट हैंडलर आवंटित है ...
var header = document.getElementById('header');
var headerLinks = header.getElementsByTagName('a');
for(var i = 0, l = headerLinks.length; i < l; i++) {
headerLinks[i].onclick = function() {
var href = this.href;
//Load the AJAX page (this is a whole other topic)
loadPage(href);
//Update the address bar to make it look like you were redirected
location.hash = '#' + href;
//Unfocus the link to make it look like you were redirected
this.blur();
//Prevent the natural HTTP redirect
return false;
}
}
इस दृष्टिकोण के लिए एक शानदार लाभ यह है कि यह, जो परंपरागत रूप से पुरानी AJAX के उपयोग के एक दर्दनाक पक्ष प्रभाव रहा है (एक छोटे से जोड़ा प्रवंचना के साथ) वापस बटन कार्यक्षम होने के लिए अनुमति देता है। मैं 100% क्या यह प्रवंचना है के बारे में सुनिश्चित नहीं हूँ, लेकिन मुझे यकीन है कि यह किसी भी तरह जब ब्राउज़र टुकड़ा पहचानकर्ता को संशोधित करता है पता लगाने में सक्षम है (संभवतः यह जाँच हर ~ 500 मिलीसेकेंड से)।
एक तरफ ध्यान दें, एक मूल्य के डोम (तत्व आईडी के माध्यम से) के भीतर नहीं पाया जा सकता है कि करने के लिए हैश को बदलने के रूप में पेज शीर्ष करने के लिए सभी तरह से स्क्रॉल करेगा। आप फेसबुक के ऊपर से के बारे में 10 पिक्सल नीचे स्क्रॉल, शीर्ष मेनू के आधे उजागर: मैं किस बारे में बात कर रहा हूँ देखने के लिए। वस्तुओं में से एक पर क्लिक करें, यह जैसे ही टुकड़ा पहचानकर्ता अद्यतन हो जाता है वापस कूद जाएगा पेज के शीर्ष करने के लिए (बिना किसी भी खिड़की रीपेंट / देरी पुनः बनाने)।
वोट 0
0
सीएसएस पूर्ण / निश्चित स्थिति के साथ, div शीर्षलेख और पादलेख युक्त टैग HTML में कहीं भी हो सकता है। शीर्ष पर की तरह!
सबसे मौजूदा ब्राउज़र पर एक देरी प्रस्तुत करना, फायरफॉक्स मुझे विश्वास है, ताकि पेज त्वरित चमक में आंशिक रूप से प्रदान की गई सामग्री प्रदर्शित नहीं करेंगे और बहुत समय बर्बाद ड्राइंग के रूप में नेटवर्क डाटा में आता है के लिए एक चौथाई दूसरा नहीं है।
तो क्या हो सकता है कि नया पृष्ठ जल्दी से शैलियों और शीर्ष लेख और पाद युक्त HTML देता है। यह सामग्री ब्राउज़र द्वारा तुरंत प्रदान की जा सकती है, इसलिए जब यह अगले पृष्ठ प्रदर्शित करता है, ऐसा लगता है जैसे कि उन को नहीं बदला।
पेज गतिशील सामग्री पैदा कर रहा है, तो एक अच्छा चाल शीर्ष, आउटपुट और डेटा बफर फ्लश बिल्कुल स्थिर जानकारी डाल करने के लिए है। तब गतिशील डेटाबेस प्रश्नों और इस तरह से करते हैं।
वोट 0
0
बढ़ाने के लिए जोश Stodola के जवाब: मेरी समझ में YUI बुकमार्क प्रबंधक वास्तव में यह काम करता है।