Tutoriel pour initialiser les scripts externes après le chargement de la boîte modale SweetAlert2

Les problèmes de synchronisation sont souvent rencontrés lors de l'utilisation de SweetAlert2 pour générer dynamiquement le contenu de la boîte modale et souhaitent que des scripts externes (tels que Sharethis) initialisent des éléments spécifiques dans la boîte modale. Cet article introduira en détail comment utiliser les fonctions de cycle de vie DidOpen ou DiDrender fournies par SweetAlert2 pour s'assurer qu'après le déclenchement entièrement chargé et rendu dans le DOM, l'initialisation du script externe est déclenchée manuellement, afin de rendre correctement le contenu dynamique et de résoudre l'échec d'initialisation causé par l'échec des éléments dans le temps.

Défis du contenu dynamique et de l'initialisation de script externe

Dans le développement Web moderne, la génération de contenu dynamiquement est une exigence commune, comme l'utilisation de SweetAlert2 pour créer des boîtes modales interactives. Cependant, un problème de synchronisation commun se produit lorsque ce contenu dynamique contient des éléments qui doivent être initialisés par des bibliothèques JavaScript externes telles que les boutons de partage Sharethis.

Par exemple, Sharethis, etc., scannez généralement le DOM lorsque la page est chargée, à la recherche de classes CSS spécifiques (telles que Sharethis-Inline-Share-Buttons) pour rendre ses composants. Si ces éléments font partie de la boîte modale SweetAlert2, elles n'existent pas dans le DOM lorsque la page est initialement chargée. SweetAlert2 crée dynamiquement la structure HTML de la boîte modale lorsqu'elle est déclenchée par l'utilisateur. Cela signifie que lorsque le script Sharethis exécute sa logique d'initialisation, il ne peut pas trouver ces éléments générés dynamiquement, ce qui fait que le bouton de partage ne s'affiche pas correctement.

Les tentatives de code d'origine sont les suivantes:

 Laissez ShareText = `Partagez ce site Web:
<br>
<div class="Share-Container">
<div class="sharethis-inline-share-buttons"> </div>
</div> `;

modal.fire ({
    TitleText: "Disse Sharing",
    html: sharetext,
    Icône: "Info",
    TELLEDROP: `RGBA (0,0,0,0,7)`
});

Dans ce cas, l'élément Sharethis-inline-Share-Buttons est injecté dans le DOM lorsque modal.fire est appelé, et le mécanisme de balayage automatique de Sharethis peut avoir été terminé il y a longtemps, donc ces boutons ne peuvent pas être reconnus et initialisés.

Solution: profitez du crochet du cycle de vie de SweetAlert2

SweetAlert2 fournit une série puissante de fonctions de crochet de cycle de vie qui permettent aux développeurs d'exécuter une logique personnalisée à différentes étapes des boîtes modales. La clé pour résoudre le problème ci-dessus est d'utiliser les deux crochets: DidOpen ou DiDrender.

• DidOpen : Cette fonction est appelée synchrone lorsque la boîte modale est ouverte (c'est-à-dire que son contenu est complètement injecté dans le DOM et visible).
• DiDender : Cette fonction est appelée lorsque la boîte modale est rendue (c'est-à-dire que son contenu est injecté dans le DOM mais pas nécessairement visible ou que l'animation est terminée).

Pour les scénarios où les éléments dans les boîtes modaux doivent être initialisés, DidOpen est généralement un choix plus approprié, car il garantit que les éléments existent non seulement dans le DOM, mais les boîtes modales sont également entièrement présentées à l'utilisateur.

Étapes d'implémentation et exemple de code

Pour résoudre le problème que le bouton Sharethis ne rend pas dans la boîte modale SweetAlert2, nous avons juste besoin de déclencher manuellement la méthode d'initialisation de Sharethis dans la fonction de rappel DidOpen. La bibliothèque Sharethis fournit généralement une fonction d'initialisation accessible à l'échelle mondiale, telle que Window .__ Sharethis __. Initialize ().

Ce qui suit est le code d'implémentation spécifique:

 // Définissez le contenu de la boîte modale, contenant l'espace réservé de Sharethis Let ShareText = `Partagez ce site Web:
<br>
<div class="Share-Container">
<div class="sharethis-inline-share-buttons"> </div>
</div> `;

// Trigger SweetAlert2 Modal Box Swal.fire ({// Supposons que vous avez importé SweetAlert2 et nommé Swal
    TitleText: "Disse Sharing",
    html: sharetext,
    Icône: "Info",
    toile de fond: `rgba (0,0,0,0,7)`,

    // Partie clé: exécutez l'initialisation après que la boîte modale soit complètement ouverte didOpen: function () {
        // Vérifiez si la fonction d'initialisation de Sharethis existe pour éviter les erreurs si (fenêtre .__ Sharethis__ && Typeof Window .__ Sharethis __. Initialize === 'Function') {
            fenêtre .__ Sharethis __. Initialize ();
            Console.log ("Boutons Sharethis initialisés à l'intérieur de SweetAlert2 Modal.");
        } autre {
            Console.warn ("Fonction d'initialisation de Sharethis n'est pas trouvée ou non prête.");
        }
    }
});

Analyse de code:

1. ShareText : contient toujours la classe Sharethis-inline-share-Buttons, qui est l'espace réservé reconnu par Sharethis et remplacé par le bouton réel.
2. Swal.fire ({...}) : La méthode d'appel de SweetAlert2, utilisée pour afficher les boîtes modales.
3. DidOpen: function () {...} : C'est le noyau. Cette fonction est exécutée lorsque le contenu HTML de la boîte modale SweetAlert2 est complètement rendu et inséré dans le DOM. À l'heure actuelle, l'élément Sharethis-inline-share-Buttons existe déjà dans le DOM.
4. fenêtre .__ Sharethis __. Initialize () : Il s'agit de la méthode d'initialisation manuelle fournie par la bibliothèque Sharethis. Il sauve le DOM, trouve tous les espaces réservés de Sharethis correspondants et le remplace par le bouton de partage réel. Nous avons ajouté une vérification conditionnelle simple pour nous assurer que la fonction existe avant d'être appelée.

Applicabilité et précautions

• Solution générale : cette approche est non seulement pour Sharethis, mais aussi pour toute bibliothèque tierce ou logique JavaScript personnalisée qui nécessite d'initialiser les composants dans du contenu généré dynamiquement. Tant que la bibliothèque fournit une méthode pour initialiser ou annuler manuellement le DOM, il peut être appelé dans DidOpen.
• Didderder vs DidOpen : Si votre logique d'initialisation doit être exécutée avant le début de l'animation de la boîte modale, ou immédiatement après la rendue du contenu de la boîte modale (même si la boîte modale n'est pas entièrement visible), vous pouvez envisager d'utiliser Didrender. Mais pour l'initialisation des composants de l'interface utilisateur visibles pour la plupart des utilisateurs, DiadOpen est un choix plus robuste.
• Méthodes d'initialisation de la bibliothèque : différentes bibliothèques ont différentes méthodes d'initialisation manuelle. Assurez-vous de consulter la documentation de la bibliothèque pertinente pour trouver le bon appel API.
• Gestion des erreurs : lors de l'appel de la méthode d'initialisation d'une bibliothèque tierce, il est préférable d'ajouter une vérification des conditions pour s'assurer que la méthode existe pour empêcher les erreurs d'exécution lorsque la bibliothèque n'est pas entièrement chargée ou que l'API change.

Résumer

En tirant intelligemment en tirant le crochet de cycle de vie DidOpen fourni par SweetAlert2, nous pouvons parfaitement résoudre le problème que les scripts externes ne peuvent pas initialiser le contenu modal généré dynamiquement. Ce modèle garantit que la logique d'initialisation pertinente n'est déclenchée que lorsque l'élément DOM cible existe et est visible, garantissant ainsi le rendu correct du contenu dynamique et l'intégrité de la fonction. La maîtrise de cette technologie est cruciale pour créer des applications Web complexes et hautement interactives.

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!