วิธีหยุดปุ่มย้อนกลับของเบราว์เซอร์โดยใช้ javascript

156

ฉันกำลังทำแอพตอบคำถามออนไลน์ใน php ฉันต้องการ จำกัด ผู้ใช้ไม่ให้กลับไปสอบอีก ฉันลองใช้สคริปต์ต่อไปนี้แล้ว แต่หยุดจับเวลา ฉันควรทำอย่างไรดี?

ฉันได้รวมซอร์สโค้ด ตัวจับเวลาถูกเก็บไว้ใน cdtimer.js

<script type="text/javascript">
        window.history.forward();
        function noBack()
        {
            window.history.forward();
        }
</script>
<body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

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

javascript browser

— Sawant Akshay
แหล่งที่มา

สำหรับ nodeJS ตรวจจับและหยุดเหตุการณ์ปุ่มย้อนกลับของเบราว์เซอร์

— Darshan Dixit

157

มีสาเหตุหลายประการที่การปิดใช้งานปุ่มย้อนกลับจะไม่ทำงานจริง ๆ ทางออกที่ดีที่สุดของคุณคือเตือนผู้ใช้:

window.onbeforeunload = function() { return "Your work will be lost."; };

หน้านี้แสดงรายการหลายวิธีที่คุณสามารถลองปิดการใช้งานปุ่มย้อนกลับ แต่ไม่มีการรับประกันใด ๆ :

http://www.irt.org/script/311.htm

— ColinE
แหล่งที่มา

คุณควรตรวจสอบรหัส PHP ของคุณว่าได้รับคำตอบแล้วหรือไม่

— Sela Yair

4

เป็นมูลค่าการกล่าวขวัญว่าตอนนี้สิ่งต่าง ๆ มีการเปลี่ยนแปลงในเบราว์เซอร์ที่ทันสมัย: ดูstackoverflow.com/questions/19926641/ …

— devrobf

126

โดยทั่วไปแล้วมันเป็นความคิดที่ไม่ดีที่เอาชนะพฤติกรรมเริ่มต้นของเว็บเบราว์เซอร์ สคริปต์ฝั่งไคลเอ็นต์ไม่มีสิทธิ์เพียงพอที่จะทำเช่นนี้เพื่อเหตุผลด้านความปลอดภัย

มีคำถามที่คล้ายกันสองสามข้อที่ถามเช่นกัน

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

(function (global) { 

    if(typeof (global) === "undefined") {
        throw new Error("window is undefined");
    }

    var _hash = "!";
    var noBackPlease = function () {
        global.location.href += "#";

        // making sure we have the fruit available for juice (^__^)
        global.setTimeout(function () {
            global.location.href += "!";
        }, 50);
    };

    global.onhashchange = function () {
        if (global.location.hash !== _hash) {
            global.location.hash = _hash;
        }
    };

    global.onload = function () {            
        noBackPlease();

        // disables backspace on page except on input fields and textarea..
        document.body.onkeydown = function (e) {
            var elm = e.target.nodeName.toLowerCase();
            if (e.which === 8 && (elm !== 'input' && elm  !== 'textarea')) {
                e.preventDefault();
            }
            // stopping event bubbling up the DOM tree..
            e.stopPropagation();
        };          
    }

})(window);

นี่เป็นจาวาสคริปต์ที่บริสุทธิ์ดังนั้นจึงสามารถใช้งานได้ในเบราว์เซอร์ส่วนใหญ่ มันก็จะปิดการใช้งานBackspaceสำคัญ แต่ที่สำคัญจะทำงานได้ตามปกติภายในเขตinputtextarea

การตั้งค่าที่แนะนำ:

วางข้อมูลโค้ดนี้ในสคริปต์แยกต่างหากและรวมไว้ในหน้าเว็บที่คุณต้องการใช้พฤติกรรมนี้ ในการตั้งค่าปัจจุบันมันจะดำเนินการonloadเหตุการณ์ของ DOM ซึ่งเป็นจุดเริ่มต้นที่เหมาะสำหรับรหัสนี้

สาธิตการทำงาน!

ทดสอบและตรวจสอบในเบราว์เซอร์ต่อไปนี้

โครเมียม.
Firefox
IE (8-11) และ Edge
การแข่งรถวิบาก

— Rohit416
แหล่งที่มา

1

ฉันไม่เข้าใจว่าทำไม setTimeout ถ้าฉันเพิ่งต่อท้าย #! ไปที่ตำแหน่งและลบ setTimeout มันยังคงทำงาน

— baraber

ใช่จริงมันจะทำงานได้ แต่ถ้าฉันต้องจำบางสิ่งบางอย่างจากหน่วยความจำเมื่อฉันมีสิ่งนี้ในตอนแรก ... การไหลไม่ทำงานอย่างถูกต้องในโครเมี่ยมเช่นเดียวกับเบราว์เซอร์อื่น ๆ Chrome คืนค่าว่างเปล่าlocation.hashในตอนแรกดังนั้นมันจึงทำให้ฉันทำเช่นนี้ อาจมีการปรับปรุงให้ดีขึ้นกว่านี้ แต่ 50 ms เพียงครั้งเดียวก็ไม่ได้ทำให้ฉันเสียค่าใช้จ่ายมากนัก

— Rohit416

โอ้นั่นเป็นความท้าทายของหน่วยความจำขอบคุณ :) ฉันใช้วิธีแก้ปัญหาของคุณ แต่แทนที่ setInterval ด้วย. handerhashchange ทำงานได้อย่างสมบูรณ์แบบ แต่ฉันมีคำถามอื่น: ทำไม "ถ้า (global.location.hash! = _hash)"? ฉันคิดว่าเงื่อนไขนี้เป็นจริงได้ตลอดเวลาเพราะ window.location.hash ควรคืนค่าแฮชด้วยอักขระ '#' และ _hash จะไม่มี caracter '#' คุณจำอะไรได้ไหม? นั่นเป็นเพียงการป้องกันในกรณีที่เบราว์เซอร์ไม่ส่งคืนอักขระ '#' ใน location.hash หรือไม่

— baraber

ฉันสร้างไฟล์. js ตามที่แนะนำและรวมไฟล์ js ในรหัสของฉันโดยใช้สิ่งต่อไปนี้: <script src = "./ javascript / noback.js"> </script> แต่ฉันยังคงสามารถย้อนกลับได้ (โดยใช้ Safari) ฉันกำลังคิดถึงอะไร ห้องสมุดนี้ถูกเพิ่มเข้ามาในแบบเดียวกับห้องสมุดอื่นที่ฉันใช้ดังนั้นการรวมจึงเป็นเรื่องที่ดี

— ทิม

1

บล็อกปุ่มย้อนกลับบนเครื่อง ipad, ios 8

— plugincontainer

75

ฉันเจอสิ่งนี้ต้องการโซลูชันที่ทำงานได้อย่างถูกต้องและ "ดีมาก" ในเบราว์เซอร์ที่หลากหลายรวมถึง Mobile Safari (iOS9 เมื่อมีการโพสต์) ไม่มีวิธีแก้ปัญหาใดถูกต้องนัก ฉันเสนอสิ่งต่อไปนี้ (ทดสอบบน IE11, FireFox, Chrome & Safari):

history.pushState(null, document.title, location.href);
window.addEventListener('popstate', function (event)
{
  history.pushState(null, document.title, location.href);
});

หมายเหตุดังต่อไปนี้:

history.forward()(โซลูชันเก่าของฉัน) ไม่ทำงานบน Mobile Safari --- ดูเหมือนว่าจะไม่ทำอะไรเลย (เช่นผู้ใช้ยังคงสามารถย้อนกลับไปได้) history.pushState()ทำงานกับพวกเขาทั้งหมด
อาร์กิวเมนต์ที่ 3 ที่จะhistory.pushState()เป็นURL วิธีแก้ปัญหาที่ส่งผ่านสตริงเหมือน'no-back-button'หรือ'pagename'ดูเหมือนว่าจะใช้ได้ตกลงจนกว่าคุณจะลองรีเฟรช / โหลดซ้ำบนหน้าเว็บซึ่งจะเกิดข้อผิดพลาด "ไม่พบหน้า" เมื่อเบราว์เซอร์พยายามค้นหาหน้าเว็บด้วย Url (เบราว์เซอร์มีแนวโน้มที่จะรวมสตริงนั้นในแถบที่อยู่เมื่อใช้ในหน้าซึ่งน่าเกลียด) location.hrefควรใช้สำหรับ Url
อาร์กิวเมนต์ที่ 2 history.pushState()เป็นชื่อ เมื่อมองไปรอบ ๆ เว็บไซต์ส่วนใหญ่บอกว่ามันเป็น "ไม่ได้ใช้" และโซลูชั่นทั้งหมดที่ผ่านมาnullสำหรับสิ่งนั้น อย่างไรก็ตามอย่างน้อยที่สุดใน Mobile Safari ที่ทำให้ Url ของหน้าเว็บเป็นแบบเลื่อนลงประวัติผู้ใช้สามารถเข้าถึงได้ แต่เมื่อมันเพิ่มรายการสำหรับการเข้าชมหน้าตามปกติมันทำให้อยู่ในชื่อของมันซึ่งเป็นที่ต้องการ ดังนั้นการส่งผ่านdocument.titleเพื่อให้ผลลัพธ์ในพฤติกรรมเดียวกัน

— JonBrave
แหล่งที่มา

3

นี่คือคำตอบที่ถูกต้อง ทำงานได้อย่างสมบูรณ์บน Chrome, IE 11, Firefox และ Edge

— Concept211

3

นี่ควรเป็นคำตอบที่ได้รับการยอมรับมันเป็นแพลตฟอร์มข้ามและทำงานได้ดี

— calbertts

ใน jsp sevlet หลังจากส่งฉันรีเฟรชหน้า หน้าไม่แสดง (ข้อผิดพลาด)

— Madhuka Dilhan

ทางออกที่ดีที่สุดจนถึงตอนนี้อาจไม่สามารถใช้งานได้ในเบราว์เซอร์รุ่นเก่า

— j4n7

2

โซลูชั่นที่สมบูรณ์แบบสำหรับเบราว์เซอร์ที่ทันสมัย ฉันได้รวมกับคำตอบ @ Rohit416 เพื่อสนับสนุนเบราว์เซอร์รุ่นเก่าโดยใช้เงื่อนไข typeof (history.pushState) === "ฟังก์ชั่น" ทำงานได้อย่างราบรื่น

— Miklos Krivan

74

<script>
window.location.hash="no-back-button";
window.location.hash="Again-No-back-button";//again because google chrome don't insert first hash into history
window.onhashchange=function(){window.location.hash="no-back-button";}
</script>

— vrfvr
แหล่งที่มา

3

Genius! ฉันใช้สิ่งนี้เพื่อป้องกันการทริกเกอร์โดยไม่ตั้งใจของปุ่มย้อนกลับเมื่อผู้ใช้พบกับ Backspace (ในฟิลด์ที่ถูกปิดใช้งาน / แบบอ่านอย่างเดียว) ในเว็บแอปที่แบ็คกราวด์ / ไปข้างหน้าไม่สมเหตุสมผลจริงๆ ยืนยันการปิดการใช้งานฟังก์ชั่นการถอยหลังและไปข้างหน้า (ไม่ใช่ปุ่มตัวเอง) รวมถึงตัวเลือกเมนูบริบท ตรวจสอบแล้วใน IE8 ถึง IE11, Chrome & FF

— nothingisnecessary

1

ใช้งานได้ แต่รีเซ็ตข้อมูลทั้งหมดที่ป้อนในกล่องข้อความ เป็นไปได้หรือไม่ที่จะป้องกันการหักล้าง?

— Somnium

6

มันทำงานสำหรับฉันใน Firefox แต่ไม่ได้อยู่ในโครเมี่ยม (รุ่น 36.0.1985.143)

— baraber

สิ่งนี้ได้ผลกับฉันเช่นกัน แต่บน Firefox ดูเหมือนว่าจะทำลายwindow.history.back()ฟังก์ชัน เราต้องการป้องกันผู้ใช้คลิกที่ปุ่มย้อนกลับของเบราว์เซอร์ แต่ในบางกรณีเรามีปุ่มย้อนกลับของเราเองในหน้า มีวิธีใดที่จะทำให้มันใช้งานได้?

— AsGoodAsItGets

1

มันไม่ได้ผลสำหรับฉัน ฉันกำลังใช้ Chrome รุ่น 55 บน Windows 10 ฉันวางสคริปต์ไว้ในหลาย ๆ ที่ (เริ่มต้นส่วนหัวส่วนท้ายของร่างกาย ฯลฯ ) และฉันยังคงสามารถใช้ปุ่มย้อนกลับเพื่อกลับไปยังหน้าก่อนหน้า

— Victor Stoddard

28

รหัสนี้จะปิดการใช้งานปุ่มย้อนกลับสำหรับเบราว์เซอร์ที่ทันสมัยซึ่งรองรับ API ประวัติ HTML5 ภายใต้สถานการณ์ปกติกดปุ่มย้อนกลับไปหนึ่งขั้นตอนไปยังหน้าก่อนหน้า หากคุณใช้ history.pushState () คุณจะเริ่มเพิ่มขั้นตอนย่อยพิเศษลงในหน้าปัจจุบัน วิธีการทำงานคือถ้าคุณใช้ history.pushState () สามครั้งจากนั้นเริ่มกดปุ่มย้อนกลับสามครั้งแรกที่มันจะย้อนกลับไปในขั้นตอนย่อยเหล่านี้จากนั้นครั้งที่สี่จะกลับไปที่ หน้าก่อนหน้า

หากคุณรวมพฤติกรรมนี้กับผู้ฟังเหตุการณ์ในpopstateเหตุการณ์คุณสามารถตั้งค่าการวนรอบไม่สิ้นสุดของสถานะย่อย ดังนั้นคุณโหลดหน้าเว็บกด sub-state จากนั้นกดปุ่มย้อนกลับซึ่งจะปรากฏ sub-state และยังกดอีกหนึ่งดังนั้นถ้าคุณกดปุ่มย้อนกลับอีกครั้งมันจะไม่หมด sub-state ที่จะผลักดัน . หากคุณรู้สึกว่าจำเป็นต้องปิดการใช้งานปุ่มย้อนกลับสิ่งนี้จะพาคุณไปที่นั่น

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});

— Jeremy Warne
แหล่งที่มา

2

ในเบราว์เซอร์ใดก็ตามให้ลองหน้ารีเฟรช / โหลดใหม่หลังจากนี้และคุณจะติดอยู่กับข้อผิดพลาด "ไม่พบหน้าเว็บ" เนื่องจากพยายามค้นหาหน้าชื่อno-back-button... (เบราว์เซอร์มีแนวโน้มที่จะแสดงno-back-buttonในที่อยู่ด้วย แถบเกินไปซึ่งดูเหมือนน่าเกลียด.) เพื่อความยุติธรรมนี้ไม่ได้เป็นทางออกเดียวที่นี่ซึ่งทนทุกข์ทรมานจากนี้ อาร์กิวเมนต์ที่ 3 history.pushState()เป็นURLและจะต้องเป็น URL ของหน้าปัจจุบันของคุณ: ใช้location.hrefแทน

— JonBrave

4

สิ่งนี้ใช้ได้สำหรับฉัน เพียงแค่เปลี่ยน 'no-back-button' เป็น "window.top.location.pathname + window.top.location.search" และจะยังคงชื่อของหน้าเว็บที่คุณอยู่แม้จะรีเฟรช

— Steve

ในหมู่คนอื่น ๆ สิ่งนี้ใช้ได้กับฉันมาก อ้างถึงstackoverflow.com/questions/19926641/...

— user2171669

ฉันได้สำรวจหลายกรณีและนี่เป็นทางออกที่ดีที่สุดสำหรับไซต์ 1 หน้า

— djdance

นี่เป็นวิธีแก้ปัญหาที่แย่มากเพราะคุณกำลังเปลี่ยน URL ดังนั้นหากคุณกดไปเรื่อย ๆ สองสามครั้ง Chrome จะเปลี่ยนเส้นทางไปยังเส้นทางที่ไม่มีตัวตน

— Tallboy

21

สำหรับ จำกัด เบราว์เซอร์กลับเหตุการณ์

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};

— เฟซัลฮาไล
แหล่งที่มา

1

ใช้งานได้ดีกับโครเมี่ยม! ทำไมผู้คนถึงไม่ลงคะแนนเพราะนี่คือคำตอบที่ดีที่สุด?

— Tarık Seyceri

1

ฉันเพิ่งทดสอบโดยใช้ระบบปฏิบัติการ Windows 10 บนเบราว์เซอร์ต่อไปนี้ (ใช้งานได้ดี) Chrome รุ่น 74.0.3729.108 (รุ่นเป็นทางการ) (64 บิต) รุ่น Chrome Canary เวอร์ชัน 76.0.3780.0 (รุ่นเป็นทางการ) รุ่น Chromium เวอร์ชัน 32.0 (64 บิต) 3355.0 (Build Developer) (64- บิต) Firefox 66.0.3 (64-bit) EDGE IE 11 Safari 5.1.7

— Tarık Seyceri

2

@ TarıkSeyceriเพราะใช้งานได้เฉพาะบนเบราว์เซอร์ที่ a) สนับสนุน API ประวัติ b) หน้าเว็บนั้นใช้ API ประวัติเพื่อจัดการสถานะ

— givanse

ไม่ทำงานอีกต่อไปใน Chrome หลังจากเวอร์ชัน 75 ดู: support.google.com/chrome/thread/8721521?hl=th

— ยีน b

13

    history.pushState(null, null, location.href);
    window.onpopstate = function () {
        history.go(1);
    };

— Eng Mahmoud El Torri
แหล่งที่มา

12

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

— Aurora0001

ทดสอบบน Chrome, Firefox, IE และ Edge มันใช้งานได้ดี คุณช่วยฉันไว้.

— Nooovice Boooy

12

นี่คือวิธีที่ฉันสามารถทำได้ การเปลี่ยนหน้าต่างอย่างแปลกประหลาดการจัดวางไม่ได้ผลดีในโครเมี่ยมและซาฟารี เกิดขึ้นที่ location.hash ไม่ได้สร้างรายการในประวัติของ Chrome และ Safari ดังนั้นคุณจะต้องใช้ pushstate สิ่งนี้ใช้ได้สำหรับฉันในเบราว์เซอร์ทั้งหมด

    history.pushState({ page: 1 }, "title 1", "#nbb");
    window.onhashchange = function (event) {
        window.location.hash = "nbb";

    };

— Sanchitos
แหล่งที่มา

1

ที่ใช้งานไม่ได้ใน IE9 และด้านล่างไม่รองรับ pushState

— อเล็กซ์

ยิ่งใหญ่ นี่เป็นวิธีการที่ดีและใช้ได้กับเบราว์เซอร์รุ่นล่าสุดเกือบทั้งหมด

— Venugopal M

1

ใช้งานได้ดีใน IE ต่อมา เพียงใส่โดยตรงในเอกสารแล้ว: $(document).ready(function () { .... });

— Oppa Gingham Style

โปรดทราบว่าคุณต้องเพิ่ม uri ปัจจุบันของคุณก่อน "#nbb" เช่น "บัญชี # nbb"

— Mladen Janjetovic

9

<html>
<head>
    <title>Disable Back Button in Browser - Online Demo</title>
    <style type="text/css">
        body, input {
            font-family: Calibri, Arial;
        }
    </style>
    <script type="text/javascript">
        window.history.forward();
        function noBack() {
            window.history.forward();
        }
    </script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
    <H2>Demo</H2>
    <p>This page contains the code to avoid Back button.</p>
    <p>Click here to Goto <a href="noback.html">NoBack Page</a></p>
</body>
</html>

— Ashwin Patil
แหล่งที่มา

มีเอกสารevent.persistedบ้างไหม?

— Muhd

1

นี่คือลิงค์ที่พบสำหรับคำถามของคุณ ค้นหาได้ที่นี่ @Muhd

— rbashish

ฉันเพิ่งลองอันนี้ไม่ทำงาน

— Pedro Joaquín

8

บทความใน jordanhollinger.comนี้เป็นตัวเลือกที่ดีที่สุดที่ฉันรู้สึก คล้ายกับคำตอบของมีดโกน แต่ค่อนข้างชัดเจน รหัสด้านล่าง; สินเชื่อเต็มไปสู่ Jordan Hollinger:

หน้าก่อน:

<a href="/page-of-no-return.htm#no-back>You can't go back from the next page</a>

หน้าของ JavaScript ที่ไม่ส่งคืน:

// It works without the History API, but will clutter up the history
var history_api = typeof history.pushState !== 'undefined'

// The previous page asks that it not be returned to
if ( location.hash == '#no-back' ) {
  // Push "#no-back" onto the history, making it the most recent "page"
  if ( history_api ) history.pushState(null, '', '#stay')
  else location.hash = '#stay'

  // When the back button is pressed, it will harmlessly change the url
  // hash from "#stay" to "#no-back", which triggers this function
  window.onhashchange = function() {
    // User tried to go back; warn user, rinse and repeat
    if ( location.hash == '#no-back' ) {
      alert("You shall not pass!")
      if ( history_api ) history.pushState(null, '', '#stay')
      else location.hash = '#stay'
    }
  }
}

— dav_i
แหล่งที่มา

8

history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

จาวาสคริปต์นี้ไม่อนุญาตให้ผู้ใช้งานย้อนกลับไป (ใช้งานได้ใน Chrome, FF, IE, Edge)

— สุรจิตต์มิตรา
แหล่งที่มา

5

ลองใช้อย่างง่ายดาย:

history.pushState(null, null, document.title);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.title);
});

— Lakhan
แหล่งที่มา

5

รหัสนี้ทดสอบกับเบราว์เซอร์ Chrome และ Firefox ล่าสุด

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>

— Franklin Innocent F
แหล่งที่มา

ยินดีต้อนรับ huyhoang

— Franklin Innocent F

3

ฟังก์ชั่นที่ง่ายและสะอาดมากในการทำลายลูกศรย้อนกลับโดยไม่รบกวนหน้ากระดาษในภายหลัง

ประโยชน์ที่ได้รับ:

โหลดทันทีและคืนค่าแฮชดั้งเดิมดังนั้นผู้ใช้จะไม่ถูกรบกวนโดย URL ที่เปลี่ยนแปลงอย่างเห็นได้ชัด
ผู้ใช้ยังคงสามารถออกได้โดยกดปุ่มย้อนกลับ 10 ครั้ง (นับว่าเป็นสิ่งที่ดี) แต่ไม่ได้ตั้งใจ
ไม่มีการแทรกแซงของผู้ใช้เช่นการแก้ปัญหาอื่น ๆ โดยใช้ onbeforeunload
มันทำงานเพียงครั้งเดียวและจะไม่ยุ่งเกี่ยวกับการแฮชเพิ่มเติมในกรณีที่คุณใช้เพื่อติดตามสถานะ
คืนค่าแฮชดั้งเดิมจึงแทบมองไม่เห็น
ใช้setIntervalเพื่อไม่ให้เบราว์เซอร์ทำงานช้าและทำงานได้เสมอ
Javascript ล้วนไม่ต้องใช้ประวัติ HTML5 ใช้ได้ทุกที่
ไม่เป็นการรบกวนง่ายและเล่นได้ดีกับรหัสอื่น
ไม่ใช้อินเทอร์unbeforeunloadรัปต์ที่ทำให้ผู้ใช้โต้ตอบกล่องโต้ตอบ
มันใช้งานได้โดยไม่ยุ่งยาก

หมายเหตุ: onbeforeunloadบางส่วนของการแก้ปัญหาการใช้งานอื่น โปรดอย่าใช้onbeforeunloadเพื่อจุดประสงค์นี้ซึ่งเปิดหน้าต่างโต้ตอบเมื่อใดก็ตามที่ผู้ใช้พยายามปิดหน้าต่างกดปุ่มลูกศร ฯลฯ Modals เช่นonbeforeunloadนั้นมักจะเหมาะสมในสถานการณ์ที่หายากเช่นเมื่อพวกเขาทำการเปลี่ยนแปลงบนหน้าจอและที่อยู่จริง ' ไม่ได้บันทึกไว้ไม่ใช่เพื่อจุดประสงค์นี้

มันทำงานอย่างไร

ดำเนินการในการโหลดหน้า
บันทึกแฮชดั้งเดิมของคุณ (หากมีอยู่ใน URL)
ต่อท้าย # / noop / {1..10} ต่อท้ายแฮช
คืนค่าแฮชดั้งเดิม

แค่นั้นแหละ. ไม่มีการเลอะเลือนอีกต่อไปไม่มีการตรวจสอบเหตุการณ์พื้นหลังไม่มีอะไรอื่น

ใช้ในหนึ่งวินาที

ในการปรับใช้เพียงเพิ่มที่ใดก็ได้บนหน้าของคุณหรือใน JS ของคุณ:

<script>
/* break back button */                                                                        
window.onload=function(){                                                                      
  var i=0; var previous_hash = window.location.hash;                                           
  var x = setInterval(function(){                                                              
    i++; window.location.hash = "/noop/" + i;                                                  
    if (i==10){clearInterval(x);                                                               
      window.location.hash = previous_hash;}                                                   
  },10);
}
</script>

— ข้อผิดพลาดร้ายแรง
แหล่งที่มา

2

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

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });

— jgabb
แหล่งที่มา

1

   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>

— user3789888
แหล่งที่มา

1

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

<script type = "text/javascript" >
history.pushState(null, null, 'pagename');
window.addEventListener('popstate', function(event) {
history.pushState(null, null, 'pagename');
});
</script>

ทำงานได้ในโครเมี่ยมและ Firefox ของฉัน

— Shailendra Sharma
แหล่งที่มา

1

ลองใช้วิธีนี้เพื่อป้องกันปุ่ม Backspace ใน IE ซึ่งโดยปกติจะทำหน้าที่เป็น "Back":

<script language="JavaScript">
$(document).ready(function() {
$(document).unbind('keydown').bind('keydown', function (event) {
    var doPrevent = false;


    if (event.keyCode === 8 ) {
        var d = event.srcElement || event.target;
        if ((d.tagName.toUpperCase() === 'INPUT' && 
             (
                 d.type.toUpperCase() === 'TEXT' ||
                 d.type.toUpperCase() === 'PASSWORD' || 
                 d.type.toUpperCase() === 'FILE' || 
                 d.type.toUpperCase() === 'EMAIL' || 
                 d.type.toUpperCase() === 'SEARCH' || 
                 d.type.toUpperCase() === 'DATE' )
             ) || 
             d.tagName.toUpperCase() === 'TEXTAREA') {
            doPrevent = d.readOnly || d.disabled;
        }
        else {

            doPrevent = true;
        }
    }

    if (doPrevent) {
        event.preventDefault();
    }

    try {
        document.addEventListener('keydown', function (e) {
               if ((e.keyCode === 13)){
                  // alert('Enter keydown');
                   e.stopPropagation();
                   e.preventDefault();
               }



           }, true);
        } catch (err) {}
    });
});
</script>

— อจิต Kamble
แหล่งที่มา

1

ฉันเชื่อว่าวิธีการแก้ปัญหาที่สมบูรณ์แบบจริงๆแล้วตรงไปตรงมาซึ่งฉันใช้มาหลายปีแล้ว

โดยทั่วไปแล้วจะเป็นการกำหนดเหตุการณ์ "onbeforeunload" ของหน้าต่างพร้อมกับเหตุการณ์ 'mouseenter' / 'mouseleave' ของเอกสารอย่างต่อเนื่องดังนั้นการแจ้งเตือนจะทำงานเฉพาะเมื่อการคลิกอยู่นอกขอบเขตของเอกสาร (ซึ่งอาจเป็นปุ่มย้อนกลับหรือไปข้างหน้าของเบราว์เซอร์)

$(document).on('mouseenter', function(e) { 
        window.onbeforeunload = null; 
    }
);

$(document).on('mouseleave', function(e) { 
        window.onbeforeunload = function() { return "You work will be lost."; };
    }
);

— Abdelqoddous Rifai
แหล่งที่มา

1

ในเบราว์เซอร์สมัยใหม่นี้ดูเหมือนว่าจะทำงาน:

// https://developer.mozilla.org/en-US/docs/Web/API/History_API
let popHandler = () => {
  if (confirm('Go back?')) {
    window.history.back() 
  } else {
    window.history.forward()
    setTimeout(() => {
      window.addEventListener('popstate', popHandler, {once: true})
    }, 50) // delay needed since the above is an async operation for some reason
  }
}
window.addEventListener('popstate', popHandler, {once: true})
window.history.pushState(null,null,null)

— Joakim L. Christiansen
แหล่งที่มา

1

ไม่แน่ใจว่าเกิดอะไรขึ้น แต่ด้วยเหตุผลบางอย่างฉันลงคะแนนคำตอบนี้ในเครื่องอื่น เพียงแค่ให้คุณรู้ว่านี่ไม่ใช่ความตั้งใจของฉัน แต่ฉันไม่สามารถยกเลิกการลงคะแนนได้อีก: /

— Lennard Fonteijn

ไม่มีความรู้สึกเจ็บ @LennardFonteijn :)

— Joakim L. Christiansen

1

ไม่มีคำตอบมากที่สุด upvoted ทำงานสำหรับฉันในChrome 79 ดูเหมือนว่า Chrome จะเปลี่ยนพฤติกรรมด้วยความเคารพต่อปุ่ม Back หลังจากเวอร์ชัน 75 ดูที่นี่:

https://support.google.com/chrome/thread/8721521?hl=en

อย่างไรก็ตามใน Google thread นั้นคำตอบที่ Azrulmukmin Azmi ได้ให้ไว้ที่ส่วนท้ายนั้นได้ผล นี่คือทางออกของเขา

<script>

history.pushState(null, document.title, location.href); 
history.back(); 
history.forward(); 
window.onpopstate = function () { 
    history.go(1); 
};

</script>

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

ฉันไม่เข้าใจสิ่งที่เขาเขียนทั้งหมด แต่history.back() / history.forward()ตอนนี้จำเป็นต้องมีการเพิ่มเติมสำหรับการบล็อก Back ใน Chrome 75+

— ยีน b.
แหล่งที่มา

หลังจากค้นหาสูงและต่ำในที่สุดก็ใช้งานได้บนเบราว์เซอร์ Android ด้วยเหตุผลบางประการที่เหตุการณ์ปุ่มย้อนกลับของเบราว์เซอร์ไม่ถูกตรวจพบกับสคริปต์อื่น ๆ ที่ฉันลอง ขอบคุณขอบคุณขอบคุณอีกครั้ง! ผ่านการทดสอบและทำงานได้ดีภายใต้ Chrome 83 ทั้งเดสก์ท็อปและมือถือ! ยีนคุณเป็นผู้ช่วยชีวิต!

— อีวาน

0

ฉันสร้างหน้า HTML หนึ่งหน้า (index.html) ฉันยังสร้างหนึ่ง (mechanism.js) ภายในโฟลเดอร์ / ไดเรกทอรี (สคริปต์) จากนั้นฉันวางเนื้อหาทั้งหมดของฉันไว้ภายใน (index.html) โดยใช้แบบฟอร์มตารางการขยายและแท็ก div ตามต้องการ ทีนี้นี่คือกลอุบายที่จะทำให้กลับไปกลับมา / ไม่ทำอะไรเลย!

ก่อนข้อเท็จจริงที่ว่าคุณมีเพียงหน้าเดียว! ประการที่สองการใช้ JavaScript พร้อมแท็ก span / div เพื่อซ่อนและแสดงเนื้อหาในหน้าเดียวกันเมื่อต้องการผ่านลิงก์ปกติ!

ภายใน 'index.html':

    <td width="89px" align="right" valign="top" style="letter-spacing:1px;">
     <small>
      <b>
       <a href="#" class="traff" onClick="DisplayInTrafficTable();">IN</a>&nbsp;
      </b>
     </small>
     [&nbsp;<span id="inCountSPN">0</span>&nbsp;]
    </td>

ข้างใน 'mechanism.js':

    function DisplayInTrafficTable()
    {
     var itmsCNT = 0;
     var dsplyIn = "";
     for ( i=0; i<inTraffic.length; i++ )
     {
      dsplyIn += "<tr><td width='11'></td><td align='right'>" + (++itmsCNT) + "</td><td width='11'></td><td><b>" + inTraffic[i] + "</b></td><td width='11'></td><td>" + entryTimeArray[i] + "</td><td width='11'></td><td>" + entryDateArray[i] + "</td><td width='11'></td></tr>";
     }
     document.getElementById('inOutSPN').innerHTML = "" +
                                             "<table border='0' style='background:#fff;'><tr><th colspan='21' style='background:#feb;padding:11px;'><h3 style='margin-bottom:-1px;'>INCOMING TRAFFIC REPORT</h3>" + DateStamp() + "&nbsp;&nbsp;-&nbsp;&nbsp;<small><a href='#' style='letter-spacing:1px;' onclick='OpenPrintableIn();'>PRINT</a></small></th></tr><tr style='background:#eee;'><td></td><td><b>###</b></td><td></td><td><b>ID #</b></td><td></td><td width='79'><b>TYPE</b></td><td></td><td><b>FIRST</b></td><td></td><td><b>LAST</b></td><td></td><td><b>PLATE #</b></td><td></td><td><b>COMPANY</b></td><td></td><td><b>TIME</b></td><td></td><td><b>DATE</b></td><td></td><td><b>IN / OUT</b></td><td></td></tr>" + dsplyIn.toUpperCase() + "</table>" +
                                             "";
     return document.getElementById('inOutSPN').innerHTML;
    }

มันดูขน แต่สังเกตชื่อฟังก์ชั่นและการโทร HTML แบบฝังและการเรียกรหัสแท็กการขยาย นี่เป็นการแสดงให้เห็นว่าคุณสามารถแทรก HTML ที่แตกต่างกันในแท็ก span เดียวกันในหน้าเดียวกันได้อย่างไร! Back / Forward มีผลต่อการออกแบบนี้อย่างไร ไม่สามารถเพราะคุณซ่อนวัตถุและแทนที่คนอื่นทั้งหมดในหน้าเดียวกัน!

วิธีซ่อนและแสดง ต่อไปนี้: ฟังก์ชันภายในใน 'mechanism.js' ตามต้องการใช้:

    document.getElementById('textOverPic').style.display = "none"; //hide
    document.getElementById('textOverPic').style.display = "";     //display

ฟังก์ชั่นการโทรภายใน 'index.html' ผ่านลิงก์:

    <img src="images/someimage.jpg" alt="" />
    <span class="textOverPic" id="textOverPic"></span>

และ

    <a href="#" style="color:#119;font-size:11px;text-decoration:none;letter-spacing:1px;" onclick="HiddenTextsManager(1);">Introduction</a>

ฉันหวังว่าฉันจะไม่ทำให้คุณปวดหัว ขออภัยถ้าฉันทำ :-)

— hacker1033
แหล่งที่มา

0

ในกรณีของฉันนี่คือการสั่งซื้อสินค้า ดังนั้นสิ่งที่ฉันทำคือปิดใช้งานปุ่ม เมื่อผู้ใช้คลิกกลับปุ่มจะยังคงปิดใช้งานอยู่ เมื่อพวกเขาคลิกกลับมาอีกครั้งจากนั้นคลิกที่ปุ่มหน้าเพื่อไปข้างหน้า ฉันรู้ว่ามีการส่งคำสั่งซื้อและข้ามไปยังหน้าอื่น

ในกรณีที่หน้ารีเฟรชจริงซึ่งจะทำให้ปุ่ม (ในทางทฤษฎี) พร้อมใช้งาน; ฉันสามารถตอบสนองในการโหลดหน้าเว็บที่มีการส่งคำสั่งซื้อและเปลี่ยนเส้นทางแล้วเช่นกัน

— Valamas
แหล่งที่มา

0

<script language="JavaScript">
    javascript:window.history.forward(1);
</script>

— Kamlesh
แหล่งที่มา

3

1. javascript:คุณเขียนกำหนดป้ายกำกับ JavaScript ชื่อ "javascript" ฉันสงสัยมากว่าคุณตั้งใจจะทำเช่นนั้น ฉันสงสัยว่าคุณกำลังสับสนhref=javascript:...กับ<script>บล็อกJavaScript 2. language="JavaScript"หยุดเป็น<script>แอตทริบิวต์ที่ถูกต้องที่ HTML5 3. คะแนน 2 เหนือไม่สำคัญมาก สิ่งสำคัญคือhistory.forward(1)ไม่ทำงานใน Mobile Safari (อย่างน้อย) ใช้หนึ่งในhistory.pushState()คำตอบแทน

— JonBrave

0

คุณสามารถวางสคริปต์ขนาดเล็กแล้วตรวจสอบ ไม่อนุญาตให้คุณไปที่หน้าก่อนหน้า สิ่งนี้ทำใน javascript

<script type="text/javascript">
    function preventbackbutton() { window.history.forward(); }
    setTimeout("preventbackbutton()", 0);
    window.onunload = function () { null };
</script>

ฟังก์ชั่น window.onunload เริ่มทำงานเมื่อคุณพยายามที่จะเยี่ยมชมย้อนกลับหรือหน้าก่อนหน้าผ่านเบราว์เซอร์

หวังว่านี่จะช่วยได้

— noobprogrammer
แหล่งที่มา

0

ฉันมีปัญหากับ React.JS (ส่วนประกอบของคลาส)

และแก้ปัญหาได้ง่าย

componentDidMount(){
   window.addEventListener("popstate", e=> {
      this.props.history.goForward();
   }
}

ผมเคยใช้จากHashRouterreact-router-dom

— Oo
แหล่งที่มา

0

เพิ่งตั้งค่าlocation.hash="Something"เมื่อกดปุ่มย้อนกลับแฮชจะถูกลบออกจาก url แต่หน้าจะไม่กลับไปวิธีนี้ดีสำหรับการป้องกันการย้อนกลับโดยไม่ตั้งใจ แต่เพื่อความปลอดภัยคุณควรออกแบบแบ็กเอนด์ของคุณเพื่อป้องกันการตอบรับอีกครั้ง

— Abhishek
แหล่งที่มา

-1

//"use strict";
function stopBackSpace(e) {
    var ev = e || window.event;
    var obj = ev.target || ev.srcElement;
    var t = obj.type || obj.getAttribute('type');

    var vReadOnly = obj.getAttribute('readonly');
    var vEnabled = obj.getAttribute('enabled');
    // null
    vReadOnly = (vReadOnly == null) ? false : vReadOnly;
    vEnabled = (vEnabled == null) ? true : vEnabled;
    // when click Backspace,judge the type of obj.

    var flag1 = ((t == 'password' || t == 'text' || t == 'textarea') && ((vReadOnly == true || vReadOnly == 'readonly') || vEnabled != true)) ? true : false;

    var flag2 = (t != 'password' && t != 'text' && t != 'textarea') ? true : false;

    if (flag2) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
    if (flag1) {
        e.keyCode = 0;
        e.cancelBubble = true;
        return false;
    }
}
if (typeof($) == 'function') {
    $(function() {
        $(document).keydown(function(e) {
            if (e.keyCode == 8) {
                return stopBackSpace(e);
            }
        });
    });
} else {
    document.onkeydown = stopBackSpace;
}

— Chauncey.Zhong
แหล่งที่มา

1 รับวัตถุเหตุการณ์ 2. เพื่อกำหนดประเภทแหล่งเหตุการณ์ตามเงื่อนไขการตัดสิน 3. เมื่อ Hit Backspace ซึ่งเป็นประเภทของเหตุการณ์สำหรับรหัสผ่านหรือโสดและคุณสมบัติแบบอ่านอย่างเดียวไปยังคุณสมบัติจริงหรือเปิดใช้งานเป็นเท็จแล้วความล้มเหลวของคีย์ backspace เมื่อกด Backspace แหล่งที่มาของเหตุการณ์จะพิมพ์รหัสผ่านหรือรหัสผ่านเดียวคือความล้มเหลวของคีย์ Backspace

— Chauncey.Zhong

คำถามกำลังถามเกี่ยวกับการใช้ปุ่มการนำทางย้อนกลับไม่ใช่ปุ่ม Backspace

— เควนติน