javascript - Soalan mengenai halaman belakang ajax dan sejarah?

Question

Selepas menyemak banyak maklumat, nampaknya mereka semua menggunakan ajax untuk memuat semula sebahagian ke halaman lain, iaitu, terdapat dua fail html, dan kaedah window.onpopstate dan history.pushState digunakan untuk menyimpan sejarah dan melancarkan semula halaman tersebut. Saya ingin bertanya bagaimana untuk melaksanakan fungsi belakang penyemak imbas jika menggunakan ajax atau menjana data pada halaman semasa? Bolehkah anda memberi contoh khusus?

Answer 1

ajax serasi dengan sejarah

Masalah utama ajax ialah ia tidak dapat menyokong operasi ke hadapan dan ke belakang penyemak imbas Oleh itu, Gmail awal menggunakan iframe untuk mensimulasikan operasi ke hadapan dan ke belakang bagi ajax.

Kini, H5 popular dan pjax sangat popular ialah teknologi yang digabungkan dengan ajax+history.pushState Menggunakannya, anda boleh menukar kandungan halaman dengan pergi ke hadapan dan ke belakang melalui penyemak imbas.

Periksa keserasian dahulu.

	IE	Tepi	Firefox	Chrome	Safari	Opera	iOS Safari	Pelayar Android	Chrome untuk Android
PushState/replaceState	10	12	4	5	6	11.5	7.1	4.3	53
sejarah.negeri	10		4	18	6	11.5

Ia boleh dilihat bahawa IE8 dan 9 tidak boleh menggunakan sejarah H5 Anda perlu menggunakan pengembangan API Sejarah HTML5 shims untuk pelayar yang tidak menyokong pushState, replaceState.

.

pjax

pjax mudah digunakan dan hanya memerlukan tiga API berikut:

• history.pushState(obj, title, url) bermaksud menambahkan entri sejarah ke penghujung sejarah halaman Pada masa ini, history.length akan menjadi +1.

  #🎜🎜. #
• history.replaceState(obj, title, url) bermaksud menggantikan item sejarah semasa dengan item sejarah baharu Pada masa ini, history.length kekal tidak berubah.
  .
• window.onpopstate hanya dicetuskan apabila penyemak imbas bergerak ke hadapan dan ke belakang (history.go(1), history.back() dan location.href="xxx" semuanya dicetuskan), pada masa ini ia boleh Dapatkan keadaan yang baru dimasukkan ke dalam history.state, iaitu objek obj (jenis data lain juga boleh diterima).

Kami mendapati bahawa apabila memasuki halaman untuk kali pertama, nilai history.length ialah 1 dan history.state adalah kosong seperti berikut: #🎜 🎜#

history.length 值为1, history.state 为空. 如下:

1) 为了在onpopstate事件回调中每次都能拿到 history.state , 此时需要在页面载入完成后, 自动替换下当前url.

history.replaceState("init", title, "xxx.html?state=0");

2) 每次发送ajax请求时, 在请求完成后, 调用如下, 从而实现浏览器history往前进.

history.pushState("ajax请求相关参数", title, "xxx.html?state=标识符");

3) 浏览器前进和后退时, popstate 事件会自动触发, 此时我们手动取出 history.state , 构建参数并重新发送ajax请求或者直接取用state值, 从而实现无刷新还原页面.

window.addEventListener("popstate", function(e) {
    var currentState = history.state;
    //TODO 拼接ajax请求参数并重新发送ajax请求, 从而回到历史页面
      //TODO 或者从state中拿到关键值直接还原历史页面
});

popstate 事件触发时, 默认会传入 PopStateEvent#🎜#🎜🎜

1) Untuk mendapatkan history.state setiap kali dalam panggilan balik acara onpopstate, anda perlu menggantikan url semasa secara automatik selepas halaman dimuatkan

. rrreee 2) Setiap kali permintaan ajax dihantar, selepas permintaan selesai, perkara berikut dipanggil untuk memajukan sejarah penyemak imbas. rrreee 3) Apabila penyemak imbas bergerak ke hadapan dan ke belakang, acara popstate akan dicetuskan secara automatik Pada masa ini, kami mengeluarkan binaan history.state parameter dan hantar semula permintaan ajax atau Akses terus nilai keadaan untuk memulihkan halaman tanpa menyegarkan.

rrreee

Apabila acara popstate dicetuskan, objek acara PopStateEvent akan dihantar secara lalai Objek ini mempunyai sifat berikut.

. #🎜🎜##🎜🎜##🎜🎜##🎜🎜##🎜🎜# #🎜🎜#Jika anda tidak faham, sila pergi ke: Keserasian ajax dan sejarah#🎜🎜# untuk penjelasan lebih terperinci