O evento onpageshow é acionado quando o usuário navega em uma página da web.
O evento onpageshow é semelhante ao evento onload. O evento onload é acionado quando a página é carregada pela primeira vez, e o evento onpageshow é acionado sempre que a página é carregada, ou seja, o evento onload não é acionado quando a página é lido do cache do navegador. Semelhante ao ciclo de vida do onshow.
Adicionar evento onpageshow ao html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中添加onpageshow事件</title>
</head>
<body onpageshow="myFunction()">
<h1 id="demo"></h1>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "onpageshow事件";
}
</script>
</body>
</html>
Use o evento addEventListenter para adicionar o evento onpageshow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用addEventListenter事件添加onpageshow事件</title>
</head>
<body>
<h1 id="demo"></h1>
<script>
//浏览器后退
// 1.
window.addEventListener("pageshow", function(event){
if(event.persisted) {
// do something
}
});
// 2.
window.addEventListenter("pageshow", isBackFun)
function isBackFun(event) {
if(event.persisted) {
// do something
}
}
</script>
</body>
</html>
Se o método addEventListenter for inválido, use o objeto de janela para adicionar
Adicione o evento onpageshow ao objeto da janela
performance.navigation.type (esta propriedade retorna um valor inteiro, indicando a fonte de carregamento da página da web, pode haver as seguintes 4 situações):
0: A página da web é carregada clicando em links, entrada da barra de endereço, envio de formulário, operações de script , etc., que é equivalente a uma performance.navigation.TYPE_NAVIGATE constante.
1: A página da web é carregada por meio do botão "recarregar" ou do método location.reload (), que é equivalente à constante performance.navigation.TYPE_RELOAD.
2: A página da web é carregada através do botão "avançar" ou "voltar", que equivale à constante performance.navigation.TYPE_BACK_FORWARD.
255: Carregando de qualquer outra fonte, equivalente à constante performance.navigation.TYPE_RESERVED.
performance.navigation.redirectCount: indica o número de vezes que a página da web foi redirecionada.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window对象中添加onpageshow事件</title>
</head>
<body>
<h1 id="demo"></h1>
<script>
window.onpageshow = function (event) {
//浏览器后退
//只读属性persisted代表一个页面是否从缓存中加载的
if (
event.persisted ||
(window.performance && window.performance.navigation.type == 2)
) {
// window.location.reload();//刷新页面
}
}
</script>
</body>
</html>