वेब पेज पर बैक बटन कैसे बनाये। "वापस जाओ" बटन बनाएं एक अधिक सार्वभौमिक तरीका

इस लेख में हम देखेंगे कि आप अपनी आवश्यकतानुसार किसी भी स्थान पर "वापस जाएँ" बटन कैसे बना सकते हैं। मुझे लगता है कि बटन के नाम से यह पहले से ही स्पष्ट है कि जब आप उस पर क्लिक करेंगे तो क्या होगा। इस तरह के बटन को किसी श्रेणी और सामग्री दोनों में ही डाला जा सकता है। सब कुछ काफी सरलता से किया जाता है.

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

हमारे पास क्या विकल्प हैं:

तीसरे विकल्प का लाभ यह है कि यदि आपको किसी बटन पर टेक्स्ट को संपादित करने या स्टाइल क्लास को बदलने/जोड़ने की आवश्यकता है, तो आपको केवल मॉड्यूल को ही ठीक करने की आवश्यकता होगी, और बटन को उन सभी स्थानों पर ठीक करने की आवश्यकता नहीं होगी जहां यह स्थित है।

इसलिए, अपनी एक साइट पर मैंने तीसरे विकल्प का उपयोग किया:

"HTML कोड" मॉड्यूल बनाया गया था और "सोर्सरर" एक्सटेंशन का उपयोग करके बटन कोड वहां डाला गया था, जिससे सामग्री में कोई भी कोड जोड़ना संभव हो जाता है।

मेरा कार्यशील बटन कोड:

वापस आओ

बूटस्ट्रैप 3 के घटकों का उपयोग करके पाठ को एक तीर से थोड़ा सजाया गया है, और बटन को सीएसएस के माध्यम से स्टाइल किया गया है।

कभी-कभी वेब पेजों पर अस्थायी रूप से किसी अन्य (चलिए इसे सहायक कहते हैं) पेज पर जाना और फिर वापस लौटकर उसके साथ काम करना जारी रखना आवश्यक हो जाता है। उदाहरण के लिए, यह एक सहायता पृष्ठ, पंजीकरण पृष्ठ हो सकता है।

इस मामले में, जाहिर है, रिटर्न पता बहुत भिन्न हो सकता है। किसी वेबसाइट पर इस तरह का रिवर्स ट्रांज़िशन कैसे लागू करें? यहां शुद्ध HTML/CSS पर्याप्त नहीं है; आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी।

सबसे सरल बात, उदाहरण के लिए, सहायक पृष्ठ पर स्क्रिप्ट में इस पंक्ति का उपयोग करना है:

इतिहास विधि किसी पृष्ठ पर नेविगेशन के इतिहास को याद रखती है और वास्तव में, इसका उपयोग ब्राउज़र के फॉरवर्ड और बैक बटन के उपयोग के समान है, केवल थोड़ा अधिक कार्यात्मक है। यह सबसे सरल और है सुविधाजनक तरीका, लेकिन केवल एक शर्त के तहत: यदि नया (सहायक) पृष्ठ नई विंडो में नहीं खोला गया है। अन्यथा, सहायक पृष्ठ पहली बार खोला जाएगा (अधिक सटीक रूप से, यह इसके लिए पहला सत्र होगा, इस पर अभी तक कोई बदलाव नहीं हुआ है)। और इसका मतलब यह है कि, वास्तव में, वापस जाने के लिए कहीं नहीं है। इसीलिए यह विधिसार्वभौमिक नहीं कहा जा सकता. यह काम नहीं करेगा यदि उपयोगकर्ता को पृष्ठ को एक नए टैब में खोलने के लिए मजबूर किया जाता है या ब्राउज़र उसके लिए ऐसा करता है - सेटिंग्स के अनुसार। इस मामले में, लिंक विशेषता target='_self' मदद नहीं करेगी: एक खुले सहायक पृष्ठ से वापस जाना असंभव होगा (जब तक कि, निश्चित रूप से, आप ब्राउज़र एड्रेस बार में मैन्युअल रूप से स्रोत पृष्ठ का यूआरएल दर्ज नहीं करते हैं)।

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

योजनाबद्ध रूप से, इसे इस प्रकार दर्शाया जा सकता है:

जिस पृष्ठ पर परिवर्तन किया जाना चाहिए, उस पर निम्नलिखित स्क्रिप्ट है, जो एक फ़ंक्शन है - एक माउस क्लिक हैंडलर (ऑनक्लिक):

फ़ंक्शन save_back(url) (

var docum_href = document.location.toString().substring(docum_protocol.length+2);
if(docum_href.substring(0,1) == "/") (
docum_href = docum_href.substring(1);
}
var href = window.location.protocol+"//"+document.location.hostname + url + "?"+docum_href;
window.open(href);
}

स्क्रिप्ट में फ़ंक्शन को काम करने के लिए, आपको इसके हैंडलर को किसी एक तरीके से किसी तत्व पर स्थापित करना होगा, उदाहरण के लिए, इस तरह:

सहायता पृष्ठ पर जाने के लिए क्लिक करें

ध्यान दें कि इस लिंक की href विशेषता का एक संबंधित पता है, जो ऑनक्लिक इवेंट हैंडलर फ़ंक्शन में निर्दिष्ट है। ऐसा इसलिए किया जाता है ताकि सर्च रोबोट समझ सकें कि जब आप लिंक पर क्लिक करेंगे तो वे किस पेज पर जाएंगे। यदि इसकी आवश्यकता नहीं है, तो आपको एक खाली href विशेषता बनानी चाहिए, जैसे

इस स्क्रिप्ट का सिद्धांत यह है कि जब save_back(url) फ़ंक्शन को कॉल किया जाता है, तो url पते वाला एक (सहायक) पृष्ठ खुल जाता है। ऐसा करने के लिए, पेज का प्रोटोकॉल (उदाहरण के लिए, http या https) निर्धारित किया जाता है, साथ ही मूल वेब पेज के बाकी यूआरएल को भी निर्धारित किया जाता है, जिसमें संभवतः कोई GET अनुरोध डेटा भी शामिल होता है (यूआरएल के बाद यही होता है) "?" संकेत)। प्राप्त डेटा को खोले जा रहे पृष्ठ के यूआरएल में जोड़ा जाता है - और इसमें एक संक्रमण होता है।

इसकी एक स्क्रिप्ट इस प्रकार होनी चाहिए:

var docum_protocol = document.location.protocol;
var number_questions = docum_location.length-1;

वर प्रश्न = "";
यदि(संख्या_प्रश्न > 1)(
प्रश्न = "?";
}
दस्तावेज़.स्थान = docum_protocol+"//"+ docum_href + प्रश्न + प्राप्त करें;
}

यह स्क्रिप्ट तब भी लॉन्च होगी जब माउस किसी तत्व पर क्लिक करता है जिस पर संबंधित हैंडलर स्थापित है:

वापस करना

जब माउस किसी लिंक पर क्लिक करता है तो यह लाइन डिफ़ॉल्ट क्रिया को रद्द कर देती है। तथ्य यह है कि डिफ़ॉल्ट रूप से लिंक का अनुसरण किया जाता है। इस स्थिति में, संक्रमण बिल्कुल href विशेषता में निर्दिष्ट पते पर होगा। इस पते (विशेष रूप से, एक सहायक पृष्ठ पर) में उस पृष्ठ का रिटर्न पता शामिल नहीं हो सकता है जहां से संक्रमण किया गया था (यदि सहायक पृष्ठ पर संक्रमण किसी एक विशिष्ट पृष्ठ से नहीं, बल्कि कई स्रोत पृष्ठों से संभव है)।

तो, सहायक पृष्ठ पर स्क्रिप्ट पता बार की सामग्री को पढ़ती है और फिर इसे "?" तत्वों की एक सरणी में विभाजित करती है। कृपया ध्यान दें कि एक यूआरएल में ऐसे दो अक्षर हो सकते हैं। पहला दिखाई देगा, जैसा कि पहले ही उल्लेख किया गया है, इस तथ्य के कारण कि स्रोत पृष्ठ का पता (प्रोटोकॉल घटाकर) सहायक पृष्ठ के पते में जोड़ा गया है। और दूसरा स्रोत पृष्ठ लोड करते समय GET अनुरोध पैरामीटर की उपस्थिति के परिणामस्वरूप मौजूद हो सकता है। दूसरे शब्दों में, सहायता पृष्ठ के पता बार में एक या दो प्रश्न चिह्न हो सकते हैं। जब आप किसी लिंक पर क्लिक करते हैं तो द्वितीयक पृष्ठ से मूल पृष्ठ पर जाने के लिए

वापस करना

अनुरोध को पता बार से पढ़ा जाता है और उसी रूप में परिवर्तित किया जाता है जो मूल पृष्ठ पर था, जिसके बाद पृष्ठ को इस पते पर लोड किया जाता है।

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

तो, आइए कार्य निर्धारित करें:

यदि सहायक पृष्ठ उसी टैब (विंडो) में खुलता है, तो हिस्ट्री.बैक() विधि उपलब्ध होने दें;

लेकिन यदि सहायक पृष्ठ एक नई विंडो में खुलता है, तो ऊपर चर्चा की गई विधि काम करनी चाहिए (क्योंकि इस मामले में इतिहास.बैक() काम नहीं करेगा)।

सहायक पृष्ठ पर स्क्रिप्ट थोड़ी बदल जाएगी (ऊपर उल्लिखित पंक्ति जोड़ दी जाएगी):

फ़ंक्शन रिटर्न_टू_इनिशियल_पेज() (
इतिहास.वापस();
var docum_location = document.location.toString().split("?");
var docum_href = docum_location;
var docum_protocol = document.location.protocol;
var number_questions = docum_location.length - 1;
वर प्राप्त = दस्तावेज़_स्थान;
वर प्रश्न = "";
यदि (संख्या_प्रश्न > 1) (
प्रश्न = "?";
}
दस्तावेज़.स्थान = दस्तावेज़_प्रोटोकॉल + "//" + दस्तावेज़_href + प्रश्न + प्राप्त करें;
}

पहले हम वापस जाने की कोशिश करते हैं. यदि यह काम करता है, तो बाकी स्क्रिप्ट काम नहीं करेगी और आप मूल पृष्ठ पर उसी स्थान पर लौट आएंगे जहां से संक्रमण किया गया था। यदि नहीं, तो, पहले की तरह, हम GET अनुरोध के मापदंडों से स्रोत पृष्ठ का पता निकालते हैं और उस पर जाते हैं।

बेशक, यह आलेख मूल पृष्ठ पर "वापसी" के लिए तकनीकी विकल्पों में से केवल एक को दिखाता है। इस प्रयोजन के लिए, GET अनुरोध के अलावा, अन्य तकनीकों का उपयोग किया जा सकता है, उदाहरण के लिए स्थानीय भंडारण लोकलस्टोरेज। इसके अलावा, रिटर्न बैक को पूरी तरह से अनुकरण करने के लिए, मूल पृष्ठ की स्क्रॉलिंग मात्रा को GET अनुरोध के माध्यम से प्रसारित करना अच्छा होगा - ताकि बाद में, एक नई विंडो में सहायक पृष्ठ खोलने पर भी, आप उसी स्थान पर वापस लौट सकें मूल पृष्ठ पर जहां से परिवर्तन पहले किया गया था।

शुभ दोपहर, मेरे पास एक प्रश्न है कि ऑर्डर देते समय बटन को कैसे पीछे ले जाएं और इसे अगले बटन के बगल में कैसे रखें। अब यह मेरे लिए इस तरह दिखता है। यदि आप इसे स्थानांतरित करते हैं नीचे, यह काम करना बंद कर देता है।

एक समाधान है

नमस्कार, क्या कोई मुझे बता सकता है कि बैक बटन कैसे बनाया जाए, उदाहरण के लिए, शॉपिंग कार्ट में, ताकि कोई व्यक्ति पिछले पृष्ठ पर वापस जा सके?

टेम्पलेट में आप जहां चाहें वहां एक बटन डालें, उदाहरण के लिए, यह

+1

जब मैं ब्राउज़र पर बैक बटन दबाता हूं, तो पेज को रीफ्रेश करने तक सभी शैलियाँ गायब हो जाती हैं। डिफ़ॉल्ट थीम नीचे स्क्रीनशॉट में दिखाई देनी चाहिए) मुझे बताएं कि समस्या क्या है

नमस्ते, मैंने कार्ट में एक "वापस जाओ" बटन बनाया है, यहां तक ​​कि एक बटन भी नहीं, बल्कि बस वापस जाओ कोड वाला एक लिंक बनाया हैअब जब गाड़ी पर वापस लौट रहे हैं...

एक समाधान है

शुभ दोपहर! मुझे निम्नलिखित समस्या का सामना करना पड़ा: जब आप अपने कार्ट में कोई आइटम जोड़ते हैं और ब्राउज़र में "बैक" बटन पर क्लिक करते हैं, तो कार्ट में आइटम के बारे में जानकारी (अतिरिक्त ब्लॉक में) तब तक सहेजी नहीं जाती जब तक आप पेज को रीफ्रेश नहीं करते। वे। साइट पर जाएँ, जाएँ...

आपके द्वारा इंगित की गई साइट कार्ट के लिए एक प्लगइन का उपयोग करती है। संशोधनों के साथ एक विकल्प के रूप में, आप सामान जोड़ने को?html=1 पर नहीं, बल्कि?html=1&items=1; पर भेजने का उपयोग कर सकते हैं गाड़ी.

शुभ दोपहर। चेकआउट के दौरान प्रत्येक चरण पर, एक "अगला" बटन दर्शाया गया है। "सुप्राइम" विषय में, मुझे बटन कोड मिला: