Pertanyaan Bagaimana cara mendeteksi apakah pengguna sudah mendapatkan halaman menggunakan tombol kembali?


Pertanyaan ini mirip dengan Lacak ketika pengguna menekan tombol kembali pada browser, tapi tidak sama ... Saya punya solusi dan saya posting di sini untuk referensi dan umpan balik. Jika ada yang punya pilihan yang lebih baik, saya mendengarkan!

Situasinya adalah saya memiliki halaman dengan "di tempat edit", a la flickr. Yaitu. ada "klik di sini untuk menambahkan deskripsi" DIV, yang ketika diklik berubah menjadi TEXTAREA dengan tombol Simpan dan Batal. Mengklik Simpan posting data ke server untuk memperbarui database dan menempatkan deskripsi baru di DIV di tempat TEXTAREA. Jika halaman disegarkan, deskripsi baru ditampilkan dari database dengan opsi "klik untuk mengedit". Barang web 2,0 standar hari ini.

Masalahnya adalah jika:

  1. halaman dimuat tanpa uraian
  2. deskripsi ditambahkan oleh pengguna
  3. halaman dinavigasi dari dengan mengklik tautan
  4. pengguna mengklik tombol kembali

Lalu apa yang ditampilkan (dari cache browser) adalah versi halaman tanpa DIV yang dimodifikasi secara dinamis yang berisi deskripsi baru.

Ini adalah masalah yang cukup besar karena pengguna menganggap bahwa pembaruan mereka telah hilang dan tidak akan selalu mengerti bahwa mereka perlu me-refresh halaman untuk melihat perubahan.

Jadi, pertanyaannya adalah: Bagaimana Anda bisa menandai halaman sebagai dimodifikasi setelah dimuat, dan kemudian mendeteksi ketika pengguna "kembali ke sana" dan memaksa penyegaran dalam situasi itu?


76
2018-05-06 10:48


asal


Jawaban:


Gunakan formulir tersembunyi. Data formulir dipertahankan (biasanya) di browser saat Anda memuat ulang atau menekan tombol kembali untuk kembali ke halaman. Hal berikut ini berlaku di halaman Anda (mungkin di dekat bagian bawah):

<form name="ignore_me">
    <input type="hidden" id="page_is_dirty" name="page_is_dirty" value="0" />
</form>

Di javascript Anda, Anda memerlukan hal-hal berikut:

var dirty_bit = document.getElementById('page_is_dirty');
if (dirty_bit.value == '1') window.location.reload();
function mark_page_dirty() {
    dirty_bit.value = '1';
}

Js yang mengendus formulir harus dieksekusi setelah html sepenuhnya diurai, tetapi Anda bisa memasukkan kedua formulir dan js inline di bagian atas halaman (js second) jika latensi pengguna merupakan masalah serius.


73
2018-04-12 22:58



Ini adalah solusi modern yang sangat mudah untuk masalah lama ini.

if (window.performance && window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD) {
    alert('Got here using the browser "Back" or "Forward" button.');
}

window.performance saat ini didukung oleh semua browser utama.


27
2017-08-24 09:31



Artikel ini menjelaskannya. Lihat kode di bawah ini: http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

<html>
    <head>
        <script>

            function pageShown(evt){
                if (evt.persisted) {
                    alert("pageshow event handler called.  The page was just restored from the Page Cache (eg. From the Back button.");
                } else {
                    alert("pageshow event handler called for the initial load.  This is the same as the load event.");
                }
            }

            function pageHidden(evt){
                if (evt.persisted) {
                    alert("pagehide event handler called.  The page was suspended and placed into the Page Cache.");
                } else {
                    alert("pagehide event handler called for page destruction.  This is the same as the unload event.");
                }
            }

            window.addEventListener("pageshow", pageShown, false);
            window.addEventListener("pagehide", pageHidden, false);

        </script>
    </head>
    <body>
        <a href="http://www.webkit.org/">Click for WebKit</a>
    </body>
</html>

11
2018-06-15 22:05



Seperti disebutkan di atas, saya telah menemukan solusi dan mempostingnya di sini untuk referensi dan umpan balik.

Tahap pertama solusi adalah menambahkan hal-hal berikut ke halaman:

<!-- at the top of the content page -->
<IFRAME id="page_is_fresh" src="fresh.html" style="display:none;"></IFRAME>
<SCRIPT style="text/javascript">
  function reload_stale_page() { location.reload(); }
</SCRIPT>

Isi dari fresh.html tidak penting, sehingga hal-hal berikut harus cukup:

<!-- fresh.html -->
<HTML><BODY></BODY></HTML>

Ketika kode sisi klien memperbarui halaman, itu perlu menandai modifikasi sebagai berikut:

function trigger_reload_if_user_clicks_back_button()
{
  // "dis-arm" the reload stale page function so it doesn't fire  
  // until the page is reloaded from the browser's cache
  window.reload_stale_page = function(){};

  // change the IFRAME to point to a page that will reload the 
  // page when it loads
  document.getElementById("page_is_fresh").src = "stale.html";
}

stale.html melakukan semua pekerjaan: Ketika dimuat itu akan memanggil reload_stale_page fungsi yang akan menyegarkan halaman jika perlu. Saat pertama kali dimuat (mis. Setelah modifikasi dibuat, reload_stale_page fungsi tidak akan melakukan apa-apa.)

<!-- stale.html -->
<HTML><BODY>
<SCRIPT type="text/javascript">window.parent.reload_stale_page();</SCRIPT>
</BODY></HTML>

Dari pengujian (minimal) saya pada tahap ini, ini sepertinya berfungsi seperti yang diinginkan. Apakah saya mengabaikan sesuatu?


2
2018-05-06 11:07



Anda dapat menggunakan localStorage atau sessionStorage (http://www.w3schools.com/html/html5_webstorage.asp) untuk menetapkan bendera (alih-alih menggunakan formulir tersembunyi).


2
2018-06-02 14:29



Ini versi jQuery. Saya telah mengalami kebutuhan untuk menggunakannya beberapa kali karena cara Safari desktop / mobile menangani cache ketika pengguna menekan tombol kembali.

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        // Loading from cache
    }
});

2
2018-03-31 14:20



Anda bisa menyelesaikannya menggunakan onbeforeunload peristiwa:

window.onbeforeunload = function () { }

Memiliki sebuah onbeforeunload fungsi manajer acara kosong berarti halaman akan dibangun kembali setiap kali diakses. Javascript akan dijalankan ulang, skrip sisi server akan dijalankan ulang, halaman akan dibangun seolah-olah pengguna memukulnya untuk pertama kalinya, bahkan jika pengguna sampai ke halaman hanya dengan menekan tombol kembali atau maju .

Berikut ini adalah kode lengkap dari sebuah contoh:

<html>
<head>
<title>onbeforeunload.html</title>
<script>
window.onbeforeunload = function () { }

function myfun()
{
   alert("The page has been refreshed.");
}
</script>

<body onload="myfun()">

Hello World!<br>

</body>
</html>

Cobalah, arahkan halaman ini, lalu kembali menggunakan tombol "Kembali" atau "Maju" di browser Anda.

Ini berfungsi dengan baik di IE, FF dan Chrome.

Tentu saja Anda bisa melakukan apa pun yang Anda inginkan di dalam myfun fungsi.

Info lebih lanjut: http://www.hunlock.com/blogs/Mastering_The_Back_Button_With_Javascript


1
2018-06-04 04:05