Maison >interface Web >js tutoriel >Pourquoi vos scripts JavaScript devraient-ils être inclus dans index.html dans les projets jQuery Mobile ?

Pourquoi vos scripts JavaScript devraient-ils être inclus dans index.html dans les projets jQuery Mobile ?

Mary-Kate Olsenoriginal: 2024-11-11 22:19:02375parcourir

Why Should Your JavaScript Scripts Be Included in index.html in jQuery Mobile Projects?

Pourquoi vos scripts doivent résider dans index.html dans jQuery Mobile

Dans les projets jQuery Mobile, vous pouvez rencontrer de la confusion lors de la redirection entre les pages à l'aide de $.mobile.changepage . De manière inattendue, les scripts de la page redirigée ne parviennent pas à s'exécuter, vous laissant désemparé.

Comprendre la gestion des pages de jQuery Mobile

Pour comprendre cette situation, il est crucial de comprendre le mécanisme de gestion des pages de jQuery Mobile. Il utilise AJAX pour charger les pages suivantes. Alors que la première page est chargée de manière conventionnelle, les suivantes ne reçoivent que leur contenu BODY (en particulier, le premier DIV avec un attribut data-role="page"), tandis que le contenu HEAD est ignoré.

Cela signifie que les scripts défini dans le contenu BODY de la page redirigée ne s'exécutera pas. La raison en est que leur parent HEAD, qui contient les bibliothèques nécessaires, n'est pas chargé lors de la transition de page.

Solution 1 : Inclure les scripts dans le corps

Pour résoudre ce problème, déplacez la balise SCRIPT pour la page redirigée dans son contenu BODY :

<body>
    <div data-role="page">
        // Other HTML content
        <script>
            // Javascript code
        </script>
    </div>
</body>

Bien que cette solution fonctionne, elle peut potentiellement encombrer le HTML avec plusieurs SCRIPT tags.

Solution 2 : Consolider les scripts dans index.html

Une meilleure approche consiste à centraliser toute la logique JavaScript dans index.html en l'incluant dans un fichier JS séparé dans le HEAD :

<head>
    <meta name="viewport" ...>
    <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css">
    <script src="jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Custom JS file
</head>

Pourquoi index.html est primordial

Bien que la solution 2 consolide les scripts, il reste crucial d'inclure les dans index.html. Cela est principalement dû à la nature boguée de Phonegap. En cas d'erreur, Phonegap peut actualiser la page en cours, perdant ainsi son DOM. Tout code JavaScript qui n'est pas présent dans le HEAD de la page actualisée ne sera pas exécuté.

En centralisant les scripts dans index.html, les bibliothèques nécessaires sont toujours chargées dans le HEAD, garantissant une fonctionnalité ininterrompue même après d'éventuelles erreurs Phonegap .

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!

JavaScript jquery ajax html for while include Error using Attribute Event JS dom this transition phonegap issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Existe-t-il un moyen robuste et sans Regex de valider les URL en JavaScript ?Article suivant：Existe-t-il un moyen robuste et sans Regex de valider les URL en JavaScript ?

Articles Liés

Voir plus