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

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

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

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

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

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

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

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

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

วิธีที่ง่ายที่สุดคือการใช้ history.go(-1);

ลองสิ่งนี้:

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

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

<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

วิธีนี้ช่วยให้คุณได้รับสิ่งที่ดีที่สุดทั้งสองโลก

• ผู้ใช้จะต้องวางเมาส์เหนือลิงก์เพื่อดู 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>

สำหรับการจะกลับไปที่หน้าก่อนหน้านี้ใช้ 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()จะไม่ทำงานหากเปิดลิงก์ในแท็บใหม่ของเว็บเบราว์เซอร์

ลิงก์ย้อนกลับเป็นลิงค์ที่ย้ายเบราว์เซอร์ไปข้างหลังหนึ่งหน้าราวกับว่าผู้ใช้คลิกปุ่ม 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

ลองนี้

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

<a href="#" onclick="history.back();">Back</a>

คุณสามารถใช้history.back()ข้างdocument.write()เพื่อแสดงลิงก์เฉพาะเมื่อมีอยู่จริงเพื่อกลับไปที่:

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

วิธีที่ดีที่สุดในการใช้ปุ่มคือ

<input type= 'button' onclick='javascript:history.back();return false;' value='Back'>