Javascript inter-domaine - Pull Meta Tags

Question

Je construis une application Meteor.js et l'une des choses que je voudrais faire est de tirer le titre et les balises meta description d'une page enregistrée. J'utilise this cross domain program et la moitié du code fonctionne.

Voici l'extrait; il prend la valeur donnée sous une forme marquée « url » et exécute le code:

$.get(url, function(response){ 
     if ((suggestedTitle=((/<title>(.*?)<\/title>/m).exec(response.responseText))) != null){ 
      $('#title').val(suggestedTitle[1]); 
     }else{ 
      $('#title').val(url); 
     } 
     if ((suggestedDesc=($('meta[name=description]').attr('content'))) != undefined){ 
     $('#desc').val(suggestedDesc[1]); 
     }else{ 
     $('#desc').val('Description for this page cannot be found.'); 
     } 
    }); 

Je reconnais que ce n'est pas préférable d'utiliser des expressions régulières pour analyser HTML (ouvert aux suggestions sur une alternative, mais je n'ai pas regardé dans celui-ci trop soigneusement) mais à part cela, ce script tire avec succès le titre de l'URL ou renvoie l'adresse Web si elle ne peut pas être trouvée, mais la description échoue et renvoie juste le texte de secours. J'apprécierais de l'aide, merci :)

Answer 1

Au lieu d'utiliser regex ou jQuery pour analyser la réponse, utilisez les méthodes DOM pour parcourir le texte de la réponse. Essayez ceci:

$.ajax({ 
    url: "http://www.google.com", 
    type: "GET", 
    async: true 
}).done(function (response) { 
    var div = document.createElement("div"), 
     responseText = response.results[0], 
     title, metas, meta, name, description, i; 
    div.innerHTML = responseText; 
    title = div.getElementsByTagName("title"); 
    title = title.length ? title[0].innerHTML : undefined; 
    metas = div.getElementsByTagName("meta"); 
    for (i = 0; i < metas.length; i++) { 
     name = metas[i].getAttribute("name"); 
     if (name === "description") { 
      meta = metas[i]; 
      description = meta.getAttribute("content"); 
      break; 
     } 
    } 
    console.log("Title:", title); 
    console.log("Description:", description); 
}).fail(function (jqXHR, textStatus, errorThrown) { 
    console.log("AJAX ERROR:", textStatus, errorThrown); 
}); 

DEMO:.http://jsfiddle.net/KLdsG/3/

Je mets le plug-in que vous avez fourni en haut (il est minifiés il conviendra et vous pouvez toujours voir votre propre code

De toute évidence, cela utilise http://www.google.com, mais vous devriez pouvoir mettre n'importe quelle URL dedans et cela fonctionne de la même manière, vous pouvez aussi mettre ceci dans une fonction réutilisable - je voulais juste montrer un exemple. $.ajax()

Vous ne pouvez pas utiliser directement response.responseText, car l'élément renvoyé est un objet composé de quelques éléments. Pour obtenir le code HTML, vous pouvez utiliser response.results[0]. response.results est évidemment un tableau, et je ne sais pas quoi d'autre pourrait être là (comme dans l'index 1, 2, 3, etc.).

Et j'ai trouvé des choses bizarres qui se passaient quand j'ai essayé d'utiliser $(response.results[0]), donc je suis juste coincé avec la manipulation DOM normale.