จะตรวจสอบว่าผู้ใช้สามารถย้อนกลับไปในประวัติเบราว์เซอร์ได้หรือไม่

ฉันต้องการใช้ JavaScript เพื่อดูว่ามีประวัติหรือไม่ฉันหมายความว่าปุ่มย้อนกลับมีอยู่ในเบราว์เซอร์หรือไม่

คำตอบสั้น ๆ : คุณทำไม่ได้

ในทางเทคนิคมีวิธีที่ถูกต้องซึ่งจะเป็นการตรวจสอบคุณสมบัติ:

history.previous

อย่างไรก็ตามมันจะไม่ทำงาน ปัญหานี้ก็คือว่าในเบราว์เซอร์ส่วนใหญ่นี้จะถือว่าเป็นการละเมิดการรักษาความปลอดภัยและมักจะเพียงแค่ส่งกลับไม่ได้กำหนด

history.length

เป็นคุณสมบัติที่ผู้อื่นแนะนำ ...
อย่างไรก็ตามความยาวใช้งานไม่ได้เพราะไม่ได้ระบุว่าคุณอยู่ที่ไหนในประวัติศาสตร์ นอกจากนี้มันไม่ได้เริ่มต้นที่หมายเลขเดียวกันเสมอไป เบราว์เซอร์ที่ไม่ได้ตั้งค่าให้มีหน้า Landing Page เริ่มต้นที่ 0 ในขณะที่เบราว์เซอร์อื่นที่ใช้หน้า Landing Page จะเริ่มต้นที่ 1

เวลาส่วนใหญ่มีการเพิ่มลิงค์ที่เรียก:

history.back();

หรือ

 history.go(-1);

และคาดว่าถ้าคุณไม่สามารถย้อนกลับไปได้การคลิกที่ลิงก์ก็ไม่ได้ทำอะไรเลย

มีวิธีอื่นในการตรวจสอบ - ตรวจสอบผู้อ้างอิง หน้าแรกโดยปกติจะมีผู้อ้างอิงที่ว่างเปล่า ...

if (document.referrer == "") {
    window.close()
} else {
    history.back()
}

รหัสของฉันปล่อยให้เบราว์เซอร์ย้อนกลับไปหนึ่งหน้าและหากไม่สามารถโหลด URL สำรองได้ นอกจากนี้ยังตรวจพบการเปลี่ยนแปลงแฮชแท็ก

เมื่อปุ่มย้อนกลับไม่สามารถใช้ได้ URL ทางเลือกจะถูกโหลดหลังจาก 500 ms ดังนั้นเบราว์เซอร์มีเวลาเพียงพอในการโหลดหน้าก่อนหน้า การโหลด URL ทางเลือกหลังจากนั้นwindow.history.go(-1);จะทำให้เบราว์เซอร์ใช้ URL ทางเลือกเนื่องจากสคริปต์ js ยังไม่หยุด

function historyBackWFallback(fallbackUrl) {
    fallbackUrl = fallbackUrl || '/';
    var prevPage = window.location.href;

    window.history.go(-1);

    setTimeout(function(){ 
        if (window.location.href == prevPage) {
            window.location.href = fallbackUrl; 
        }
    }, 500);
}

นี่คือวิธีที่ฉันทำ

ฉันใช้เหตุการณ์'beforeunload'เพื่อตั้งค่าบูลีน จากนั้นฉันตั้งค่าการหมดเวลาเพื่อดูว่า 'beforeunload' เป็นเชื้อเพลิงหรือไม่

var $window = $(window),
    $trigger = $('.select_your_link'),
    fallback = 'your_fallback_url';
    hasHistory = false;

$window.on('beforeunload', function(){
    hasHistory = true;
});

$trigger.on('click', function(){

    window.history.go(-1);

    setTimeout(function(){
        if (!hasHistory){
            window.location.href = fallback;
        }
    }, 200);

    return false;
});

ดูเหมือนว่าจะทำงานในเบราว์เซอร์หลัก (ทดสอบ FF, Chrome, IE11 แล้ว)

มีตัวอย่างที่ฉันใช้ในโครงการของฉัน:

function back(url) {
    if (history.length > 2) {
        // if history is not empty, go back:
        window.History.back();
    } else if (url) {
        // go to specified fallback url:
        window.History.replaceState(null, null, url);
    } else {
        // go home:
        window.History.replaceState(null, null, '/');
    }
}

FYI: ฉันใช้History.jsเพื่อจัดการประวัติเบราว์เซอร์

ทำไมต้องเปรียบเทียบประวัติความยาวกับหมายเลข 2

เพราะหน้าแรกของ Chrome นับเป็นรายการแรกในประวัติของเบราว์เซอร์

มีความเป็นไปได้น้อยhistory.lengthและพฤติกรรมของผู้ใช้:

• ผู้ใช้เปิดแท็บเปล่าใหม่ในเบราว์เซอร์แล้วเรียกใช้หน้า history.length = 2และเราต้องการปิดการใช้งานback()ในกรณีนี้เนื่องจากผู้ใช้จะไปที่แท็บที่ว่างเปล่า
• ผู้ใช้เปิดหน้าในแท็บใหม่โดยคลิกที่ลิงค์ก่อน history.length = 1และอีกครั้งเราต้องการปิดback()การใช้งานวิธี
• และในที่สุดก็ใช้ที่ดินที่หน้าปัจจุบันหลังจากที่โหลดไม่กี่หน้า history.length > 2และตอนนี้back()สามารถเปิดใช้งานได้

หมายเหตุ:target="_blank"ผมละเว้นกรณีเมื่อดินแดนของผู้ใช้ในหน้าปัจจุบันหลังจากการเชื่อมโยงการคลิกจากเว็บไซต์ภายนอกโดยไม่ต้อง

หมายเหตุ 2: document.referrerว่างเปล่าเมื่อคุณเปิดเว็บไซต์โดยการพิมพ์ที่อยู่และเมื่อเว็บไซต์ใช้ ajax เพื่อโหลดหน้าย่อยดังนั้นฉันจึงหยุดตรวจสอบค่านี้ในกรณีแรก

ดูเหมือนว่าจะทำเคล็ดลับ:

function goBackOrClose() {  

    window.history.back();
    window.close(); 

    //or if you are not interested in closing the window, do something else here
    //e.g. 
    theBrowserCantGoBack();

}

โทร history.back () และจากนั้น window.close () หากเบราว์เซอร์สามารถย้อนกลับไปในประวัติศาสตร์เบราว์เซอร์จะไม่สามารถไปที่คำสั่งถัดไป หากไม่สามารถย้อนกลับได้มันจะปิดหน้าต่าง

อย่างไรก็ตามโปรดทราบว่าหากมีการเข้าถึงหน้านี้ด้วยการพิมพ์ URL แล้ว firefox จะไม่อนุญาตให้สคริปต์ปิดหน้าต่าง

ระวังด้วยwindow.history.lengthเพราะมันรวมถึงรายการสำหรับwindow.history.forward()

ดังนั้นคุณอาจจะwindow.history.lengthมีมากกว่า 1 รายการ แต่ไม่มีประวัติย้อนกลับรายการ ซึ่งหมายความว่าไม่มีอะไรเกิดขึ้นถ้าคุณยิงwindow.history.back()

คุณไม่สามารถตรวจสอบได้โดยตรงว่าปุ่มด้านหลังใช้งานได้หรือไม่ คุณสามารถดูhistory.length>0แต่นั่นจะถือเป็นจริงหากมีหน้าล่วงหน้าของหน้าปัจจุบันเช่นกัน คุณจะไม่สามารถตรวจสอบให้แน่ใจhistory.length===0ว่าปุ่มย้อนกลับใช้ไม่ได้เมื่อ

หากยังไม่ดีพอคุณสามารถโทรhistory.back()และถ้าหน้าของคุณยังโหลดหลังจากนั้นปุ่มย้อนกลับจะไม่สามารถใช้งานได้! แน่นอนว่าหมายความว่าถ้าปุ่มย้อนกลับเป็นใช้ได้คุณได้ไปเพียงแค่ออกจากหน้า คุณไม่ได้รับอนุญาตให้ยกเลิกการนำทางonunloadดังนั้นสิ่งที่คุณสามารถทำได้เพื่อหยุดสิ่งที่เกิดขึ้นจริงคือการคืนสิ่งต่างonbeforeunloadๆ ซึ่งจะส่งผลให้เกิดการเตือนที่น่ารำคาญ มันไม่คุ้มค่า.

จริงๆแล้วมันเป็นความคิดที่แย่จริงๆที่จะทำอะไรกับประวัติศาสตร์ การนำทางประวัติความเป็นมาสำหรับ Chrome เบราว์เซอร์ไม่ใช่หน้าเว็บ การเพิ่มลิงค์“ ย้อนกลับ” มักทำให้ผู้ใช้สับสนมากกว่าความคุ้มค่า

history.lengthไม่มีประโยชน์เนื่องจากไม่แสดงว่าผู้ใช้สามารถย้อนกลับไปในประวัติศาสตร์ได้หรือไม่ เบราว์เซอร์ที่แตกต่างกันใช้ค่าเริ่มต้น 0 หรือ 1 - ขึ้นอยู่กับเบราว์เซอร์

โซลูชันที่ใช้งานได้คือใช้$(window).on('beforeunload'เหตุการณ์ แต่ฉันไม่แน่ใจว่าจะใช้งานได้หากโหลดหน้าเว็บผ่าน ajax และใช้ pushState เพื่อเปลี่ยนประวัติหน้าต่าง

ดังนั้นฉันจึงใช้วิธีแก้ปัญหาต่อไป:

var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
    // if location was not changed in 100 ms, then there is no history back
    if(currentUrl === window.location.href){
        // redirect to site root
        window.location.href = '/';
    }
}, 100);

ฉันมาด้วยวิธีการดังต่อไปนี้ มันใช้เหตุการณ์ onbeforeunload เพื่อตรวจสอบว่าเบราว์เซอร์เริ่มออกจากหน้าเว็บหรือไม่ หากมันไม่ได้อยู่ในช่วงเวลาที่กำหนดมันจะเปลี่ยนเส้นทางไปยังทางเลือก

var goBack = function goBack(fallback){
    var useFallback = true;

    window.addEventListener("beforeunload", function(){
      useFallback = false;
    });

    window.history.back();

    setTimeout(function(){
        if (useFallback){ window.location.href = fallback; }
    }, 100); 
}

คุณสามารถเรียกใช้ฟังก์ชั่นนี้goBack("fallback.example.org")ได้

อาคารในคำตอบที่นี่และที่นี่ ฉันคิดว่าคำตอบที่ชัดเจนยิ่งขึ้นก็คือตรวจสอบว่านี่เป็นหน้าใหม่ในแท็บใหม่หรือไม่

หากประวัติของหน้ามากกว่าหนึ่งเราสามารถกลับไปที่หน้าก่อนหน้าไปยังหน้าปัจจุบัน มิฉะนั้นแท็บนั้นเป็นแท็บที่เพิ่งเปิดใหม่และเราจำเป็นต้องสร้างแท็บใหม่

ความแตกต่างสำหรับคำตอบที่เชื่อมโยงกันเราไม่ได้ตรวจสอบreferrerว่าแท็บใหม่ยังคงมีผู้อ้างอิงอยู่

if(1 < history.length) {
    history.back();
}
else {
    window.close();
}

มีอีกคืออยู่ใกล้กับโซลูชั่นที่สมบูรณ์แบบที่นำมาจากคำตอบ SO อื่น :

if( (1 < history.length) && document.referrer ) {
    history.back();
}
else {
    // If you can't go back in history, you could perhaps close the window ?
    window.close();
}

มีคนรายงานว่ามันไม่ทำงานเมื่อใช้งานtarget="_blank"แต่ดูเหมือนว่าจะใช้งานได้กับฉันใน Chrome

เบราว์เซอร์มีปุ่มย้อนกลับและไปข้างหน้า ฉันคิดวิธีแก้ปัญหาสำหรับคำถามนี้ แต่มันจะส่งผลกระทบต่อการดำเนินการของเบราว์เซอร์และทำให้เกิดข้อผิดพลาดกับเบราว์เซอร์บางตัว

ใช้งานได้เช่น: หากเบราว์เซอร์เปิด url ใหม่ที่ไม่เคยเปิดประวัติจะยาวขึ้น

เพื่อให้คุณสามารถเปลี่ยนแฮชได้

  location.href = '#__transfer__' + new Date().getTime() 

เพื่อให้ได้ URL ที่ไม่เคยปรากฏมาก่อนจากนั้น history.length จะได้รับความยาวจริง

  var realHistoryLength = history.length - 1

แต่มันไม่ได้ผลเสมอไปและฉันไม่รู้ว่าทำไมโดยเฉพาะเมื่อ url auto กระโดดเร็ว

ฉันพยายามหาวิธีแก้ปัญหาและนี่คือสิ่งที่ดีที่สุดที่ฉันจะได้รับ (แต่ใช้งานได้ดีและเป็นวิธีที่ง่ายที่สุดที่ฉันเคยพบแม้แต่ที่นี่)

ในกรณีของฉันฉันต้องการย้อนกลับไปในประวัติศาสตร์ด้วยปุ่มย้อนกลับ แต่ถ้าหน้าแรกที่ผู้ใช้เปิดเป็นหน้าย่อยของแอพของฉันมันจะกลับไปที่หน้าหลัก

วิธีแก้ปัญหาคือทันทีที่โหลดแอปฉันเพิ่งเปลี่ยนสถานะประวัติ:

history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)

ด้วยวิธีนี้ฉันเพียงแค่ต้องตรวจสอบhistory.state.rootก่อนที่จะกลับไป ถ้าเป็นจริงฉันสร้างประวัติแทนที่:

if(history.state && history.state.root)
    history.replaceState( {root: true}, '', '/')
else
    history.back() 

var fallbackUrl = "home.php";
if(history.back() === undefined)
    window.location.href = fallbackUrl;

สารละลาย

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  }
}

ชี้แจง

window.location.pathnameจะให้ URI ปัจจุบันแก่คุณ ยกตัวอย่างเช่นจะให้https://domain/question/1234/i-have-a-problem /question/1234/i-have-a-problemดูเอกสารประกอบเกี่ยวกับwindow.locationสำหรับข้อมูลเพิ่มเติม

ต่อไปการเรียกร้องsplit()จะให้ชิ้นส่วนทั้งหมดของ URI นั้นแก่เรา ดังนั้นถ้าเราใช้เวลา URI ["", "question", "1234", "i-have-a-problem"]ก่อนหน้านี้ของเราเราจะมีสิ่งที่ต้องการ ดูเอกสารเกี่ยวกับString.prototype.split ()สำหรับข้อมูลเพิ่มเติม

การเรียกใช้filter()อยู่ที่นี่เพื่อกรองสตริงว่างที่สร้างโดยสแลชย้อนหลัง โดยทั่วไปแล้วจะส่งกลับเฉพาะส่วนของ URI ที่มีความยาวมากกว่า 1 (ไม่ใช่สตริงว่าง) ["question", "1234", "i-have-a-question"]ดังนั้นเราจะมีสิ่งที่ต้องการ สิ่งนี้สามารถเขียนได้เช่น:

'use strict';
window.location.pathname.split('/').filter(function(fragment) {
  return fragment.length > 0;
});

ดูเอกสารประกอบเกี่ยวกับArray.prototype.filter ()และการมอบหมายการทำลายล้างสำหรับข้อมูลเพิ่มเติม

ตอนนี้หากผู้ใช้พยายามกลับไปในขณะที่อยู่บนhttps://domain/เราจะไม่เรียกใช้คำสั่ง if- และจะไม่เรียกwindow.history.back()วิธีการเพื่อให้ผู้ใช้จะอยู่ในเว็บไซต์ของเรา URL นี้จะเทียบเท่ากับ[]ที่มีความยาว0และ0 > 0เป็นเท็จ ดังนั้นความล้มเหลวอย่างเงียบ ๆ แน่นอนคุณสามารถบันทึกบางสิ่งหรือดำเนินการอื่นหากคุณต้องการ

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  } else {
    alert('You cannot go back any further...');
  }
}

ข้อ จำกัด

ของหลักสูตรนี้เคยชินทำงานแก้ปัญหาหากเบราว์เซอร์ไม่สนับสนุนประวัติ API ตรวจสอบเอกสารประกอบเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ก่อนใช้โซลูชันนี้

ฉันไม่แน่ใจว่าใช้งานได้หรือไม่และยังไม่ได้ทดสอบทั้งหมด แต่ลองทำดังนี้:

<script type="text/javascript">

    function goBack() {
        history.back();
    }

    if (history.length > 0) { //if there is a history...
        document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
    } else {
        die();
    }
</script>

และบางที่ใน HTML:

<button value="Button1"> //These buttons have no action
<button value="Button2">

แก้ไข:

สิ่งที่คุณสามารถทำได้คือการวิจัยสิ่งที่เบราว์เซอร์รองรับฟังก์ชั่นย้อนกลับ (ฉันคิดว่าพวกเขาทำทั้งหมด) และใช้วัตถุการตรวจสอบเบราว์เซอร์ JavaScript มาตรฐานที่พบและอธิบายอย่างละเอียดในหน้านี้ จากนั้นคุณสามารถมี 2 หน้าแตกต่างกัน: หนึ่งหน้าสำหรับ "เบราว์เซอร์ที่ดี" เข้ากันได้กับปุ่มย้อนกลับและอีกหน้าหนึ่งสำหรับ "เบราว์เซอร์ที่ไม่ดี" บอกให้พวกเขาไปอัปเดตเบราว์เซอร์

ตรวจสอบว่าwindow.history.lengthเท่ากับ 0