web-dev-qa-db-fra.com

Lors du chargement d'une page html via ajax, les balises de script seront-elles chargées?

Lorsque vous chargez un document html en utilisant AJAX, que fait-il avec les nœuds à l'intérieur de la balise HEAD: (script, lien, style, méta, titre) les ignorer ou les charger et les analyser? Et dans le cas de la fonction ajax () de jquery?

javascriptjqueryhtmlajax
29
pixeline

Lorsque vous appelez la méthode jQuery.ajax() , vous pouvez spécifier la propriété dataType, qui décrit le type de données que vous attendez du serveur et comment les gérer. une fois qu'il est reçu.

Par défaut, jQuery essaiera de deviner le dataType en fonction du type MIME de la réponse. Cependant, vous pouvez spécifier explicitement un type de données parmi les éléments suivants:

  • html : Renvoie HTML en texte brut; les balises de script incluses sont évaluées lorsqu'elles sont insérées dans le DOM.

  • text : Une chaîne de texte brut.

  • xml : renvoie un document XML qui peut être traité via jQuery.

  • script : évalue la réponse en JavaScript et la renvoie en texte brut. Désactive la mise en cache sauf si l'option "cache" est utilisée.

  • json : évalue la réponse au format JSON et renvoie un objet JavaScript.

  • jsonp : Charge dans un bloc JSON en utilisant JSONP. Ajoutera un "? Callback =?" Supplémentaire à la fin de votre URL pour spécifier le rappel.

Par exemple, l'appel ajax suivant renverra les données sous forme de chaîne de texte brut, sans exécuter les scripts ni manipuler le DOM:

$.ajax({
  url: 'ajax/test.html',
  dataType: 'text',
  success: function(data) {
    alert(data);
  }
});
39
Daniel Vassallo

lorsque vous chargez un document html à l'aide d'AJAX, que fait-il des nœuds à l'intérieur de la balise HEAD: (script, lien, style, méta, titre))

Cela dépend de la façon dont vous effectuez le chargement. ajax() (comme avec le XMLHttpRequest sur lequel il est basé) lui-même vous donne juste une chaîne. Comment intégrez-vous cela dans le document?

Si vous écrivez cette chaîne dans le innerHTML d'un élément, les scripts qu'il contient ne seront pas exécutés. Cela n'est standardisé nulle part, mais tous les navigateurs courants se comportent de cette façon.

Cependant, si vous insérez ensuite cet élément dans le document (qu'il soit déjà dans le document auparavant ou non), il sera exécuté dans de nombreux navigateurs, la première fois que vous le faites. Dans IE, le script sera exécuté lorsque vous insérez directement un élément de script dans l'élément any, que ce soit dans le document ou non.

Tout cela est très incohérent et peu pratique, c'est pourquoi vous devez éviter le chargement AJAX <script> éléments dans le document. Il n'y a généralement pas de bonne raison de toute façon; mieux garder votre code de script statique et utiliser JSON (ou eval uniquement si cela est absolument nécessaire) pour leur transmettre des données de script.

la fonction load de jQuery tente de compenser les différences de navigateur lors du chargement de contenu AJAX dans le document. Il ne parvient pas à saisir toutes les circonstances impliquant <script> (il y en a de très étranges). Vous ne devriez pas vous y fier en général. Vous pouvez vous en sortir en prenant une réponse de page HTML mais en ne chargeant que des éléments spécifiques sans <script> in, car cela ne fait que l'étape d'écriture dans innerHTML. Mais encore une fois, vous ne voulez pas vraiment compter sur cela. Il est préférable que le serveur renvoie un extrait de code HTML ou JSON que vos scripts peuvent utiliser directement.

En ce qui concerne les feuilles de style et les liens vers les feuilles de style, leur insertion dans le corps fonctionne généralement, bien que selon les termes HTML, cela ne devrait probablement pas. meta et title ne feront rien, il est trop tard pour qu'ils aient un effet. Les analyser simplement à l'aide de innerHTML ne fera rien, mais évitez-le si vous le pouvez.

31
bobince

Lorsque vous dites "charger", je comprends que cela signifie simplement invoquer XHR (ou $ .ajax ou $ .get, etc.) pour extraire une ressource XML, JSON ou texte d'un serveur Web, la stocker dans la mémoire d'exécution JS du navigateur, et obtenir une référence. Pour les ressources HTML, cet acte seul n'analyse rien.

Cependant, si vous prenez ce HTML et l'injectez dans le DOM (au moins dans Firefox 3.5), alors il sera interprété. Par exemple, disons que vous aviez les trois fichiers suivants, très professionnels.

barf1.html:

<html>
    <head>
        <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(init);

            function init() {
                $.get('barf2.html', inject);
            }

            function inject(data) {
                debugger;
                $('body').html(data);
                //document.write(data);
            }
        </script>
    </head>
    <body>
        long live barf1!
    </body>
</html>

barf2.html:

<div>
    <script type="text/javascript">
        alert('barf2!');
    </script>
    <script type="text/javascript" src="barf3.js"></script>
    barf2 lives here now!
</div>

barf3.js:

alert('barf3!');

Lorsque vous accédez à barf1.html, le contenu de la page change et vous voyez deux alertes JavaScript, indiquant que les blocs de script en ligne et les fichiers de script externes sont interprétés.

8
G-Wiz

Non, ils ne seront pas interprétés.

Le HTML peut être chargé soit en utilisant innerHTML, soit par manipulation DOM. Dans les deux cas, si le HTML contient des balises <script>, Elles ne seront pas interprétées.

Vous pouvez cependant parcourir les balises <script> À l'intérieur du contenu HTML Ajaxed, et eval() it, si vous en avez vraiment besoin.

Cependant, si vous utilisez ce type de balise de script <script src="http://site/script.js"></script>, Il sera interprété.

2
Luca Matteis

Comme cela a été souligné, en général - non, les balises de script ne seront pas interprétées.

Je ne sais pas du tout ce qui se passera avec les autres balises.

Je fais l'hypothèse ici que vous chargez une page entière en AJAX - Je ne sais pas pourquoi vous voudriez faire ça? Peut-être pourriez-vous nous donner un peu plus d'informations et nous pourrait faire quelques suggestions?

Pour répondre plus directement à votre question - en général, tous les scripts requis sur le contenu rechargé ne doivent pas être rechargés avec le contenu mais avec la page. De cette façon, vous pouvez organiser un rappel de vos AJAX réattache les gestionnaires d'événements, etc.

1
mlennox