cara menghentikan tombol kembali browser menggunakan javascript

155

Saya sedang melakukan aplikasi kuis online di php. Saya ingin membatasi pengguna agar tidak kembali dalam ujian. Saya telah mencoba skrip berikut tetapi ini menghentikan timer saya. Apa yang harus saya lakukan?

Saya telah memasukkan kode sumber. Timer disimpan di cdtimer.js

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

Saya memiliki penghitung waktu ujian yang membutuhkan waktu untuk ujian dari nilai mysql . Timer mulai sesuai tetapi berhenti ketika saya memasukkan kode untuk menonaktifkan tombol kembali. Apa masalah saya

javascript  browser 
— Sawant Akshay
sumber
— Darshan Dixit

Jawaban:

157

Ada banyak alasan mengapa menonaktifkan tombol kembali tidak akan berfungsi. Taruhan terbaik Anda adalah untuk memperingatkan pengguna:

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

Halaman ini mencantumkan sejumlah cara yang dapat Anda coba untuk menonaktifkan tombol kembali, tetapi tidak ada yang dijamin:

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

— ColinE
sumber
Anda harus memeriksa kode PHP Anda jika jawabannya sudah dikirimkan dan jika demikian tolak.
— Sela Yair
4
Perlu disebutkan bahwa hal-hal sekarang telah berubah di browser modern: lihat stackoverflow.com/questions/19926641/…
— devrobf
126

Ini umumnya merupakan ide yang buruk menimpa perilaku default browser web. Skrip sisi klien tidak memiliki hak istimewa yang memadai untuk melakukan ini karena alasan keamanan.

Ada beberapa pertanyaan serupa yang diajukan juga,

Anda tidak dapat benar - benar menonaktifkan tombol kembali browser. Namun Anda dapat melakukan sihir menggunakan logika Anda untuk mencegah pengguna menavigasi kembali yang akan membuat kesan seperti itu dinonaktifkan. Begini caranya, lihat cuplikan berikut.

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

Ini murni JavaScript sehingga akan berfungsi di sebagian besar browser. Ini juga akan menonaktifkan tombol backspace tetapi kunci akan bekerja secara normal di dalam inputbidang dan textarea.

Pengaturan yang disarankan:

Tempatkan cuplikan ini di skrip terpisah dan sertakan di halaman tempat Anda menginginkan perilaku ini. Dalam pengaturan saat ini akan menjalankan onloadacara DOM yang merupakan titik masuk yang ideal untuk kode ini.

DEMO yang berhasil!

Diuji dan diverifikasi di browser berikut,

  • Chrome.
  • Firefox.
  • IE (8-11) dan Edge.
  • Safari.
— Rohit416
sumber
1
Saya tidak mengerti mengapa setTimeout. Jika saya awalnya menambahkan #! ke lokasi dan menghapus setTimeout, itu masih berfungsi.
— baraber
ya benar, itu akan berhasil, tetapi saya jika saya harus mengingat sesuatu dari memori ketika saya memiliki ini di tempat pertama ... aliran tidak bekerja dengan benar di chrome seperti di browser lain. Chrome mengembalikan yang kosong location.hashpada awalnya sehingga membuat saya melakukannya seperti ini. Mungkin ada lebih banyak perbaikan untuk ini tetapi 50 ms sekali saja tidak menghabiskan banyak biaya jadi saya meninggalkannya di sana.
— Rohit416
Oh, itu adalah tantangan memori, terima kasih :) Saya menggunakan solusi Anda, tetapi mengganti setInterval oleh .onhashchange handler. Bekerja dengan sempurna. Tapi saya punya pertanyaan lain: Mengapa "jika (global.location.hash! = _Hash)"? Saya pikir kondisi ini hanya bisa benar setiap saat karena window.location.hash harus selalu mengembalikan hash dengan karakter '#' dan _hash tidak akan pernah mengandung karakter '#'. Apakah Anda ingat sesuatu tentang itu? Apakah itu hanya perlindungan jika browser tidak mengembalikan karakter '#' di location.hash?
— baraber
Saya membuat file .js seperti yang disarankan dan memasukkan file js dalam kode saya menggunakan yang berikut: <script src = "./ javascript / noback.js"> </script> Tapi saya masih bisa melakukan back (menggunakan Safari). Apa yang saya lewatkan? Perpustakaan ini ditambahkan dengan cara yang sama seperti perpustakaan lain yang saya gunakan, jadi isinya bagus.
— Tim
1
Memblokir tombol kembali di ipad air, ios 8
— plugincontainer
75

Saya menemukan ini, membutuhkan solusi yang bekerja dengan benar dan "baik" pada berbagai browser, termasuk Mobile Safari (iOS9 pada saat posting). Tidak ada solusi yang benar. Saya menawarkan yang berikut (diuji pada IE11, FireFox, Chrome & Safari):

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

Perhatikan yang berikut ini:

  • history.forward()(solusi lama saya) tidak berfungsi di Mobile Safari --- tampaknya tidak melakukan apa-apa (yaitu pengguna masih dapat kembali). history.pushState()tidak bekerja pada mereka semua.
  • argumen ke-3 history.pushState()adalah url . Solusi yang lulus string seperti 'no-back-button'atau 'pagename'tampaknya berfungsi OK, sampai Anda kemudian mencoba Refresh / Muat ulang halaman, di mana titik "Halaman tidak ditemukan" kesalahan dihasilkan ketika browser mencoba untuk menemukan halaman dengan itu sebagai Url-nya. (Peramban juga cenderung menyertakan string itu di bilah alamat saat berada di laman, yang jelek.) location.hrefHarus digunakan untuk Url.
  • argumen ke-2 history.pushState()adalah judul . Melihat-lihat web kebanyakan tempat mengatakan itu "tidak digunakan", dan semua solusi di sini berlaku nulluntuk itu. Namun, setidaknya di Mobile Safari, yang menempatkan Url halaman ke dalam dropdown riwayat yang dapat diakses pengguna. Tetapi ketika ia menambahkan entri untuk kunjungan halaman secara normal, ia memasukkan judulnya , yang lebih disukai. Jadi lulus document.titleuntuk itu menghasilkan perilaku yang sama.
— JonBrave
sumber
3
Ini jawaban yang benar. Berfungsi sempurna di Chrome, IE 11, Firefox dan Edge.
— Concept211
3
Ini harus menjadi jawaban yang diterima, itu lintas platform dan berfungsi dengan baik.
— calbertts
di jsp sevlet Setelah mengirim saya menyegarkan halaman. halaman tidak ditampilkan (kesalahan)
— Madhuka Dilhan
Solusi terbaik sejauh ini, tetapi mungkin tidak bekerja di browser yang lebih lama
— j4n7
2
Solusi sempurna untuk peramban modern. Saya telah dikombinasikan dengan jawaban @ Rohit416 untuk mendukung browser yang lebih lama hanya menggunakan kondisi typeof (history.pushState) === "function" berfungsi dengan baik.
— 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
sumber
3
Jenius! Saya menggunakan ini untuk mencegah pemicu tombol Back yang tidak disengaja ketika pengguna menekan Backspace (misalnya pada bidang yang dinonaktifkan / hanya baca) di aplikasi web di mana back / forward tidak benar-benar masuk akal. Dikonfirmasi menonaktifkan fungsionalitas maju dan mundur (bukan tombol itu sendiri), termasuk opsi menu konteks; diverifikasi di IE8 melalui IE11, Chrome & FF.
— nothingisnecessary
1
Ini berfungsi, tetapi mengatur ulang semua data yang dimasukkan dalam kotak teks. Apakah mungkin untuk mencegah pembukaan lahan?
— Somnium
6
Ini bekerja untuk saya pada firefox, tetapi tidak pada chrome (versi 36.0.1985.143)
— baraber
Ini bekerja untuk saya juga, tetapi di Firefox sepertinya merusak window.history.back()fungsinya. Kami ingin mencegah pengguna mengklik tombol kembali browser, tetapi dalam beberapa kasus kami menyediakan tombol kembali kami sendiri di halaman. Apakah ada cara untuk membuatnya bekerja?
— AsGoodAsItGets
1
Ini tidak berhasil untuk saya. Saya menggunakan Chrome versi 55 di Windows 10. Saya meletakkan script di beberapa tempat (mulai dari header, end of body, dll.) Dan saya masih bisa menggunakan tombol kembali untuk kembali ke halaman sebelumnya.
— Victor Stoddard
28

Kode ini akan menonaktifkan tombol kembali untuk browser modern yang mendukung API Sejarah HTML5. Dalam keadaan normal, menekan tombol kembali mundur satu langkah, ke halaman sebelumnya. Jika Anda menggunakan history.pushState (), Anda mulai menambahkan sub-langkah tambahan ke halaman saat ini. Cara kerjanya adalah, jika Anda menggunakan history.pushState () tiga kali, kemudian mulai menekan tombol kembali, tiga kali pertama itu akan menavigasi kembali dalam sub-langkah ini, dan kemudian keempat kalinya akan kembali ke halaman sebelumnya.

Jika Anda menggabungkan perilaku ini dengan pendengar acara pada popstateacara tersebut, Anda pada dasarnya dapat mengatur loop tak terbatas dari sub-kondisi. Jadi, Anda memuat halaman, menekan negara bagian, lalu tekan tombol kembali, yang muncul negara bagian dan juga mendorong yang lain, jadi jika Anda menekan tombol kembali lagi tidak akan pernah kehabisan negara bagian untuk menekan . Jika Anda merasa perlu untuk menonaktifkan tombol kembali, ini akan membawa Anda ke sana.

history.pushState(null, null, 'no-back-button');
window.addEventListener('popstate', function(event) {
  history.pushState(null, null, 'no-back-button');
});
— Jeremy Warne
sumber
2
Pada browser apa pun, coba halaman Refresh / Reload setelah ini, dan Anda akan terjebak pada kesalahan "Halaman tidak ditemukan", karena mencoba untuk menemukan halaman bernama no-back-button... (Browser juga kemungkinan akan ditampilkan no-back-buttondi alamat bar juga, yang tampaknya jelek.) Agar adil, ini bukan satu-satunya solusi di sini yang menderita ini. Argumen ke-3 history.pushState()adalah url , dan harus merupakan url dari halaman Anda saat ini: gunakan location.hrefsaja.
— JonBrave
4
Ini berhasil untuk saya. Cukup ubah 'no-back-button' ke "window.top.location.pathname + window.top.location.search" dan itu akan tetap menjadi nama halaman yang Anda buka, bahkan dalam penyegaran
— Steve
Di antara yang lain, ini bekerja untuk saya, upvote. Rujuk ke stackoverflow.com/questions/19926641/… .
— user2171669
Saya telah menjelajahi banyak kasus, dan ini adalah solusi terbaik untuk situs 1 halaman
— djdance
Ini adalah solusi yang sangat buruk karena Anda mengubah URL, jadi jika Anda menekan mundur dan maju beberapa kali chrome akan mengarahkan ulang ke jalur yang tidak ada
— Tallboy
21

Untuk acara Batasi kembali Browser

window.history.pushState(null, "", window.location.href);
window.onpopstate = function () {
    window.history.pushState(null, "", window.location.href);
};
— Fezal halai
sumber
1
Ini berfungsi baik di chrome !, mengapa orang tidak memberikan suara karena ini adalah jawaban terbaik?
— Tarık Seyceri
1
saya baru saja mengujinya menggunakan OS Windows 10 pada browser berikut (berfungsi dengan baik) Versi Chrome 74.0.3729.108 (Pembuatan Resmi) (64-bit) Versi Canary Chrome 76.0.3780.0 (Kenari Resmi) kenari (32-bit) Versi Chromium 66.0. 3355.0 (Build Developer) (64-bit) Firefox 66.0.3 (64-bit) EDGE IE 11 Safari 5.1.7
— Tarık Seyceri
2
@ TarıkSeyceri karena ini hanya berfungsi pada browser yang a) mendukung API riwayat b) halaman sebenarnya menggunakan API riwayat untuk mengelola negara
— givanse
Tidak berfungsi lagi di Chrome setelah Versi 75. Lihat: support.google.com/chrome/thread/8721521?hl=id
— gen b.
13 

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

— Eng Mahmoud El Torri
sumber
12
Meskipun ini mungkin jawaban yang valid, Anda lebih mungkin membantu orang lain dengan menjelaskan apa yang dilakukan kode dan cara kerjanya. Jawaban khusus kode cenderung kurang mendapat perhatian positif dan tidak berguna seperti jawaban lainnya.
— Aurora0001
Diuji pada Chrome, Firefox, IE dan Edge. Ini bekerja dengan baik. Kamu menyelamatkanku.
— Nooovice Boooy
12

Ini adalah cara saya dapat mencapainya. Anehnya mengubah jendela. Lokasi tidak bekerja dengan baik di chrome dan safari. Terjadi bahwa location.hash tidak membuat entri dalam riwayat untuk chrome dan safari. Jadi, Anda harus menggunakan pushstate. Ini berfungsi untuk saya di semua browser.

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

    };
— Sanchitos
sumber
1
Itu tidak berfungsi di IE9 dan di bawah, pushState tidak didukung.
— Alex
Bagus. Ini adalah pendekatan yang baik dan berfungsi di hampir semua browser terbaru.
— Venugopal M
1
Berfungsi bagus di IE nanti. Langsung saja dimasukkan ke dalam dokumen. $(document).ready(function () { .... });
— Sudah
Ingatlah bahwa Anda harus menambahkan uri Anda saat ini sebelum "#nbb". yaitu "akun # 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
sumber
Adakah dokumentasi untuk suatu tempat event.persisted?
— Muhd
1
Inilah tautan yang ditemukan untuk pertanyaan Anda. Temukan di sini @Muhd
— rbashish
Saya baru saja mencoba yang ini, tidak berhasil
— Pedro Joaquín
8

Artikel di jordanhollinger.com ini adalah pilihan terbaik yang saya rasakan. Mirip dengan jawaban Razor tapi sedikit lebih jelas. Kode di bawah ini; kredit penuh untuk Jordan Hollinger:

Halaman sebelumnya:

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

Halaman dari JavaScript yang tidak bisa dikembalikan:

// 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
sumber
8 
history.pushState(null, null, document.URL);
window.addEventListener('popstate', function () {
    history.pushState(null, null, document.URL);
});

Javascript ini tidak memungkinkan pengguna untuk kembali (berfungsi di Chrome, FF, IE, Edge)

— Surajit Mitra
sumber
5

Cobalah dengan mudah:

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

Kode ini diuji dengan browser Chrome dan Firefox terbaru.

    <script type="text/javascript">
        history.pushState(null, null, location.href);
        history.back();
        history.forward();
        window.onpopstate = function () { history.go(1); };
    </script>
— Franklin Innocent F
sumber
Selamat datang huyhoang.
— Franklin Innocent F
3

Sangat sederhana dan fungsi bersih untuk mematahkan panah kembali tanpa mengganggu halaman sesudahnya.

Manfaat:

  • Muat secara instan dan mengembalikan hash asli, sehingga pengguna tidak terganggu oleh perubahan URL.
  • Pengguna masih dapat keluar dengan menekan kembali 10 kali (itu adalah hal yang baik) tetapi tidak secara tidak sengaja
  • Tidak ada gangguan pengguna seperti menggunakan solusi lain onbeforeunload
  • Ini hanya berjalan sekali dan tidak mengganggu manipulasi hash lebih lanjut jika Anda menggunakannya untuk melacak status
  • Mengembalikan hash asli, sehingga hampir tidak terlihat.
  • Penggunaannya setIntervalsehingga tidak merusak browser yang lambat dan selalu berfungsi.
  • Javascript murni, tidak memerlukan riwayat HTML5, berfungsi di mana saja.
  • Tidak mengganggu, sederhana, dan bermain baik dengan kode lain.
  • Tidak menggunakan unbeforeunloadyang mengganggu pengguna dengan dialog modal.
  • Itu hanya bekerja tanpa repot.

Catatan: beberapa solusi lain digunakan onbeforeunload. Tolong jangan gunakan onbeforeunloaduntuk tujuan ini, yang muncul dialog setiap kali pengguna mencoba untuk menutup jendela, tekan backarrow, dll. Moda suka onbeforeunloadbiasanya hanya sesuai dalam keadaan langka, seperti ketika mereka benar-benar telah membuat perubahan di layar dan berlindung ' t menyelamatkan mereka, bukan untuk tujuan ini.

Bagaimana itu bekerja

  1. Menjalankan pemuatan halaman
  2. Menyimpan hash asli Anda (jika ada di URL).
  3. Secara berurutan menambahkan # / noop / {1..10} ke hash
  4. Kembalikan hash asli

Itu dia. Tidak ada lagi bermain-main, tidak ada pemantauan acara latar belakang, tidak ada yang lain.

Gunakan Dalam Satu Detik

Untuk menggunakan, tambahkan saja ini di mana saja di halaman Anda atau di JS Anda:

<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>
— kesalahan fatal
sumber
2

Hal ini tampaknya berhasil bagi kami dalam menonaktifkan tombol kembali pada browser, serta tombol backspace membawa Anda kembali. 

history.pushState(null, null, $(location).attr('href'));
    window.addEventListener('popstate', function () {
        history.pushState(null, null, $(location).attr('href'));
    });
— jgabb
sumber
1 
   <script src="~/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.history.forward();
        function noBack() { window.history.forward(); } </script>
— pengguna3789888
sumber
1

Anda tidak bisa dan tidak seharusnya melakukan ini. Namun, tapi ini mungkin bisa membantu

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

Bekerja di chrome dan firefox saya

— Shailendra Sharma
sumber
1

Coba ini untuk mencegah tombol backspace di IE yang secara default bertindak sebagai "Kembali":

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

Saya percaya solusi sempurna namun sebenarnya cukup mudah, yang saya gunakan selama bertahun-tahun sekarang.

Ini pada dasarnya menetapkan acara "onbeforeunload" jendela bersama dengan acara 'mouseenter' / 'mouseleave' dokumen yang sedang berlangsung sehingga peringatan hanya terpicu ketika klik berada di luar lingkup dokumen (yang kemudian bisa menjadi tombol kembali atau maju dari browser)

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

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

Dalam peramban modern ini sepertinya berfungsi:

// 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
sumber
1
Tidak yakin apa yang terjadi, tetapi untuk beberapa alasan saya menurunkan jawaban ini di komputer lain. Hanya memberi tahu Anda bahwa ini bukan niat saya, tetapi saya tidak dapat membatalkan lagi pemungutan suara: /
— Lennard Fonteijn
Tidak ada perasaan sakit hati @LennardFonteijn :)
— Joakim L. Christiansen
1

Tidak ada jawaban yang paling banyak dipilih untuk saya di Chrome 79 . Sepertinya Chrome mengubah perilakunya sehubungan dengan tombol Kembali setelah Versi 75, lihat di sini:

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

Namun, di utas Google itu, jawaban yang diberikan oleh Azrulmukmin Azmi pada akhirnya berhasil. Ini solusinya.

<script>

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

</script>

Masalah dengan Chrome adalah bahwa hal itu tidak memicu peristiwa onpopstate kecuali Anda membuat tindakan browser (mis. Call history.back). Karena itulah saya menambahkannya ke skrip.

Saya tidak sepenuhnya mengerti apa yang ia tulis, tetapi tampaknya tambahan history.back() / history.forward()sekarang diperlukan untuk memblokir Kembali di Chrome 75+.

— gen b.
sumber
Setelah mencari tinggi & rendah ini akhirnya bekerja di browser Android juga, di mana karena alasan tertentu acara tombol kembali browser tidak terdeteksi dengan skrip lain yang saya coba. Terima kasih, terima kasih, terima kasih lagi! Diuji dan bekerja dengan baik di bawah Chrome 83 baik desktop dan seluler! Gene, kau penyelamat!
— Ivan
0

Saya membuat satu halaman HTML (index.html). Saya juga membuat satu (mekanisme.js) di dalam folder / direktori (skrip). Lalu, saya meletakkan semua konten saya di dalam (index.html) menggunakan formulir, tabel, rentang, dan tag div sesuai kebutuhan. Sekarang, inilah trik yang akan membuat back / forward tidak melakukan apa pun!

Pertama, fakta bahwa Anda hanya memiliki satu halaman! Kedua, penggunaan JavaScript dengan tag span / div untuk menyembunyikan dan menampilkan konten pada halaman yang sama saat dibutuhkan melalui tautan biasa!

Di dalam '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>

Di dalam 'mechan.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;
    }

Ini terlihat berbulu, tetapi perhatikan nama fungsi dan panggilan, HTML yang disematkan, dan panggilan id tag span. Ini untuk menunjukkan bagaimana Anda dapat menyuntikkan HTML berbeda ke tag rentang yang sama di halaman yang sama! Bagaimana Back / Forward dapat memengaruhi desain ini? Tidak bisa, karena Anda menyembunyikan benda dan mengganti yang lain di halaman yang sama!

Bagaimana cara menyembunyikan dan menampilkan? Ini dia: Fungsi di dalam 'mechan.js' sesuai kebutuhan, gunakan:

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

Di dalam fungsi panggilan 'index.html' melalui tautan:

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

dan

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

Saya harap saya tidak membuat Anda sakit kepala. Maaf jika saya lakukan :-)

— hacker1033
sumber
0

Dalam kasus saya ini adalah pesanan belanja. Jadi yang saya lakukan adalah menonaktifkan tombol. Ketika pengguna mengklik kembali, tombol itu tetap dinonaktifkan. Ketika mereka mengklik kembali sekali lagi, dan kemudian mengklik tombol halaman untuk maju. Saya tahu pesanan mereka diajukan dan dilewati ke halaman lain.

Dalam kasus ketika halaman benar-benar disegarkan yang akan membuat tombol (secara teoritis), tersedia; Saya kemudian dapat bereaksi dalam pemuatan halaman bahwa pesanan sudah dikirim dan mengarahkan juga.

— Valamas
sumber
0 
<script language="JavaScript">
    javascript:window.history.forward(1);
</script>
— Kamlesh
sumber
3
1. Label yangjavascript: Anda buat mendefinisikan label JavaScript bernama "javascript". Saya sangat meragukan Anda bermaksud demikian; Saya curiga Anda bercampur href=javascript:...dengan <script>blok JavaScript . 2. language="JavaScript"berhenti menjadi <script>atribut yang valid di HTML5. 3. 2 poin di atas tidak terlalu penting; yang penting adalah yang history.forward(1)tidak berfungsi di Mobile Safari (setidaknya). Gunakan salah satu history.pushState()jawaban saja.
— JonBrave
0

Anda cukup meletakkan skrip kecil lalu periksa. Itu tidak akan memungkinkan Anda untuk mengunjungi halaman sebelumnya. Ini dilakukan dalam javascript.

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

Fungsi window.onunload menyala ketika Anda mencoba untuk mengunjungi kembali atau halaman sebelumnya melalui browser.

Semoga ini membantu.

— noobprogrammer
sumber
0

Saya punya masalah dengan React.JS. (komponen kelas)

Dan selesaikan dengan mudah

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

Saya sudah menggunakan HashRouterdari react-router-dom.

— Oo
sumber
0

Cukup tetapkan location.hash="Something", Pada menekan tombol kembali hash akan dihapus dari url tetapi halaman tidak akan kembali, Metode ini baik untuk mencegah kembali secara tidak sengaja, tetapi untuk tujuan keamanan Anda harus merancang backend Anda untuk mencegah penjawaban ulang

— Abhishek
sumber
-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
sumber
1 mendapatkan objek acara 2. untuk menentukan jenis sumber acara, sebagai kondisi penilaian. 3. Ketika hit Backspace, jenis sumber acara untuk kata sandi atau tunggal, dan properti readonly ke properti true atau enabled adalah false, maka kunci backspace gagal. Ketika menekan Backspace, sumber acara mengetikkan kata sandi atau tunggal, adalah kegagalan kunci backspace
— Chauncey.Zhong
Pertanyaannya adalah bertanya tentang menggunakan Tombol Navigasi Kembali bukan tombol backspace.
— Quentin
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.