2012-01-05 4 views
0

J'ai cette page HTML, et je veux créer une méthode jQuery qui rassemble le contenu HTML d'une autre page.jQuery: obtenir le code HTML dans une certaine balise

Par exemple, je veux obtenir le contenu HTML entre les balises, y compris les balises enfants, attributs, texte ..

Je suis venu avec quelque chose comme:

<script> 
var page; 
$(document).ready(function() { 

$.ajax({ 
     type : "GET", 
    url : "template.html", 
    dataType : "html", 
    success : function(html) { 
    page = $(html).find('body').html(); 
      //do something 

       } 
      }); 
     }); 

    </script> 

mais il doesn Ne fais pas l'affaire. une idée? Je vous remercie.

+0

voulez-vous créer un autre fichier html? – Dau

+0

que voulez-vous dire "* il ne fait pas l'affaire *"? La requête ajax se termine-t-elle correctement? la variable 'html' est-elle remplie avec ce que vous attendez? .. qu'est-ce qui ne va pas? –

+0

@Hemant: J'ai besoin d'extraire le HTML, de le traiter et de l'afficher sur la page en cours. – Lorenzo

Répondre

4

Vous pouvez utiliser la fonction de chargement JQuery.

$('#result').load('ajax/test.html #container'); 

Cette fonction charge le fichier HTML de la div avec id container de la page ajax/test.html et met le code HTML dans le div avec id result.

source: http://api.jquery.com/load/

+0

c'est ce que je cherchais, merci Mathieu. – Lorenzo

0

Le problème est que jQuery ne pas analyser les pages entières html comme chaîne ..

Lors du passage en HTML complexe, certains navigateurs ne peuvent pas générer un DOM qui reproduit exactement le HTML source fournie. Comme mentionné précédemment, nous utilisons la propriété .innerHTML du navigateur pour analyser le code HTML transmis et l'insérer dans le document en cours. Au cours de ce processus, certains navigateurs filtrent certains éléments tels que <html>, <title> ou <head> éléments. Par conséquent, les éléments insérés peuvent ne pas être représentatifs de la chaîne d'origine transmise.

donc vous devez contourner cette limitation ..

une autre solution consiste à ajouter manuellement le code html retourné à un élément HTML.

success : function(html){  
      var ndoc = document.createElement('html'); 
      ndoc.innerHTML = html; 
      page = $('body', ndoc); 
      console.log(page); 
      } 
+0

hmm, je parviens à extraire le HTML de cette façon, mais de ne pas l'afficher en utilisant un .viewHTML javascript modify. Peut-être que c'est parce que la page a déjà été rendue? – Lorenzo

+0

@Lorenzo, je ne sais pas ce que vous voulez dire .. la variable 'page' contiendra la balise' body' du résultat ajax dans la mémoire en tant qu'objet jQuert .. (* le fichier console.log est pour le débogage et doit être supprimé *) –

+0

Je veux dire que si j'essaie d'appeler une fonction javascript en passant la variable de page, et dans cette fonction j'essaie d'injecter le HTML recueilli dans le HTML actuel je ne l'ai pas montré, tandis que si j'utilise $ ('# result') .load ('ajax/test.html #container'); Je peux voir le HTML actuel – Lorenzo

Questions connexes