Bagaimana untuk menggunakan objek Sejarah dalam javascript

panjang

Sifat history.length menyimpan bilangan URL dalam sejarah. Pada mulanya, nilai ini ialah 1. Memandangkan pelayar IE10+ mengembalikan 2 pada mulanya, terdapat isu keserasian, jadi nilai ini tidak biasa digunakan

Kaedah lompat

go(), back() dan forward()

Jika kedudukan yang dialihkan melebihi sempadan sejarah akses, tiga kaedah di atas tidak akan melaporkan ralat, tetapi gagal secara senyap

[Nota] Apabila menggunakan rekod sejarah, halaman biasanya dimuatkan daripada cache penyemak imbas . Daripada meminta pelayan menghantar halaman web baharu sekali lagi. Jangan cetuskan onload

Tambah dan ubah suai rekod

HTML5 menambah dua kaedah baharu pada objek sejarah, history.pushState() dan history.replaceState(), yang digunakan untuk menambah dan mengubah suai dalam Rekod sejarah penyemakan imbas. Atribut state digunakan untuk menyimpan objek rekod, manakala acara popstate digunakan untuk memantau perubahan dalam objek sejarah

[Nota] IE9 tidak menyokong

【pushState()】

Kaedah History.pushState () menambah keadaan pada sejarah penyemak imbas. Kaedah pushState() mengambil tiga parameter: objek keadaan, tajuk (kini diabaikan) dan alamat URL pilihan

　 history.pushState(state, title, url);

State object - Objek keadaan ialah objek JavaScript yang berkaitan dengan sejarah yang dibuat oleh kaedah pushState(). Apabila pengguna diarahkan ke keadaan baharu, peristiwa popstate akan dicetuskan. Sifat keadaan acara mengandungi objek keadaan sejarah. Jika anda tidak memerlukan objek ini, anda boleh mengisi null

di sini - tajuk halaman baharu, tetapi semua penyemak imbas pada masa ini mengabaikan nilai ini, jadi anda boleh mengisi null

. di sini URL - ini Parameter menyediakan alamat rekod sejarah baharu. URL baharu mesti berada dalam domain yang sama dengan URL semasa, jika tidak pushState() akan membuang pengecualian. Parameter ini adalah pilihan Jika ia tidak ditandakan secara khusus, ia akan ditetapkan kepada URL semasa dokumen

Dengan mengandaikan bahawa URL semasa ialah example.com/1.html, gunakan kaedah pushState untuk menambahkannya ke rekod penyemakan imbas (objek sejarah) Rekod baharu

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

Selepas menambah rekod baharu di atas, bar alamat penyemak imbas serta-merta memaparkan example.com/2.html, tetapi ia tidak akan melompat ke 2.html, atau malah semak 2.html Jika ia wujud, ia hanya menjadi entri terkini dalam sejarah penyemakan imbas anda. Jika anda melawati google.com pada masa ini, dan kemudian klik butang kembali, URL halaman akan memaparkan 2.html, tetapi kandungannya masih akan menjadi 1.html yang asal. Klik butang undur sekali lagi dan url akan memaparkan 1.html dengan kandungan yang sama

Ringkasnya, kaedah pushState tidak akan mencetuskan muat semula halaman, tetapi hanya akan menyebabkan objek sejarah berubah dan alamat yang dipaparkan dalam bar alamat untuk menukar

Jika parameter url pushState menetapkan nilai anchor baharu (iaitu cincang), peristiwa pertukaran cincang tidak akan dicetuskan, walaupun jika URL baharu dan yang lama hanya berbeza dalam cincang

Jika ditetapkan Jika URL merentas domain ditentukan, ralat akan dilaporkan. Tujuan reka bentuk ini adalah untuk menghalang kod berniat jahat daripada membuatkan pengguna menyangka mereka berada di tapak web lain

　【replaceState()】

Parameter kaedah history.replaceState adalah sama persis dengan kaedah pushState, dengan perbezaan Kaedah replaceState() akan mengubah suai entri sejarah semasa dan bukannya mencipta entri baharu

Andaikan bahawa halaman web semasa ialah example.com/example.html

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3

【state】

Harta history.state mengembalikan objek keadaan halaman semasa

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

[acara popstate]

Setiap kali sejarah penyemakan imbas (iaitu objek sejarah) bagi perubahan dokumen yang sama, peristiwa popstate akan dicetuskan

[Nota] Perlu diingat bahawa hanya memanggil kaedah pushState atau kaedah replaceState tidak akan mencetuskan acara ini Hanya pengguna mengklik butang belakang dan butang hadapan penyemak imbas. atau menggunakan kaedah javascript untuk memanggil balik(), forward() , go() hanya akan dicetuskan. Selain itu, acara ini hanya menyasarkan dokumen yang sama Jika sejarah penyemakan imbas ditukar dan dokumen berbeza dimuatkan, acara tidak akan dicetuskan

Apabila digunakan, anda boleh menentukan fungsi panggil balik untuk acara popstate. Parameter fungsi panggil balik ini ialah objek peristiwa peristiwa dan atribut keadaannya menghala ke objek keadaan yang disediakan oleh kaedah pushState dan replaceState untuk URL semasa (iaitu, parameter pertama bagi kedua-dua kaedah ini)

dalam acara kod.state di atas ialah objek keadaan terikat pada URL semasa melalui kaedah pushState dan replaceState

Objek keadaan ini juga boleh dibaca terus melalui objek sejarah

　　var currentState = history.state;

Cache perjalanan pergi balik

Secara lalai, penyemak imbas akan cache halaman dalam sesi semasa Apabila pengguna mengklik butang "Maju" atau "Kembali", penyemak imbas akan memuatkan halaman daripada cache

The. pelayar mempunyai ciri Dipanggil "cache ke hadapan" (bfcache), ia boleh mempercepatkan penukaran halaman apabila pengguna menggunakan butang "kembali" dan "ke hadapan" penyemak imbas. Cache ini bukan sahaja menyimpan data halaman, tetapi juga menyimpan keadaan DOM dan javascript sebenarnya, keseluruhan halaman disimpan dalam memori. Jika halaman berada dalam bfcache, acara pemuatan tidak akan dicetuskan apabila halaman dibuka semula

[Nota] IE10-browser tidak menyokong

[pageshow]

　　pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数

　　第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

　　[注意]虽然这个事件的目标是document，但必须将其事件处理程序添加到window

　　pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时或没有从缓存加载时，这个属性是false；当页面从缓存加载时，这个属性是true

　　[注意]上面的例子使用了私有作用域，以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮，那么showCount的值就会被重置为0，因为页面已经完全重新加载了

　　【pagehide】

　　与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。与pageshow事件一样，pagehide在document上面触发，但其事件处理程序必须要添加到window对象

　　[注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外，即使事件处理程序是空的。原因在于，onunload最常用于撤销在onload中所执行的操作，而跳过onload后再次显示页面很可能就会导致页面不正常

　　pagehide事件的event对象也包含persisted属性，不过其用途稍有不同。如果页面是从bfcache中加载的，那么persisted的值就是true；如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true。因此，当第一次触发pageshow时，persisted的值一定是false，而在第一次触发pagehide时，persisted就会变成true(除非页面不会被保存在bfcache中)

window.onpagehide = function(e){
e = e || event;
console.log(e.persisted);
}

使用方法：

1、取消默认的返回操作

function pushHistory(){
 var state = {
    title: "title",
    url: "#"   
  }
 window.history.pushState(state, "title", "#");  
}

pushHistory()

2、history.js用于兼容html4，也可以监听pushState与replaceSate

Atas ialah kandungan terperinci Bagaimana untuk menggunakan objek Sejarah dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!