javascript kullanarak tarayıcı geri düğmesi nasıl durdurulur

156

Ben php bir çevrimiçi sınav uygulaması yapıyorum. Kullanıcının tekrar sınava girmesini kısıtlamak istiyorum. Aşağıdaki komut dosyasını denedim ama zamanlayıcımı durdurur. Ne yapmalıyım?

Kaynak kodunu ekledim. Zamanlayıcı cdtimer.js'de saklanır

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

Bir mysql değerinden sınav için bir süre alır sınav zamanlayıcı var . Zamanlayıcı buna göre başlar, ancak geri düğmesini devre dışı bırakmak için kodu girdiğimde durur. Benim sorunum ne?

javascript browser

— Sawant Akshay
kaynak

nodeJS için tarayıcıyı algıla ve durdur düğmesi olayı

— Darshan Dixit

157

Geri düğmesini devre dışı bırakmanın gerçekten işe yaramamasının birçok nedeni vardır. En iyi seçeneğiniz kullanıcıyı uyarmaktır:

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

Bu sayfa listesine size çeşitli yollar yapar olabilir geri düğmesini devre dışı bırakmayı deneyin ama hiçbiri garanti edilir:

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

— Coline
kaynak

Cevabın zaten gönderilmiş olup olmadığını ve reddetmişse PHP kodunuzu kontrol etmelisiniz.

— Sela Yair

4

Modern tarayıcılarda artık her şeyin değiştiğini belirtmek gerekir: bkz. Stackoverflow.com/questions/19926641/…

— devrobf

126

Web tarayıcısının varsayılan davranışını geçersiz kılmak genellikle kötü bir fikirdir. İstemci tarafı komut dosyası, güvenlik nedeniyle bunu yapmak için yeterli ayrıcalığa sahip değil.

Sorulan birkaç benzer soru var,

Sen can-değil aslında devre dışı tarayıcı geri düğmesi. Ancak, kullanıcının geri gitmesini önlemek için mantıkınızı kullanarak sihir yapabilirsiniz, bu da devre dışı bırakılmış bir izlenim yaratır. Nasıl yapacağınız aşağıda açıklanmıştır.

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

Bu saf JavaScript'te olduğundan tarayıcıların çoğunda çalışır. Ayrıca geri silme tuşunu da devre dışı bırakır, ancak anahtar inputalanlar ve içinde normal şekilde çalışır textarea.

Önerilen Kurulum:

Bu snippet'i ayrı bir komut dosyasına yerleştirin ve bu davranışı istediğiniz sayfaya ekleyin. Geçerli kurulumda onload, bu kod için ideal giriş noktası olan DOM olayını yürütür .

Çalışma DEMO!

Aşağıdaki tarayıcılarda test edildi ve doğrulandı,

Krom.
Firefox.
IE (8-11) ve Edge.
Safari.

— Rohit416
kaynak

1

SetTimeout'un neden olduğunu anlamıyorum. Başlangıçta #! setTimeout'u konumlandırmak ve kaldırmak için yine de çalışır.

— baraber

evet doğru, işe yarayacak, ama i ilk etapta bu vardı bellekten bir şey hatırlamak zorunda kalırsam ... akış diğer tarayıcılarda olduğu gibi krom düzgün çalışma değildi. Chrome location.hashbaşlangıçta boş olanı iade etti ve böylece böyle yapmamı sağladı. Bu daha fazla gelişme olabilir ama 50 ms sadece bir kez bana çok pahalı değildi, bu yüzden orada bırakın.

— Rohit416

Oh, bu bir bellek meydan okumaydı, teşekkür ederim :) Çözümünüzü kullandım, ancak setInterval'ı .onhashchange işleyicisi ile değiştirdi. Mükemmel çalışıyor. Ama yine de başka bir sorum var: Neden "if (global.location.hash! = _Hash)"? Sanırım bu durum her zaman doğru olabilir çünkü window.location.hash her zaman karmayı '#' karakteriyle döndürmelidir ve _hash asla '#' karakterini içermeyecektir. Bununla ilgili bir şey hatırlıyor musun? Tarayıcının location.hash içindeki '#' karakterini döndürmemesi durumunda bu sadece bir koruma mıdır?

— baraber

Önerilen bir .js dosyası oluşturdum ve js dosyasını aşağıdaki kodu kullanarak koduma dahil ettim: <script src = "./ javascript / noback.js"> </script> Ama yine de (Safari kullanarak) bir geri gerçekleştirebilirim. Neyi kaçırıyorum? Bu kütüphane kullandığım diğer kütüphanelerle aynı şekilde eklendi, bu yüzden içerme iyi.

— Tim

1

Ipad 8, ios 8 üzerinde geri düğmesi

— engeller

75

Mobil Safari (yayınlama sırasında iOS9) dahil olmak üzere çeşitli tarayıcılarda doğru ve "güzel" çalışan bir çözüme ihtiyaç duydum. Çözümlerin hiçbiri doğru değildi. Aşağıdakileri sunuyoruz (IE11, FireFox, Chrome ve Safari'de test edildi):

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

Aşağıdakilere dikkat et:

history.forward()(eski çözümüm) Mobile Safari'de çalışmıyor --- hiçbir şey yapmıyor gibi görünüyor (yani kullanıcı hala geri dönebilir). history.pushState()hepsi üzerinde çalışır.
3. argüman history.pushState()bir url'dir . Sayfada bir Yenile / Yeniden Yükle'yi deneyene kadar bir dizeyi geçen 'no-back-button'veya çalışıyor 'pagename'gibi görünen çözümler , tarayıcı bu URL ile bir sayfa bulmaya çalıştığında bir "Sayfa bulunamadı" hatası oluşturulur. (Tarayıcı ayrıca, sayfada çirkin olan adres çubuğuna da bu dizeyi dahil location.hrefetmelidir .) URL için kullanılmalıdır.
2. argüman history.pushState()bir başlıktır . Web'de etrafa bakıldığında çoğu yer "kullanılmadığını" söylüyor ve buradaki tüm çözümler nullbunun için geçiyor . Ancak, en azından Mobile Safari'de, sayfanın URL'sini kullanıcının erişebileceği geçmiş açılır listesine koyar. Ancak normal olarak bir sayfa ziyareti için bir girdi eklediğinde, başlığını koyar , bu da tercih edilir. Yani bunun için geçmek document.titleaynı davranışla sonuçlanır.

— JonBrave
kaynak

3

Bu doğru cevap. Chrome, IE 11, Firefox ve Edge'de mükemmel çalışır.

— Concept211

3

Bu kabul edilen cevap olmalı, çapraz platform ve sadece iyi çalışıyor.

— calbertts

in jsp sevlet Gönderdikten sonra sayfayı yenileyiyorum. sayfa görüntülenmiyor (hata)

— Madhuka Dilhan

Şimdiye kadarki en iyi çözüm, ancak muhtemelen eski tarayıcılarda çalışmıyor

— j4n7

2

Modern tarayıcılar için mükemmel çözüm. Ben sadece koşul typeof (history.pushState) === "işlev" düzgün çalışır kullanarak eski tarayıcıyı desteklemek için @ Rohit416 cevap ile birleştirdik.

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

3

Genius! Bunu, kullanıcının geri / ileri hareketinin gerçekten mantıklı olmadığı bir web uygulamasında Backspace'e (örneğin, devre dışı / salt okunur alanlarda) çarpması durumunda Geri düğmesinin yanlışlıkla tetiklenmesini önlemek için kullandım. Confirmed, bağlam menüsü seçeneği dahil olmak üzere geri ve ileri işlevlerini (düğmelerin kendileri değil) devre dışı bırakır; IE8, IE11, Chrome ve FF aracılığıyla doğrulandı.

— hiçbir şey

1

Bu çalışır, ancak metin kutularına girilen tüm verileri sıfırlar. Temizlenmeyi önlemek mümkün müdür?

— Somnium

6

Firefox'ta benim için çalıştı, ancak kromda değil (sürüm 36.0.1985.143)

— baraber

Bu benim için de işe yaradı, ancak Firefox'ta window.history.back()işlevi bozuyor gibi görünüyor . Kullanıcıların tarayıcı geri düğmesini tıklamasını önlemek istiyoruz, ancak bazı durumlarda sayfada kendi geri düğmemizi sağlıyoruz. Çalışmasını sağlamanın bir yolu var mı?

— AsGoodAsIt

1

Bu benim için işe yaramıyor. Windows 10'da Chrome 55 sürümünü kullanıyorum. Komut dosyasını çeşitli yerlere (başlık başlangıcı, gövde sonu vb.) Koydum ve yine de önceki sayfaya geri dönmek için geri düğmesini kullanabilirim.

— Victor Stoddard

28

Bu kod, HTML5 Geçmiş API'sını destekleyen modern tarayıcılar için geri düğmesini devre dışı bırakır. Normal şartlar altında, geri düğmesine basıldığında bir önceki sayfaya geri gider. History.pushState () kullanırsanız, geçerli sayfaya fazladan alt adımlar eklemeye başlarsınız. Çalışma yolu, history.pushState () öğesini üç kez kullanacak olsaydınız, geri düğmesine basmaya başlayın, ilk üç kez bu alt adımlarda geri gidecek ve sonra dördüncü kez geri dönecekti. önceki sayfa.

Bu davranışı olaydaki bir olay dinleyicisiyle birleştirirseniz popstate, temelde sonsuz bir alt durum döngüsü oluşturabilirsiniz. Böylece, sayfayı yüklersiniz, bir alt durumu itersiniz, ardından bir alt durumu açan ve başka bir sayfayı iten geri düğmesine basarsınız, bu nedenle geri düğmesine tekrar basarsanız, itmek için asla alt durumlardan kaçmaz . Geri düğmesini devre dışı bırakmanın gerekli olduğunu düşünüyorsanız, bu sizi oraya götürecektir.

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

— Jeremy Warne
kaynak

2

Herhangi bir tarayıcıda, bundan sonra Yenile / Yeniden Yükle sayfasını deneyin ve adlı bir sayfa bulmaya çalıştığından "Sayfa bulunamadı" hatasını alırsınız no-back-button... (Tarayıcı muhtemelen no-back-buttonadresinde de gösterilecektir ) Bu da çirkin gözüküyor.) Adil olmak gerekirse, bundan muzdarip tek çözüm bu değil. Üçüncü argüman history.pushState()bir url'dir ve geçerli sayfanızın url'si olmalıdır: location.hrefbunun yerine kullanın.

— JonBrave

4

Bu benim için çalıştı. Sadece 'no-back-button' seçeneğini "window.top.location.pathname + window.top.location.search" olarak değiştirin ve yenilendiğinde bile bulunduğunuz sayfanın adını koruyacaktır

— Steve

Diğerleri arasında, bu benim için çalıştı, oy. Stackoverflow.com/questions/19926641/… adresine bakın .

— user2171669

Birçok vakayı araştırdım ve bu 1 sayfalık site için en iyi çözüm

— djdance

Bu çok kötü bir çözüm çünkü URL'yi değiştiriyorsunuz, bu yüzden birkaç kez ileri ve geri vurursanız krom, var olmayan bir yola yönlendirir

— Tallboy

21

Tarayıcıyı geri kısıtlama olayı için

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

— Fezal halai
kaynak

1

Bu krom için harika çalışıyor!, Neden insanlar en iyi cevap olduğu için oy vermiyor?

— Tarık Seyceri

1

Ben sadece aşağıdaki tarayıcılarda Windows işletim sistemi kullanarak test (harika çalışıyor) Chrome Sürüm 74.0.3729.108 (Resmi Derleme) (64 bit) Chrome Canary Sürüm 76.0.3780.0 (Resmi Derleme) Kanarya (32 bit) Chromium Sürüm 66.0. 3355.0 (Geliştirici Derlemesi) (64 bit) Firefox 66.0.3 (64 bit) EDGE IE 11 Safari 5.1.7

— Tarık Seyceri

2

@ TarıkSeyceri çünkü bu yalnızca a) geçmiş API'sını destekleyen tarayıcılarda çalışır b) sayfa aslında durumu yönetmek için geçmiş API'sını kullanıyor

— givanse

Sürüm 75'ten sonra Chrome'da artık çalışmıyor. Bkz

— .

13

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

— Eng Mahmud El Torri
kaynak

12

Bu geçerli bir yanıt olsa da, kodun ne yaptığını ve nasıl çalıştığını açıklayarak başkalarına yardım etme olasılığınız daha yüksektir. Yalnızca kod yanıtları daha az olumlu ilgi görür ve diğer yanıtlar kadar yararlı değildir.

— Aurora0001

Chrome, Firefox, IE ve Edge'de test edildi. İyi çalışıyor. Beni kurtardın.

— Nooovice Boooy

12

Bunu başarabilmemin yolu buydu. Window.location'ı garip bir şekilde değiştirmek, krom ve safari'de iyi çalışmadı. Location.hash'ın krom ve safari için geçmişte bir girdi oluşturmadığını gösterir. Bu yüzden pushstate'i kullanmanız gerekecek. Bu, tüm tarayıcılarda benim için çalışıyor.

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

    };

— Sanchitos
kaynak

1

IE9 ve altında çalışmaz, pushState desteklenmez.

— Alex

Harika. Bu iyi bir yaklaşımdır ve hemen hemen tüm tarayıcılarda çalışır.

— Venugopal M

1

Daha sonraki IE'lerde harika çalışıyor. Sadece doğrudan belgeye koy. $(document).ready(function () { .... });

— Zaten

Mevcut uri'nizi "#nbb" dan önce eklemeniz gerektiğini unutmayın. ie "account # 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
kaynak

Bir yerde bazı belgeler var mı event.persisted?

— Muhd

1

Sorunuz için bulunan bağlantı burada. O Bul burada @Muhd

— rbashish

Ben sadece denedim, çalışmıyor

— Pedro Joaquín

8

Jordanhollinger.com ile ilgili bu makale en iyi seçenek. Razor'un cevabına benzer ancak biraz daha net. Aşağıdaki kod; Jordan Hollinger'a tam kredi:

Önceki sayfa:

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

Geri dönüşü olmayan JavaScript sayfası:

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

8

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

Bu javascript hiçbir kullanıcının geri dönmesine izin vermez (Chrome, FF, IE, Edge'de çalışır)

— Surajit Mitra
kaynak

5

Kolayca deneyin:

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

— Lakhan
kaynak

5

Bu kod en son Chrome ve Firefox tarayıcılarıyla test edildi.

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

— Franklin Masum F
kaynak

Hoşgeldiniz huyhoang.

— Franklin Masum F

3

Daha sonra sayfaya müdahale etmeden geri oku kırmak için çok basit ve temiz bir işlev.

Yararları:

Anında yüklenir ve orijinal karmayı geri yükler;
Kullanıcı yine de 10 kez geriye basarak çıkabiliyor (bu iyi bir şey) ama yanlışlıkla değil
Kullanan diğer çözümler gibi kullanıcı müdahalesi yok onbeforeunload
Yalnızca bir kez çalışır ve durumu izlemek için kullanmanız durumunda başka karma işlemlere müdahale etmez
Orijinal karmayı geri yükler, bu yüzden neredeyse görünmez.
Kullanır, setIntervalböylece yavaş tarayıcıları kırmaz ve her zaman çalışır.
Saf Javascript, HTML5 geçmişi gerektirmez, her yerde çalışır.
Zararsız, basit ve diğer kodlarla iyi oynuyor.
unbeforeunloadKalıcı iletişim kutusuyla kullanıcıyı kesintiye uğratan özelliği kullanmaz .
Sadece karışıklık olmadan çalışır.

Not: diğer bazı çözümler kullanılır onbeforeunload. Lütfen yok kullanmak onbeforeunloadvb Fiiller gibi kullanıcıların pencereyi kapatmak için deneyin zaman iletişim penceresi açılır Bu amaçla, isabet backarrow için onbeforeunloadaslında ekran ve sığınak üzerinde değişiklikler yaptık zaman' gibi genellikle sadece nadir durumlarda, uygun olan t Bu amaç için değil, onları kurtardı.

Nasıl çalışır

Sayfa yüklemesinde yürütür
Orijinal karma değerini kaydeder (URL'de varsa).
Kare karmasına # / noop / {1..10} ekler
Orijinal karmayı geri yükler

Bu kadar. Daha fazla karışıklık yok, arka plan olay izleme yok, başka bir şey yok.

Bir Saniyede Kullanın

Dağıtmak için bunu sayfanızda veya JS'nizde istediğiniz yere ekleyin:

<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ümcül hata
kaynak

2

Bu, tarayıcıdaki geri düğmesini ve sizi geri götüren geri silme düğmesini devre dışı bırakmada bizim için işe yaramış gibi görünüyor.

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

— jgabb
kaynak

1

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

— user3789888
kaynak

1

Bunu yapamazsınız ve yapmamalısınız. Ancak, bu yardımcı olabilir

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

Chrome'umda ve firefox'ta çalışıyor

— Shailendra Sharma
kaynak

1

Varsayılan olarak "Geri" olarak işlev gören IE'de geri silme düğmesini önlemek için bunu deneyin:

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

1

Mükemmel ama çözümün yıllardır kullandığım aslında oldukça basit olduğuna inanıyorum.

Temel olarak, pencerenin "onbeforeunload" olayını ve devam eden 'mouseenter' / 'mouseleave' olaylarını atar, böylece uyarı yalnızca tıklamalar belge kapsamının dışında olduğunda tetiklenir (bu, tarayıcının geri veya ileri düğmesi olabilir)

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

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

— Abdelqoddous Rifai
kaynak

1

Modern bir tarayıcıda bu işe yarıyor gibi görünüyor:

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

1

Ne olduğundan emin değilim, ama bir nedenden dolayı bu cevabı başka bir makinede reddettim. Sadece bunun niyetim olmadığını bilmeme izin verdim, ama artık oylamayı geri alamıyorum: /

— Lennard Fonteijn

@LennardFonteijn :)

— Joakim L. Christiansen

1

En çok oylanan cevapların hiçbiri Chrome 79'da benim için çalışmadı . Görünüşe göre Chrome, 75. sürümden sonra Geri düğmesine göre davranışını değiştirdi, buraya bakın:

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

Ancak, bu Google dizisinde, en sonunda Azrulmukmin Azmi tarafından verilen cevap işe yaradı. Bu onun çözümü.

<script>

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

</script>

Chrome ile ilgili sorun, tarayıcı işlemi (yani çağrı geçmişi.back) yapmadıkça onpopstate etkinliğini tetiklememesidir. Bu yüzden bunları senaryoya ekledim.

Ne yazdığını tam olarak anlamıyorum, ancak görünüşe göre history.back() / history.forward()Chrome 75+'de Back'i engellemek için ek bir şey gerekiyor.

— gen b.
kaynak

Yüksek ve düşük arama yaptıktan sonra bu nihayet Android tarayıcılarında da çalıştı, bazı nedenlerden dolayı tarayıcının geri düğmesi olayı denediğim diğer komut dosyalarıyla tespit edilmedi. Teşekkürler, teşekkürler, tekrar teşekkürler! Hem masaüstü hem de mobil cihazlar için Chrome 83 altında test edilmiş ve iyi çalışıyor! Gene, sen bir cankurtaransın!

— Ivan

0

Bir HTML sayfası (index.html) oluşturuyorum. Ayrıca bir (script) klasörü / dizini içinde bir (mekanizma.js) oluşturun. Sonra, tüm içeriğimi (index.html) içine form, tablo, span ve div etiketlerini gerektiği gibi kullanarak yerleştirdim. Şimdi, geri / ileri yapacak bir şey yok!

İlk olarak, sadece bir sayfanız olması! İkincisi, düzenli linkler aracılığıyla gerektiğinde aynı sayfada içeriği gizlemek ve görüntülemek için span / div etiketli JavaScript kullanımı!

'İndex.html' içinde:

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

'Mekanizma.js' içinde:

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

Tüylü görünüyor, ancak işlev adlarını ve çağrılarını, katıştırılmış HTML'yi ve span etiketi kimliği çağrılarını not edin. Bu, aynı sayfada aynı span etiketine farklı HTML'yi nasıl enjekte edebileceğinizi göstermekti! Geri / İleri bu tasarımı nasıl etkileyebilir? Yapamazsınız, çünkü nesneleri aynı sayfada saklıyorsunuz ve başkalarını değiştiriyorsunuz!

Nasıl gizlenir ve görüntülenir? İşte gidiyor: Gerektiğinde 'mekanizma.js' içindeki fonksiyonlar:

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

'İndex.html' içinde bağlantılar yoluyla işlevler çağırın:

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

ve

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

Umarım sana bir baş ağrısı vermedim. Yaptığım için üzgünüm :-)

— hacker1033
kaynak

0

Benim durumumda bu bir alışveriş emriydi. Yaptığım şey düğmeyi devre dışı bırakmaktı. Kullanıcı tekrar tıkladığında, düğme hala devre dışı bırakıldı. Bir kez daha tıkladıklarında ve sonra ileri gitmek için bir sayfa düğmesine tıkladıklarında. Siparişlerinin gönderildiğini ve başka bir sayfaya atlandığını biliyordum.

Sayfanın gerçekten yenilendiği durumda, bu da düğmeyi (teorik olarak) kullanılabilir kılacaktır; Daha sonra, siparişin zaten gönderildiği sayfa yüküne tepki verdim ve sonra da yönlendirdim.

— Valamas
kaynak

0

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

— Kamlesh
kaynak

3

1. javascript:Yazdığınız "javascript" adlı bir JavaScript etiketi tanımlar . Bunu düşündüğünüzden çok şüpheliyim; href=javascript:...JavaScript <script>blokları ile karıştığınızdan şüpheleniyorum . 2. HTML5'te language="JavaScript"geçerli bir <script>özellik olmayı bıraktı . 3. Yukarıdaki 2 puanın önemi yoktur; önemli history.forward(1)olan Mobil Safari'de çalışmaz (en azından). history.pushState()Bunun yerine cevaplardan birini kullanın.

— JonBrave

0

Sadece küçük bir script yazıp kontrol edebilirsiniz. Önceki sayfayı ziyaret etmenize izin vermez. Bu javascript ile yapılır.

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

Tarayıcı aracılığıyla geri veya önceki sayfayı ziyaret etmeye çalıştığınızda window.onunload işlevi tetiklenir.

Bu yardımcı olur umarım.

— noobprogrammer
kaynak

0

React.JS ile bu sorunu yaşadım. (sınıf bileşeni)

Ve kolayca çöz

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

Kullandığım HashRouterdan react-router-dom.

— Oo
kaynak

0

Sadece ayarlayın location.hash="Something", geri düğmesine basıldığında, karma URL'den kaldırılacak, ancak sayfa geri dönmeyecek, Bu yöntem yanlışlıkla geri dönmeyi önlemek için iyidir, ancak güvenlik amacıyla, yeniden yanıtlamayı önlemek için arka ucunuzu tasarlamalısınız.

— Abhishek
kaynak

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

1 olay nesnesini alın 2. karar koşulu olarak olay kaynağı türünü belirlemek için. 3. Hit Backspace tuşuna basıldığında, parola veya tekli için olay kaynağı türü ve true veya etkin özelliğine salt okunur özelliği false olduğunda, geri tuşu başarısız olur. Backspace, olay türleri şifre veya tek kaynağını vurduğunda, geri silme tuşu başarısızlık

— Chauncey.Zhong

Soru, geri silme tuşunu değil, Geri Gezinme Düğmesini kullanmayı sormaktır.

— Quentin