Maison  >  Article  >  interface Web  >  Qu'y a-t-il avant le déchargement ? Comment utiliser ?

Qu'y a-t-il avant le déchargement ? Comment utiliser ?

不言
不言avant
2018-10-26 15:41:533140parcourir

Cet article vous apporte ce qui se passe avant le déchargement ? Comment utiliser ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Qu'est-ce que onbeforeunload ?

  • onbeforeunload est un événement qui sera déclenché lorsque la page est sur le point d'être déchargée (mise à jour).

  • Désinstallation (mise à jour) fait référence à l'événement de déchargement, qui sera déclenché à la fermeture de la page.

2. Règles de grammaire

window.onbeforeunload = funcRef

funcRef fait référence à une méthode, qui est une référence de fonction.

3. Comment utiliser cette chose

3.1 En HTML, montez-la directement sur le corps

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body onbeforeunload="return test()">
     
</body>
<script type="text/javascript">
    function test(){
        return "你确定要离开吗";
    }
</script>
</html>

3.2 En js, utilisez la méthode de liaison window.onbeforeunload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
     
</body>
<script type="text/javascript">
window.onbeforeunload=function(){
    return "你确定要离开吗";
}
 
</script>
</html>

3.3 Utilisation dans une seule page :

Généralement, l'utilisation de window ou de body directement dans un projet entraînera l'interception des événements d'actualisation et de fermeture de la page entière du projet.
L'idée générale de l'utilisation de cette interception dans une certaine page est de monter l'événement lors de l'entrée dans la page et d'annuler l'événement monté lors du passage à la page.
Par exemple en réaction :

componentDidMount() {
    window.onbeforeunload = function()
    {
      return "真的离开?";
    };
  }
componentWillUnmount(){
    window.onbeforeunload = function()
    {
      return null;
    }
  }


Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer