Comment puis-je m'assurer que mes scripts JavaScript s'exécutent correctement dans les transitions de page basées sur AJAX de jQuery Mobile ?

Linda Hamilton

Libérer： 2024-11-11 01:24:02

original

591 Les gens l'ont consulté

How can I ensure my JavaScript scripts execute correctly in jQuery Mobile's AJAX-based page transitions?

Où placer les scripts dans jQuery Mobile

Comprendre les modifications de la page jQuery Mobile

jQuery Mobile utilise AJAX pour charger les pages. La page initiale est chargée de manière conventionnelle, avec les contenus HEAD et BODY insérés dans le DOM. Cependant, les chargements de pages suivants extraient uniquement le contenu BODY, en particulier le premier DIV avec data-role="page." Tout contenu restant dans le BODY, y compris les scripts supplémentaires, est supprimé.

Impact sur l'exécution du script

Ce mécanisme explique pourquoi les boutons peuvent s'afficher mais leurs événements de clic ne parviennent pas à s'exécuter. . Le code de l'événement de clic était présent dans le contenu HEAD supprimé de la deuxième page.

Solution 1 : déplacer les scripts dans BODY

Une solution consiste à déplacer la balise SCRIPT contenant votre code JavaScript dans le contenu BODY de chaque page suivante :

<body>
    <div data-role="page">
        // Rest of HTML content
        <script>
            // JavaScript code
        </script>
    </div>
</body>

Copier après la connexion

Bien que cette solution soit rapide, elle peut encombrer le HTML.

Solution 2 : Script centralisé dans Index.html

Une approche plus organisée consiste à consolider tout le JavaScript dans un seul fichier (par exemple, index.js) et à charger dans le HEAD de la page initiale, après le chargement de jQuery Mobile :

<head>
    <script src="index.js"></script> // Include your JavaScript file
</head>

Copier après la connexion

Cette approche est supérieure parce que :

Il maintient JavaScript organisé dans un seul fichier.
Il empêche les erreurs JavaScript causées par la perte de contenu DOM lors de l'actualisation de la page Phonegap.

Solution 3 : Utiliser rel="external"

Utiliser rel="external" lors du changement de page elements désactive le chargement AJAX et force le comportement traditionnel des applications Web. Cependant, ce n'est pas idéal pour les applications Phonegap.

La solution pratique

La solution la plus pratique est d'adopter la solution 2 mais avec une variante. Placez le script centralisé dans le HEAD de chaque page suivante, en vous assurant que tout le code JavaScript nécessaire est disponible après les transitions de page, atténuant ainsi les problèmes potentiels causés par le comportement bogué de Phonegap.

Réflexions finales

Comprendre le mécanisme de gestion des pages de jQuery Mobile est crucial pour créer des applications réussies. En suivant ces solutions, vous pouvez vous assurer que vos scripts s'exécutent correctement et maintenir une base de code bien organisée et maintenable.

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!