จะสร้างลิงค์กลับ HTML ได้อย่างไร?


287

วิธีที่ง่ายที่สุดในการสร้าง<a>แท็กที่เชื่อมโยงไปยังหน้าเว็บก่อนหน้าคืออะไร? โดยทั่วไปปุ่มย้อนกลับจำลอง แต่การเชื่อมโยงหลายมิติที่เกิดขึ้นจริง กรุณาใช้เทคโนโลยีด้านลูกค้าเท่านั้น

แก้ไขการ
ค้นหาโซลูชันที่มีประโยชน์ในการแสดง URL ของหน้าที่คุณกำลังจะคลิกเมื่อทำการโฮเวอร์เช่นการเชื่อมโยงหลายมิติแบบคงที่ปกติ ฉันไม่ต้องการให้ผู้ใช้ดูhistory.go(-1)เมื่อวางเมาส์บนไฮเปอร์ลิงก์ ดีที่สุดที่ฉันเคยพบคือ:

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

มีdocument.referrerความน่าเชื่อถือ? ข้ามเบราว์เซอร์ปลอดภัยหรือไม่ ฉันยินดีที่จะยอมรับคำตอบที่ดีกว่า


2
JavaScript เป็นเทคโนโลยีฝั่งไคลเอ็นต์ลูกค้าบางราย (เช่นฉัน) เพียงเลือกที่จะปิดใช้งาน (โดยค่าเริ่มต้น) นั่นคือพลังของลูกค้า! : D แต่ใช่ไม่มีวิธีสำหรับ HTML ในการกำหนดว่าหน้าก่อนหน้าคืออะไร
animuson

คำตอบ:


514

และอีกวิธีหนึ่ง:

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


9
และสำหรับปุ่ม:<button type="button" onclick="javascript:history.back()">Back</button>
Leo

1
ข้อเสียของวิธีการนี้คือคุณสมบัติเบราว์เซอร์มาตรฐานเช่น "โฮเวอร์เพื่อดู URL" และคลิกขวา -> ลิงค์คัดลอกจะใช้งานไม่ได้
Vivek Maharajh

ฉันคิดว่ามันเป็นเรื่องเกี่ยวกับความหมาย ปุ่ม "ย้อนกลับ" นั้นฉลาดกว่าลิงก์ "ย้อนกลับ" ทั้งตัวเลือกนั้นยอดเยี่ยมและตัวเลือกทั้งสองนั้นถูกต้องในแบบของพวกเขาเอง
Jaspreet Singh

111

วิธีนี้มีประโยชน์ในการแสดง URL ของหน้าเชื่อมโยงไปยังบนโฮเวอร์เนื่องจากเบราว์เซอร์ส่วนใหญ่ทำตามค่าเริ่มต้นแทนที่จะเป็นhistory.go(-1)หรือคล้ายกัน:

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

9
สิ่งนี้ยังมีประโยชน์ในการครอบคลุมกรณีที่เพจอ้างอิงที่เปิดด้วยtarget="_blank"แอตทริบิวต์ในลิงค์ซึ่งhistory.go(-1)ไม่มี
Chris Krycho

4
โซลูชันนี้สูญเสียส่วนลิงก์ต่อไปนี้ # 'javascript: history.back ()' ทำงานอย่างถูกต้อง
Liviu

16
ข้อเสียของโซลูชันนี้คือคุณจะไม่สามารถย้อนกลับได้มากกว่าหนึ่งหน้า ตัวอย่าง; นำทางไปยังหน้า a, b, c, d - กดปุ่มย้อนกลับซ้ำ ๆ c, d, c, d, c, d เปรียบเทียบสิ่งนี้กับ. history.back () a, b, c, d กดปุ่มย้อนกลับซ้ำ ๆ d, c, b, a
atreeon

ฉันจะทำให้มันเพื่อที่ว่าในกรณีที่มีหน้ากลับไม่มีแล้วเปลี่ยนเส้นทางไปยังคง URLhistory.back() || "myaction/mycontroller"
รัง

@orangesherbert ฉันได้ตอบคำถามนี้ด้วยคำตอบใหม่ (ซึ่งเป็นไปตามข้อกำหนด "แสดง URL")
Vivek Maharajh


41

คุณสามารถลองจาวาสคริปต์

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

อ้างถึงปุ่ม Back JavaScript

แก้ไข

เพื่อแสดง 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


คุณอธิบายได้ไหมว่าการแก้ไขครั้งล่าสุด ฉันแค่ต้องการลิงค์ปกติเหมือนมันแสดงที่ด้านล่างของเบราว์เซอร์ส่วนใหญ่
paislee

ตามที่เบราว์เซอร์ทั้งหมดแสดงให้เห็นถึงสิ่งที่คุณไม่จำเป็นต้องทำอะไร แต่ถ้าคุณต้องการที่จะแสดงมันใน div ของคุณคุณสามารถระบุ div tabledescriptionที่ใดก็ได้ในหน้าเพื่อแสดงลิงค์บนเม้าส์บนแท็กสมอ
Hemant Metalia

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;ฟังก์ชั่น onclick ใน Chrome เพื่อป้องกันไม่ให้เพิ่มหน้าปัจจุบันไปยังประวัติเบราว์เซอร์
Marshall Morrise

25

สำหรับการจะกลับไปที่หน้าก่อนหน้านี้ใช้ Anchor แท็ก<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

ลิงก์ย้อนกลับเป็นลิงค์ที่ย้ายเบราว์เซอร์ไปข้างหลังหนึ่งหน้าราวกับว่าผู้ใช้คลิกปุ่ม Back ที่มีอยู่ในเบราว์เซอร์ส่วนใหญ่ ลิงก์ย้อนกลับใช้ JavaScript มันจะย้ายเบราว์เซอร์กลับมาหนึ่งหน้าหากเบราว์เซอร์ของคุณรองรับ JavaScript (ซึ่งทำ) และรองรับ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
ไม่เหมือนโซลูชันที่ได้รับการโหวตมากที่สุดซึ่งจะรักษาตำแหน่งการเลื่อนที่ผู้ใช้มี
Ketri

@Ketri คุณสามารถให้การสนับสนุนคำสั่งได้หรือไม่ พวกเขาควรจะเหมือนกัน: 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

คุณต้องเรียกใช้งานสคริปต์นี้ในขณะที่หน้ากำลังโหลด
Leonid Vasilev

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.