Actualisez la page après avoir fermé la fenêtre pop-up jquery

Dans le développement Web, les fenêtres contextuelles sont souvent utilisées pour afficher des informations importantes aux utilisateurs ou permettre aux utilisateurs d'effectuer certaines opérations. L'utilisation du plug-in contextuel jQuery peut faciliter la création de fenêtres contextuelles. Cependant, une fois la fenêtre contextuelle fermée, la page ne s'actualise pas automatiquement. Je pense que de nombreux développeurs ont rencontré ce problème. Cet article explique comment utiliser le plug-in contextuel jQuery pour actualiser automatiquement la page après la fermeture de la fenêtre contextuelle.

1. Utilisation des plug-ins contextuels jQuery

Il existe de nombreux types de plug-ins contextuels jQuery, parmi lesquels les plus couramment utilisés sont Layer, Bootstrap Modal, Sweet Alert, etc. En prenant Layer comme exemple, vous devez introduire la bibliothèque jQuery et les fichiers CSS et JS de Layer avant utilisation.

<link rel="stylesheet" href="path/layer.css"/>
<script src="path/jquery.min.js"></script>
<script src="path/layer.js"></script>

Ensuite, utilisez le code suivant pour créer une simple fenêtre pop-up :

layer.open({
    title: '提示',
    content: '这是一条提示信息'
});

Cela crée une fenêtre pop-up avec le titre "Invite" et le contenu "Ceci est un message d'invite". Cependant, lorsque l'utilisateur ferme la fenêtre pop-up, la page ne s'actualisera pas automatiquement, ce qui nous oblige à écrire le code correspondant.

2. Solution

Il existe de nombreuses solutions pour actualiser la page après la fermeture de la fenêtre contextuelle. Ensuite, je vais vous présenter plusieurs méthodes courantes.

1. Utilisez la méthode location.reload()

La méthode location.reload() peut actualiser la page actuelle, nous pouvons donc utiliser cette méthode dans l'événement de fermeture de la fenêtre contextuelle pour actualiser la page. Le code spécifique est le suivant :

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.reload();
    }
});

Ici, nous utilisons l'attribut end de la fenêtre pop-up pour lier une fonction de rappel. Lorsque l'utilisateur ferme la fenêtre pop-up, cette fonction sera exécutée pour actualiser la page.

Il convient de noter que l'utilisation de la méthode location.reload() rechargera toutes les ressources, y compris JavaScript, CSS, images, etc. S'il y a des ressources volumineuses dans la page, la vitesse de rafraîchissement de la page ralentira, il doit donc être utilisé avec prudence.

2. Utilisez la méthode location.href

La méthode location.href peut accéder à une nouvelle URL, mais si vous accédez à l'URL de la page actuelle, la page peut être actualisée. Le code spécifique est le suivant :

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.href = location.href;
    }
});

Ici, nous utilisons également l'attribut end de la fenêtre pop-up pour lier une fonction de rappel, et utilisons la méthode location.href dans cette fonction pour accéder à l'URL de la page actuelle, actualisant ainsi la page.

Il convient de noter que l'utilisation de la méthode location.href permettra d'accéder à une nouvelle URL, tout comme cliquer sur un lien. S'il y a des données non enregistrées dans la page précédente, cela peut entraîner une perte de données, elle doit donc également être utilisée avec. prudence.

3. Utilisez la méthode location.replace

La méthode location.replace peut remplacer la page actuelle par l'URL spécifiée, ce qui peut également actualiser la page. Le code spécifique est le suivant :

layer.open({
    title: '提示',
    content: '这是一条提示信息',
    end: function () {
        location.replace(location.href);
    }
});

De même, nous utilisons également l'attribut end de la fenêtre pop-up pour lier une fonction de rappel. Dans cette fonction, nous utilisons la méthode location.replace pour remplacer la page actuelle par l'URL de. la page actuelle, actualisant ainsi la page.

Il convient de noter que l'utilisation de la méthode location.replace remplacera l'enregistrement de l'historique de la page actuelle. Les utilisateurs ne peuvent pas utiliser le bouton de retour du navigateur pour revenir à la page précédente, elle doit donc également être utilisée avec prudence.

Ce qui précède est la solution pour utiliser le plug-in pop-up jQuery pour permettre à la page de s'actualiser automatiquement après la fermeture de la fenêtre pop-up. Bien entendu, il existe de nombreuses autres façons de réaliser cette fonction, et vous devez choisir en fonction de la situation réelle.

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!