HTML back link कैसे बनाये?


286

एक <a>टैग बनाने का सबसे सरल तरीका क्या है जो पिछले वेब पेज से लिंक करता है? मूल रूप से एक नकली बैक बटन है, लेकिन एक वास्तविक हाइपरलिंक है। केवल क्लाइंट-साइड प्रौद्योगिकियाँ, कृपया।


उन समाधानों की तलाश करें जिन्हें उस पृष्ठ के URL को दिखाने का लाभ है जिस पर आप क्लिक करते हैं, जब एक सामान्य, स्थिर हाइपरलिंक की तरह होवर करते हैं। मैं नहीं बल्कि history.go(-1)एक हाइपरलिंक पर मँडरा जब उपयोगकर्ता को देखना होगा। मैंने अब तक पाया सबसे अच्छा है:

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

है document.referrerविश्वसनीय? क्रॉस-ब्राउज़र सुरक्षित? मुझे बेहतर उत्तर स्वीकार करके खुशी होगी।


2
जावास्क्रिप्ट एक क्लाइंट-साइड तकनीक है, कुछ क्लाइंट (मेरे जैसे) इसे अक्षम करने के लिए चुनते हैं (डिफ़ॉल्ट रूप से)। यही क्लाइंट की ताकत है! : D लेकिन हाँ, एचटीएमएल के लिए कोई तरीका नहीं है कि वह स्वयं निर्धारित करे कि पिछला पृष्ठ क्या था।
animuson

जवाबों:


514

और दूसरा तरीका:

<a href="javascript:history.back()">Go Back</a>


9
और एक बटन के लिए:<button type="button" onclick="javascript:history.back()">Back</button>
सिंह

1
इस दृष्टिकोण का एक नकारात्मक पहलू यह है कि मानक ब्राउज़र में "URL देखने के लिए हॉवर" और राइट क्लिक -> कॉपी लिंक टूट जाएगा।
विवेक महाराज

मुझे लगता है कि यह शब्दार्थ के बारे में अधिक है। एक गो बैक "बटन" एक गो बैक "लिंक" से अधिक उपयुक्त है। दोनों विकल्प महान हैं और दोनों विकल्प अपने तरीके से सही हैं।
जसप्रीत सिंह

111

इस समाधान में लिंक किए गए पृष्ठ के URL को होवर पर दिखाने का लाभ है, क्योंकि अधिकांश ब्राउज़र डिफ़ॉल्ट रूप से history.go(-1)या इसके बजाय करते हैं :

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

9
इस मामले को कवर करने का यह भी लाभ है कि संदर्भ पृष्ठ target="_blank"लिंक पर एक विशेषता के साथ खोला गया , जो history.go(-1)नहीं करता है।
क्रिस क्रायो

4
यह समाधान #, 'जावास्क्रिप्ट: history.back ()' सही ढंग से काम करता है, # के बाद लिंक भाग खो देता है।
लिवियू

16
इस समाधान के लिए नकारात्मक पक्ष यह है कि आप एक से अधिक पृष्ठ वापस नहीं जा पाएंगे। उदाहरण; पृष्ठ a, b, c, d- पर वापस जाएं बटन को बार-बार c, d, c, d, c, d दबाएं। इसकी तुलना .history.back () a, b, c, d प्रेस बैक बटन पर बार-बार d, c, b, a
atreeon

मैं इसे कैसे बना सकता हूं ताकि यदि कोई पृष्ठ वापस न हो, तो एक निश्चित url पर पुनर्निर्देशित करेंhistory.back() || "myaction/mycontroller"
घोंसला

@orangesherbert मैंने इसे एक नए उत्तर में संबोधित किया है (जो "शो URL" की आवश्यकता को पूरा करता है।
विवेक महाराज


41

आप जावास्क्रिप्ट की कोशिश कर सकते हैं

<A HREF="javascript:history.go(-1)">

जावास्क्रिप्ट बैक बटन देखें

संपादित करें

को प्रदर्शित करने के लिए url के संदर्भ http://www.javascriptkit.com/javatutors/crossmenu2.shtml

और तत्व का पालन के रूप में एक ही onmouseover में भेजें

function showtext(thetext) {
  if (!document.getElementById)
    return
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : ""
  instantset(baseopacity)
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)
}
 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

jsfiddle की जाँच करें


क्या आप समझा सकते हैं कि अंतिम संपादन? मैं सिर्फ एक सामान्य लिंक चाहता हूं जैसे यह अधिकांश ब्राउज़रों के तल में दिखाई देता है।
१६:१२

जैसा कि सभी ब्राउज़र सभी के लिए दिखाते हैं कि आपको कुछ भी करने की ज़रूरत नहीं है, लेकिन अगर आप इसे अपनी खुद की डिव में दिखाना चाहते हैं, तो आप tabledescriptionएंकर टैग के माउस पर लिंक दिखाने के लिए पेज में कहीं भी एक डिव को निर्दिष्ट कर सकते हैं
हेमंत मेटलिया

40

यह समाधान आपको दोनों दुनिया का सर्वश्रेष्ठ देता है

  • उपयोगकर्ता URL देखने के लिए लिंक पर होवर करते हैं
  • उपयोगकर्ता दूषित बैक-स्टैक के साथ समाप्त नहीं होते हैं

नीचे दिए गए कोड टिप्पणियों में अधिक जानकारी।

var element = document.getElementById('back-link');

// Provide a standard href to facilitate standard browser features such as 
//  - Hover to see link
//  - Right click and copy link
//  - Right click and open in new tab
element.setAttribute('href', document.referrer);

// We can't let the browser use the above href for navigation. If it does, 
// the browser will think that it is a regular link, and place the current 
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() {
  history.back();
  return false;
}
<a id="back-link">back</a>


बहुत बढ़िया जवाब। मैं इसे कस्टम बाइंडिंग के संदर्भ में अपनी लगभग सभी नॉकआउट परियोजनाओं में उपयोग करता हूं।
pimbrouwers

बहुत बढ़िया जवाब! मुझे return false;क्रोम में ऑनक्लिक फ़ंक्शन को ब्राउज़र इतिहास में वर्तमान पृष्ठ को जोड़ने से रखने के लिए जोड़ना था।
मार्शल मॉरिस

25

एंकर टैग का उपयोग करके पिछले पृष्ठ पर वापस जाने के लिए <a>नीचे दिए गए 2 कार्यकारी तरीके हैं और उनमें से बाहर 1 एक है तेजी से और एक बड़ा फायदा पिछले पृष्ठ पर वापस जा रहा है।

मैंने दोनों तरीकों की कोशिश की है।

1)

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

यदि आप एक लिंक पर क्लिक कर चुके हैं और वर्तमान ब्राउज़र विंडो में एक नया टैब में लिंक खोला है, तो उपरोक्त विधि (1) बढ़िया काम करती है।

2)

<a href="javascript:history.back()">Go Back</a>

उपरोक्त विधि (2) केवल तभी काम करती है जब आपने किसी लिंक पर क्लिक किया हो और वर्तमान ब्राउज़र विंडो में करंट टैब में लिंक खोला हो

यदि आपके पास नया टैब में लिंक खुला है तो यह काम नहीं करेगा। history.back()यदि वेब ब्राउज़र के न्यू टैब में लिंक खोला गया है तो यहां काम नहीं करेगा।


18

एक बैक लिंक एक लिंक है जो ब्राउज़र को एक पृष्ठ पर पीछे ले जाता है, जैसे कि उपयोगकर्ता ने अधिकांश ब्राउज़रों में उपलब्ध बैक बटन पर क्लिक किया था। वापस लिंक जावास्क्रिप्ट का उपयोग करें। यदि आपका ब्राउज़र जावास्क्रिप्ट का समर्थन करता है (जो यह करता है) और यदि यह window.historyऑब्जेक्ट का समर्थन करता है, तो यह ब्राउज़र को एक पृष्ठ पर वापस ले जाता है , जो बैक लिंक के लिए आवश्यक है।

सरल तरीके हैं

<a href="#" onClick="history.go(-1)">Go Back</a>

या:

function goBack() {
  window.history.back()
}
<a href="#" onclick="goBack()" />Go Back</a>

आम तौर पर बैक लिंक बोलना आवश्यक नहीं है ... बैक बटन आमतौर पर काफी अच्छी तरह से पर्याप्त होता है, और आमतौर पर आप अपनी साइट के पिछले पृष्ठ से भी लिंक कर सकते हैं। हालाँकि, कभी-कभी आप कई "पिछले" पन्नों में से एक को लिंक प्रदान करना चाह सकते हैं, और यहीं पर एक बैक लिंक काम आता है। यदि आप अधिक उन्नत तरीके से करना चाहते हैं तो मैं आपको नीचे दिए गए ट्यूटोरियल का उल्लेख करता हूं:

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html


2
सबसे अधिक मतदान समाधान के विपरीत, यह स्क्रॉल स्थिति को बनाए रखता है जो उपयोगकर्ता के पास थी।
केटी

क्या आप कथन के लिए समर्थन प्रदान कर सकते हैं? उन्हें समान होना चाहिए: w3schools.com/jsref/met_his_back.asp
FarO



1

तुम भी उपयोग कर सकते हैं history.back()के साथ document.write()लिंक को दिखाने के लिए केवल जब वहाँ वास्तव में कहीं वापस जाने के लिए:

<script>
  if (history.length > 1) {
    document.write('<a href="javascript:history.back()">Go back</a>');
  }
</script>

document.writeपृष्ठ पर सब कुछ अधिलेखित कर दिया। आप कभी इसका उपयोग क्यों करेंगे ?
jpaugh

जब पृष्ठ लोड हो रहा हो तब आपको इस स्क्रिप्ट को निष्पादित करना होगा।
लियोनिद वसीलेव

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.