Làm thế nào để dừng nút quay lại trình duyệt bằng javascript

155

Tôi đang làm một ứng dụng đố trực tuyến bằng php. Tôi muốn hạn chế người dùng quay trở lại trong một kỳ thi. Tôi đã thử đoạn script sau nhưng nó dừng bộ đếm thời gian của tôi. Tôi nên làm gì?

Tôi đã bao gồm mã nguồn. Bộ đếm thời gian được lưu trữ trong cdtimer.js

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

Tôi có bộ đếm thời gian thi mất một khoảng thời gian cho bài kiểm tra từ giá trị mysql . Bộ hẹn giờ bắt đầu tương ứng nhưng nó dừng khi tôi đặt mã vào để vô hiệu hóa nút quay lại. Vấn đề của tôi là gì?

javascript browser

— Cưa Akshay
nguồn

cho nútJS phát hiện và dừng sự kiện nút quay lại của trình duyệt

— Darshan Dixit

157

Có nhiều lý do tại sao vô hiệu hóa nút quay lại sẽ không thực sự hoạt động. Đặt cược tốt nhất của bạn là để cảnh báo người dùng:

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

Trang này liệt kê một số cách bạn có thể cố gắng vô hiệu hóa nút quay lại, nhưng không có cách nào được đảm bảo:

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

— ColinE
nguồn

Bạn nên kiểm tra mã PHP của mình nếu câu trả lời đã được gửi và nếu có thì từ chối nó.

— Sela Yair

4

Điều đáng nói là mọi thứ giờ đã thay đổi trong các trình duyệt hiện đại: xem stackoverflow.com/questions/19926641/

— mẹo

126

Nó thường là một ý tưởng tồi ghi đè lên hành vi mặc định của trình duyệt web. Kịch bản phía máy khách không có đủ đặc quyền để làm điều này vì lý do bảo mật.

Có một vài câu hỏi tương tự như vậy,

Bạn thực sự không thể vô hiệu hóa nút quay lại của trình duyệt. Tuy nhiên, bạn có thể thực hiện phép thuật bằng cách sử dụng logic của mình để ngăn người dùng điều hướng trở lại, điều này sẽ tạo ra một ấn tượng giống như nó bị vô hiệu hóa. Dưới đây là cách thực hiện, kiểm tra đoạn mã sau.

(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);

Đây là JavaScript thuần túy nên nó sẽ hoạt động trong hầu hết các trình duyệt. Nó cũng sẽ vô hiệu hóa phím backspace nhưng khóa sẽ hoạt động bình thường bên trong inputcác trường và textarea.

Thiết lập đề xuất:

Đặt đoạn mã này vào một tập lệnh riêng biệt và đưa nó vào một trang nơi bạn muốn thực hiện hành vi này. Trong thiết lập hiện tại, nó sẽ thực thi onloadsự kiện DOM là điểm nhập cảnh lý tưởng cho mã này.

Làm việc DEMO!

Đã thử nghiệm và xác minh trong các trình duyệt sau,

Trình duyệt Chrome.
Firefox.
IE (8-11) và Cạnh.
Safari.

— Rohit416
nguồn

1

Tôi không hiểu tại sao setTimeout. Nếu tôi chỉ ban đầu nối thêm #! để định vị và xóa setTimeout, nó vẫn hoạt động.

— baraber

đúng vậy, nó sẽ hoạt động, nhưng nếu tôi phải nhớ lại thứ gì đó từ bộ nhớ khi tôi có cái này ở nơi đầu tiên ... thì dòng chảy không hoạt động chính xác trong chrome như trong các trình duyệt khác. Chrome đã trả lại sản phẩm trống location.hashban đầu để nó khiến tôi phải làm như thế này. Có thể cải thiện nhiều hơn cho điều này nhưng 50 ms chỉ một lần không làm tôi tốn nhiều tiền nên tôi để nó ở đó.

— Rohit416

Ồ, đó là một thử thách về trí nhớ, cảm ơn bạn :) Tôi đã sử dụng giải pháp của bạn, nhưng đã thay thế setInterval bằng trình xử lý .onhashchange. Hoạt động hoàn hảo. Nhưng tôi có một câu hỏi khác: Tại sao "if (global.location.hash! = _Hash)"? Tôi nghĩ điều kiện này chỉ có thể đúng mọi lúc vì window.location.hash phải luôn trả về hàm băm với ký tự '#' và _hash sẽ không bao giờ chứa caracter '#'. Bạn có nhớ bất cứ điều gì về điều đó? Có phải đó chỉ là một sự bảo vệ trong trường hợp trình duyệt không trả về char '#' trong location.hash?

— baraber

Tôi đã tạo tệp .js theo khuyến nghị và bao gồm tệp js trong mã của mình bằng cách sử dụng như sau: <script src = "./ javascript / noback.js"> </ script> Nhưng tôi vẫn có thể thực hiện quay lại (sử dụng Safari). Tôi đang thiếu gì? Thư viện này đã được thêm vào theo cách tương tự như các thư viện khác mà tôi sử dụng, vì vậy bao gồm là tốt.

— Tim

1

Nút chặn khối trên ipad air, ios 8

— plugincontainer

75

Tôi đã bắt gặp điều này, cần một giải pháp hoạt động chính xác và "độc đáo" trên nhiều trình duyệt khác nhau, bao gồm cả Mobile Safari (iOS9 tại thời điểm đăng). Không có giải pháp nào là hoàn toàn đúng. Tôi cung cấp các mục sau (đã thử nghiệm trên IE11, FireFox, Chrome & Safari):

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

Lưu ý những điều dưới đây:

history.forward()(giải pháp cũ của tôi) không hoạt động trên Mobile Safari --- dường như không làm gì cả (tức là người dùng vẫn có thể quay lại). history.pushState()không làm việc trên tất cả chúng.
đối số thứ 3 history.pushState()là một url . Các giải pháp vượt qua một chuỗi như 'no-back-button'hoặc 'pagename'có vẻ hoạt động tốt, cho đến khi bạn thử Làm mới / Tải lại trên trang, tại thời điểm đó, lỗi "Không tìm thấy trang" được tạo khi trình duyệt cố định vị một trang với Url của nó. (Trình duyệt cũng có thể bao gồm chuỗi đó trong thanh địa chỉ khi trên trang xấu, location.hrefnên được sử dụng cho Url.
đối số thứ 2 history.pushState()là một tiêu đề . Nhìn trên web hầu hết các địa điểm đều nói rằng nó "không được sử dụng" và tất cả các giải pháp ở đây đều vượt qua nullđiều đó. Tuy nhiên, trong Mobile Safari ít nhất, điều đó đặt Url của trang vào danh sách lịch sử mà người dùng có thể truy cập. Nhưng khi nó thêm một mục cho một lần truy cập trang bình thường, nó đặt trong tiêu đề của nó , đó là thích hợp hơn. Vì vậy, vượt qua document.titlecho kết quả đó trong hành vi tương tự.

— JonBrave
nguồn

3

Đây là câu trả lời chính xác. Hoạt động hoàn hảo trên Chrome, IE 11, Firefox và Edge.

— Concept211

3

Đây phải là câu trả lời được chấp nhận, đó là nền tảng chéo và chỉ hoạt động tốt.

— calbertts

trong jsp Sevlet Sau khi gửi tôi làm mới trang. trang không hiển thị (lỗi)

— Madhuka Dilhan

Giải pháp tốt nhất cho đến nay, nhưng có lẽ không hoạt động trong các trình duyệt cũ hơn

— j4n7

2

Giải pháp hoàn hảo cho các trình duyệt hiện đại. Tôi đã kết hợp với câu trả lời @ Rohit416 để hỗ trợ trình duyệt cũ hơn chỉ bằng cách sử dụng type typeof (history.pushState) === "function" hoạt động trơn tru.

— 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>

— vrf ghi
nguồn

3

Thiên tài! Tôi đã sử dụng điều này để ngăn việc vô tình kích hoạt nút Quay lại khi người dùng nhấn Backspace (chẳng hạn trên các trường bị vô hiệu hóa / chỉ đọc) trong một ứng dụng web, nơi mà việc lùi / tiến không thực sự có ý nghĩa. Xác nhận vô hiệu hóa chức năng quay lại và chuyển tiếp (tho không phải các nút), bao gồm tùy chọn menu ngữ cảnh; đã xác minh trong IE8 thông qua IE11, Chrome & FF.

— gì cần thiết

1

Điều này hoạt động, nhưng đặt lại tất cả dữ liệu được nhập trong hộp văn bản. Có thể ngăn chặn thanh toán bù trừ?

— Somnium

6

Nó hoạt động với tôi trên firefox, nhưng không phải trên chrome (phiên bản 36.0.1985.143)

— baraber

Điều này cũng làm việc cho tôi, nhưng trên Firefox nó dường như phá vỡ window.history.back()chức năng. Chúng tôi muốn ngăn người dùng nhấp vào nút quay lại của trình duyệt, nhưng trong một số trường hợp, chúng tôi cung cấp nút quay lại của chính chúng tôi trên trang. Có cách nào để làm cho nó hoạt động?

— AsoodAsItGets

1

Điều này không làm việc cho tôi. Tôi đang sử dụng Chrome phiên bản 55 trên Windows 10. Tôi đặt tập lệnh ở một số vị trí (bắt đầu tiêu đề, cuối thân, v.v.) và tôi vẫn có thể sử dụng nút quay lại để quay lại trang trước.

— Victor Stoddard

28

Mã này sẽ vô hiệu hóa nút quay lại cho các trình duyệt hiện đại hỗ trợ API Lịch sử HTML5. Trong trường hợp bình thường, nhấn nút quay lại lùi một bước, đến trang trước. Nếu bạn sử dụng history.pushState (), bạn bắt đầu thêm các bước phụ vào trang hiện tại. Cách thức hoạt động của nó là, nếu bạn đã sử dụng history.pushState () ba lần, sau đó bắt đầu nhấn nút quay lại, ba lần đầu tiên nó sẽ điều hướng trở lại trong các bước phụ này và sau đó lần thứ tư nó sẽ quay trở lại trang trước.

Nếu bạn kết hợp hành vi này với người nghe sự kiện trong popstatesự kiện, về cơ bản bạn có thể thiết lập một vòng lặp vô hạn của các trạng thái phụ. Vì vậy, bạn tải trang, ấn trạng thái phụ, sau đó nhấn nút quay lại, bật trạng thái phụ và cũng đẩy một trạng thái khác, vì vậy nếu bạn nhấn nút quay lại, nó sẽ không bao giờ hết trạng thái phụ để đẩy . Nếu bạn cảm thấy cần phải tắt nút quay lại, điều này sẽ đưa bạn đến đó.

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

— Jeremy Warne
nguồn

2

Trên bất kỳ trình duyệt nào, hãy thử làm mới / Tải lại trang sau đó và bạn sẽ bị kẹt với lỗi "Không tìm thấy trang", vì nó cố gắng tìm một trang có tên no-back-button... (Trình duyệt cũng có khả năng hiển thị no-back-buttontrong địa chỉ thanh quá, có vẻ xấu.) Công bằng mà nói, đây không phải là giải pháp duy nhất ở đây phải chịu đựng điều này. Đối số thứ 3 history.pushState()là một url và phải là url của trang hiện tại của bạn: sử dụng location.hrefthay thế.

— JonBrave

4

Điều này làm việc cho tôi. Chỉ cần thay đổi 'nút không quay lại' thành "window.top.location.pathname + window.top.location.search" và nó sẽ giữ nguyên tên của trang bạn đang truy cập, ngay cả khi được làm mới

— Steve

Trong số những người khác, điều này làm việc cho tôi, upvote. Tham khảo stackoverflow.com/questions/19926641/ .

— user2171669

Tôi đã khám phá nhiều trường hợp và đây là giải pháp tốt nhất cho trang web 1 trang

— djdance

Đây là một giải pháp rất tệ vì bạn đang thay đổi URL, vì vậy nếu bạn nhấn lại và chuyển tiếp một vài lần chrome sẽ chuyển hướng đến một con đường không tồn tại

— Tallboy

21

Đối với sự kiện Hạn chế trình duyệt trở lại

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

— Fezal halai
nguồn

1

Điều này hoạt động rất tốt trên chrome!, Tại sao mọi người không bỏ phiếu vì đây là câu trả lời tốt nhất?

— Tarık Seyceri

1

Tôi vừa thử nghiệm nó bằng HĐH Windows 10 trên các trình duyệt sau (hoạt động tuyệt vời) Chrome Phiên bản 74.0.3729.108 (Bản dựng chính thức) (64-bit) Chrome Canary Phiên bản 76.0.3780.0 (Bản dựng chính thức) phiên bản Chromium (32-bit) Chromium Phiên bản 66.0. 3355.0 (Bản dựng dành cho nhà phát triển) (64-bit) Firefox 66.0.3 (64-bit) EDGE IE 11 Safari 5.1.7

— Tarık Seyceri

2

@ TarıkSeyceri vì điều này chỉ hoạt động trên các trình duyệt a) hỗ trợ API lịch sử b) trang thực sự đang sử dụng API lịch sử để quản lý trạng thái

— givanse

Không hoạt động nữa trong Chrome sau Phiên bản 75. Xem: support.google.com/chrom/thread/8721521?hl=vi

— gen b.

13

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

— Tiếng Anh Mahmoud El Torri
nguồn

12

Mặc dù đây có thể là một câu trả lời hợp lệ, nhưng bạn có nhiều khả năng giúp đỡ người khác bằng cách giải thích những gì mã làm và cách thức hoạt động của nó. Các câu trả lời chỉ có mã có xu hướng nhận được ít sự chú ý tích cực hơn và không hữu ích như các câu trả lời khác.

— Aurora0001

Đã thử nghiệm trên Chrome, Firefox, IE và Edge. Nó hoạt động tốt. Bạn đã cứu tôi.

— Nooovice Boooy

12

Đây là cách tôi có thể hoàn thành nó. Thay đổi kỳ lạ window.location không hoạt động tốt trong chrome và safari. Xảy ra rằng location.hash không tạo ra một mục trong lịch sử cho chrome và safari. Vì vậy, bạn sẽ phải sử dụng đẩy. Điều này làm việc cho tôi trong tất cả các trình duyệt.

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

    };

— Chè
nguồn

1

Điều đó không hoạt động trong IE9 trở xuống, PushState không được hỗ trợ.

— Alex

Tuyệt quá. Đây là một cách tiếp cận tốt và hoạt động trong hầu hết các trình duyệt mới nhất.

— Venugopal M

1

Hoạt động tuyệt vời trong IE sau này. Chỉ cần đặt trực tiếp vào tài liệu. Đã: $(document).ready(function () { .... });

— Phong cách Oppa Gingham

Hãy nhớ rằng bạn phải thêm uri hiện tại của mình trước khi "#nbb". tức là "tài khoản # 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
nguồn

Có một số tài liệu ở đâu đó cho event.persisted?

— Muhd

1

Đây là liên kết tìm thấy cho câu hỏi của bạn. Tìm nó ở đây @Muhd

— rbashish

Tôi mới thử cái này, không hoạt động

— Pedro Joaquín

8

Bài viết này trên jordanhollinger.com là lựa chọn tốt nhất tôi cảm thấy. Tương tự như câu trả lời của dao cạo nhưng rõ ràng hơn một chút. Mã dưới đây; tín dụng đầy đủ cho Jordan Hollinger:

Trang trước:

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

Trang không trả về 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
nguồn

8

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

Javascript này không cho phép bất kỳ người dùng nào quay lại (hoạt động trong Chrome, FF, IE, Edge)

— Surajit Mitra
nguồn

5

Hãy thử nó một cách dễ dàng:

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

— Lakhan
nguồn

5

Mã này đã được thử nghiệm với các trình duyệt Chrome và Firefox mới nhất.

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

— Franklin vô tội F
nguồn

Chào mừng bạn.

— Franklin vô tội F

3

Chức năng rất đơn giản và sạch sẽ để phá vỡ mũi tên lùi mà không can thiệp vào trang sau đó.

Những lợi ích:

Tải tức thời và khôi phục hàm băm gốc, do đó người dùng không bị phân tâm bởi URL thay đổi rõ rệt.
Người dùng vẫn có thể thoát bằng cách nhấn lại 10 lần (đó là một điều tốt) nhưng không phải vô tình
Không có sự can thiệp của người dùng như các giải pháp khác sử dụng onbeforeunload
Nó chỉ chạy một lần và không can thiệp vào các thao tác băm tiếp theo trong trường hợp bạn sử dụng nó để theo dõi trạng thái
Phục hồi băm ban đầu, vì vậy gần như vô hình.
Sử dụng setIntervalđể nó không phá vỡ các trình duyệt chậm và luôn hoạt động.
Javascript thuần túy, không yêu cầu lịch sử HTML5, hoạt động ở mọi nơi.
Không khó chịu, đơn giản và chơi tốt với các mã khác.
Không sử dụng unbeforeunloadmà ngắt người dùng với hộp thoại phương thức.
Nó chỉ hoạt động mà không phiền phức.

Lưu ý: một số giải pháp khác sử dụng onbeforeunload. Vui lòng không sử dụng onbeforeunloadcho mục đích này, bật lên hộp thoại bất cứ khi nào người dùng cố gắng đóng cửa sổ, nhấn backarrow, v.v. Các phương thức như onbeforeunloadthường chỉ thích hợp trong các trường hợp hiếm gặp, chẳng hạn như khi họ thực sự thay đổi trên màn hình và thiên đường T đã cứu họ, không vì mục đích này.

Làm thế nào nó hoạt động

Thực thi khi tải trang
Lưu hàm băm ban đầu của bạn (nếu có trong URL).
Tuần tự nối # / noop / {1..10} vào hàm băm
Khôi phục hàm băm ban đầu

Đó là nó. Không có sự lộn xộn xung quanh, không có giám sát sự kiện nền, không có gì khác.

Sử dụng nó trong một giây

Để triển khai, chỉ cần thêm phần này vào bất cứ đâu trên trang của bạn hoặc trong JS của bạn:

<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>

— lỗi nghiêm trọng
nguồn

2

Điều này dường như đã làm việc cho chúng tôi trong việc vô hiệu hóa nút quay lại trên trình duyệt, cũng như nút backspace đưa bạn trở lại.

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

— thỏ
nguồn

1

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

— người dùng3789888
nguồn

1

Bạn chỉ đơn giản là không thể và không nên làm điều này. Tuy nhiên, nhưng điều này có thể hữu ích

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

Hoạt động trong chrome và firefox của tôi

— Shailendra Sharma
nguồn

1

Hãy thử điều này để ngăn nút backspace trong IE mà theo mặc định đóng vai trò là "Quay lại":

<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>

— Ajit Kamble
nguồn

1

Tôi tin rằng giải pháp hoàn hảo nhưng thực sự khá đơn giản, mà tôi đã sử dụng trong nhiều năm nay.

Về cơ bản, nó chỉ định sự kiện "onb Beforeunload" của cửa sổ cùng với các sự kiện 'mouseenter' / 'mouseleave' của tài liệu đang diễn ra để cảnh báo chỉ kích hoạt khi các nhấp chuột nằm ngoài phạm vi tài liệu (sau đó có thể là nút quay lại hoặc chuyển tiếp của trình duyệt)

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

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

— Abdelqoddous Rifai
nguồn

1

Trong một trình duyệt hiện đại, điều này dường như hoạt động:

// 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
nguồn

1

Không chắc chắn những gì đã xảy ra, nhưng vì một số lý do, tôi đã đánh giá thấp câu trả lời này trên một máy khác. Chỉ cần cho bạn biết đây không phải là ý định của tôi, nhưng tôi không thể hoàn tác bỏ phiếu nữa: /

— Lennard Fonteijn

Không có cảm xúc nào bị tổn thương @LennardFonteijn :)

— Joakim L. Christiansen

1

Không có câu trả lời nào được đánh giá cao nhất có hiệu quả với tôi trong Chrome 79 . Có vẻ như Chrome đã thay đổi hành vi của mình đối với nút Quay lại sau Phiên bản 75, xem tại đây:

https://support.google.com/chrom/thread/8721521?hl=vi

Tuy nhiên, trong chủ đề Google đó, câu trả lời được cung cấp bởi Azrulmukmin Azmi vào cuối đã làm việc. Đây là giải pháp của anh ấy.

<script>

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

</script>

Vấn đề với Chrome là nó không kích hoạt sự kiện onpopstate trừ khi bạn thực hiện hành động của trình duyệt (tức là gọi history.back). Đó là lý do tại sao tôi đã thêm chúng vào kịch bản.

Tôi hoàn toàn không hiểu những gì anh ấy đã viết, nhưng dường như cần thêm một phần bổ sung history.back() / history.forward()để chặn Back trong Chrome 75+.

— gen b.
nguồn

Sau khi tìm kiếm cao & thấp, cuối cùng nó cũng hoạt động trên trình duyệt Android, vì lý do nào đó, sự kiện nút quay lại của trình duyệt không được phát hiện với bất kỳ tập lệnh nào khác mà tôi đã thử. Cảm ơn bạn, cảm ơn bạn, cảm ơn bạn một lần nữa! Đã thử nghiệm và hoạt động tốt trong Chrome 83 cả máy tính để bàn và thiết bị di động! Gene, bạn là một phao cứu sinh!

— Ivan

0

Tôi tạo một trang HTML (index.html). Tôi cũng tạo một (cơ chế) trong thư mục / thư mục (script). Sau đó, tôi đặt tất cả nội dung của mình vào bên trong (index.html) bằng cách sử dụng biểu mẫu, bảng, nhịp và thẻ div khi cần. Bây giờ, đây là mẹo giúp quay lại / chuyển tiếp không làm gì cả!

Đầu tiên, thực tế là bạn chỉ có một trang! Thứ hai, việc sử dụng JavaScript với các thẻ span / div để ẩn và hiển thị nội dung trên cùng một trang khi cần thông qua các liên kết thông thường!

Bên trong '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>

Bên trong 'cơ chế.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;
    }

Nó trông có lông, nhưng lưu ý các tên hàm và cuộc gọi, HTML nhúng và các lệnh gọi thẻ span. Điều này là để cho thấy cách bạn có thể đưa các HTML khác nhau vào cùng một thẻ span trên cùng một trang! Làm thế nào Back / Forward có thể ảnh hưởng đến thiết kế này? Không thể, bởi vì bạn đang ẩn các đối tượng và thay thế tất cả những người khác trên cùng một trang!

Làm thế nào để ẩn và hiển thị? Ở đây đi: Các hàm bên trong trong 'Mechan.js' khi cần, sử dụng:

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

Bên trong các hàm gọi 'index.html' thông qua các liên kết:

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

và

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

Tôi hy vọng tôi đã không làm bạn đau đầu. Xin lỗi nếu tôi đã làm :-)

— tin tặc1033
nguồn

0

Trong trường hợp của tôi đây là một đơn đặt hàng mua sắm. Vì vậy, những gì tôi đã làm là vô hiệu hóa nút. Khi người dùng nhấp lại, nút vẫn bị vô hiệu hóa. Khi họ nhấp lại một lần nữa, và sau đó nhấp vào nút trang để tiếp tục. Tôi biết đơn đặt hàng của họ đã được gửi và bỏ qua một trang khác.

Trong trường hợp khi trang thực sự được làm mới sẽ làm cho nút (về mặt lý thuyết), có sẵn; Sau đó tôi đã có thể phản ứng trong tải trang rằng đơn hàng đã được gửi và sau đó cũng chuyển hướng.

— Vali
nguồn

0

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

— Thịt
nguồn

3

1. javascript:Bạn đã viết định nghĩa nhãn JavaScript có tên là "javascript". Tôi rất nghi ngờ bạn dự định rằng; Tôi nghi ngờ bạn đang trộn lẫn href=javascript:...với <script>các khối JavaScript . 2. language="JavaScript"ngừng là một <script>thuộc tính hợp lệ tại HTML5. 3. 2 điểm trên không quan trọng lắm; Vấn đề là history.forward(1)nó không hoạt động trong Mobile Safari (ít nhất). Sử dụng một trong những history.pushState()câu trả lời thay thế.

— JonBrave

0

Bạn chỉ có thể đặt một kịch bản nhỏ và sau đó kiểm tra. Nó sẽ không cho phép bạn truy cập trang trước. Điều này được thực hiện trong javascript.

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

Hàm window.onunload sẽ kích hoạt khi bạn cố truy cập lại hoặc trang trước thông qua trình duyệt.

Hi vọng điêu nay co ich.

— người lập trình
nguồn

0

Tôi đã có vấn đề này với React.JS. (thành phần lớp)

Và giải quyết dễ dàng

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

Tôi đã sử dụng HashRoutertừ react-router-dom.

— Ôi
nguồn

0

Chỉ cần đặt location.hash="Something", Khi nhấn nút quay lại, hàm băm sẽ bị xóa khỏi url nhưng trang sẽ không quay lại, Phương pháp này rất tốt để ngăn chặn việc quay lại vô tình, nhưng vì mục đích bảo mật, bạn nên thiết kế phần phụ trợ của mình để ngăn trả lời lại

— Abhishek
nguồn

-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.Zong
nguồn

1 lấy đối tượng sự kiện 2. để xác định loại nguồn sự kiện, làm điều kiện phán đoán. 3. Khi nhấn Backspace, loại nguồn sự kiện cho mật khẩu hoặc đơn và thuộc tính chỉ đọc thành thuộc tính đúng hoặc được bật là sai, thì lỗi phím lùi. Khi nhấn Backspace, nguồn của sự kiện gõ mật khẩu hoặc đơn, là lỗi phím backspace

— Chauncey.Zhong

Câu hỏi là hỏi về việc sử dụng Nút điều hướng quay lại chứ không phải phím phím lùi.

— Quentin