web-dev-qa-db-fra.com

Javascript peut-il lire la source de n'importe quelle page Web?

Je travaille sur la suppression d’écran et souhaite récupérer le code source d’une page donnée. 

Comment y parvenir avec javascript? Aidez-moi, s'il vous plaît.

68
praveenjayapal

Un moyen simple de commencer, essayez jQuery

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Plus à jQuery Docs

Une autre manière de structurer l'écran consiste à utiliser YQL ou Yahoo Query Language. Il retournera les données récupérées structurées en JSON ou XML.
par exemple.
Grattons stackoverflow.com

select * from html where url="http://stackoverflow.com"

vous donnera un tableau JSON (j'ai choisi cette option) comme ceci 

 "results": {
   "body": {
    "noscript": [
     {
      "div": {
       "id": "noscript-padding"
      }
     },
     {
      "div": {
       "id": "noscript-warning",
       "p": "Stack Overflow works best with JavaScript enabled"
      }
     }
    ],
    "div": [
     {
      "id": "notify-container"
     },
     {
      "div": [
       {
        "id": "header",
        "div": [
         {
          "id": "hlogo",
          "a": {
           "href": "/",
           "img": {
            "alt": "logo homepage",
            "height": "70",
            "src": "http://i.stackoverflow.com/Content/Img/stackoverflow-logo-250.png",
            "width": "250"
           }
……..

La beauté de ceci est que vous pouvez faire projections et où clauses qui vous donnent finalement les données récupérées structurées et uniquement les données ce dont vous avez besoin (beaucoup moins de bande passante par rapport au fil finalement)
par exemple 

select * from html where url="http://stackoverflow.com" and
      xpath='//div/h3/a'

vous obtiendrez 

 "results": {
   "a": [
    {
     "href": "/questions/414690/iphone-simulator-port-for-windows-closed",
     "title": "Duplicate: Is any Windows simulator available to test iPhone application? as a hobbyist who cannot afford a mac, i set up a toolchain kit locally on cygwin to compile objecti … ",
     "content": "iphone\n                simulator port for windows [closed]"
    },
    {
     "href": "/questions/680867/how-to-redirect-the-web-page-in-flex-application",
     "title": "I have a button control ....i need another web page to be redirected while clicking that button .... how to do that ? Thanks ",
     "content": "How\n                to redirect the web page in flex application ?"
    },
…..

Maintenant, pour obtenir uniquement les questions, nous faisons une 

select title from html where url="http://stackoverflow.com" and
      xpath='//div/h3/a'

Notez le titre dans les projections 

 "results": {
   "a": [
    {
     "title": "I don't want the function to be entered simultaneously by multiple threads, neither do I want it to be entered again when it has not returned yet. Is there any approach to achieve … "
    },
    {
     "title": "I'm certain I'm doing something really obviously stupid, but I've been trying to figure it out for a few hours now and nothing is jumping out at me. I'm using a ModelForm so I can … "
    },
    {
     "title": "when i am going through my project in IE only its showing errors A runtime error has occurred Do you wish to debug? Line 768 Error:Expected')' Is this is regarding any script er … "
    },
    {
     "title": "I have a Java batch file consisting of 4 execution steps written for analyzing any Java application. In one of the steps, I'm adding few libs in classpath that are needed for my co … "
    },
    {
……

Une fois que vous écrivez votre requête, elle génère une URL pour vous. 

http://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20html%20where%20url%3D%22http%3A%2F%2Fstackoverflow.com%22%20and%0and%20h%%%%%%%%%% 20% 20% 20% 20% 20% 20xpath% 3D '% 2F% 2Fdiv% 2Fh3% 2Fa'% 0A% 20% 20% 20% 20 & format = json & callback = cbfunc

dans notre cas. 

Donc, finalement, vous finissez par faire quelque chose comme ça 

var titleList = $.getJSON(theAboveUrl);

et jouer avec. 

Beautiful, n'est-ce pas?

108
Cherian

Javascript peut être utilisé, à condition que vous récupériez la page que vous cherchez par le biais d'un proxy sur votre domaine:

<html>
<head>
<script src="/js/jquery-1.3.2.js"></script>
</head>
<body>
<script>
$.get("www.mydomain.com/?url=www.google.com", function(response) { 
    alert(response) 
});
</script>
</body>
30
karim79

Vous pouvez simplement utiliser XmlHttp (AJAX) pour atteindre l'URL requise et la réponse HTML de l'URL sera disponible dans la propriété responseText. Si ce n'est pas le même domaine, vos utilisateurs recevront une alerte du navigateur disant: "Cette page tente d'accéder à un autre domaine. Voulez-vous l'autoriser?"

7
Cerebrus

Par mesure de sécurité, Javascript ne peut pas lire les fichiers de différents domaines. Bien qu'il puisse y avoir une solution de contournement étrange, je considérerais un langage différent pour cette tâche.

6
nickf

En utilisant jquery

<html>
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" ></script>
</head>
<body>
<script>
$.get("www.google.com", function(response) { alert(response) });
</script>
</body>
3
Sergej Andrejev

Si vous devez absolument utiliser javascript, vous pouvez charger le source de la page avec une requête ajax. 

Notez qu'avec le javascript, vous ne pouvez récupérer que les pages situées dans le même domaine que la page demandée.

2
kkyy

J'ai utilisé ImportIO . Ils vous permettent de demander le code HTML à n’importe quel site Web si vous créez un compte avec eux (ce qui est gratuit). Ils vous permettent de faire jusqu'à 50 000 requêtes par an. Je ne leur ai pas pris le temps de trouver une alternative, mais je suis sûr qu'il y en a.

En Javascript, vous ferez simplement une requête GET comme celle-ci:

var request = new XMLHttpRequest();

request.onreadystatechange = function() {
  jsontext = request.responseText;

  alert(jsontext);
}

request.open("GET", "https://extraction.import.io/query/extractor/THE_PUBLIC_LINK_THEY_GIVE_YOU?_apikey=YOUR_KEY&url=YOUR_URL", true);

request.send();

Note: J'ai trouvé cette question en cherchant ce que je pensais être la même question, afin que d'autres puissent trouver la solution utile.

MISE À JOUR: j'en ai créé un nouveau qu'ils m'ont autorisé à utiliser moins de 48 heures avant de me dire que je devais payer le service. Il semble qu’ils aient arrêté votre projet assez rapidement si vous ne payez pas. J'ai créé mon propre service similaire avec NodeJS et une bibliothèque appelée NightmareJS. Vous pouvez voir leur tutoriel ici et créer votre propre outil de nettoyage Web. C'est relativement facile. Je n'ai pas essayé de le configurer en tant qu'API auquel je pourrais faire des demandes ou quoi que ce soit.

2
David Hudman

Vous pouvez utiliser FileReader API pour obtenir un fichier et, lors de la sélection d'un fichier, placez l'URL de votre page Web dans la zone de sélection . Utilisez ce code:

function readFile() {
    var f = document.getElementById("yourfileinput").files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
        alert(r.result);
      }
      r.readAsText(f);
    } else { 
      alert("file could not be found")
    }
  }
}
0
Awesomeness01
<script>
    $.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('hhttps://example.com/') + '&callback=?', function (data) {
        alert(data.contents);
    });

</script>

Incluez jQuery et utilisez ce code pour obtenir le code HTML d'un autre site Web. Remplacez example.com par votre site web.

Cette méthode implique qu'un serveur externe récupère les sites HTML et vous les envoie. :)

0
Steev James

Vous pouvez générer un XmlHttpRequest et demander la page, puis utiliser getResponseText () pour obtenir le contenu.

0
Vatsal Juneja

Vous pouvez contourner la même stratégie d'origine en créant une extension de navigateur ou même en enregistrant le fichier au format .hta dans Windows (Application HTML).

0
Jonathan Gray

En dépit de nombreux commentaires contraires, j'estime qu'il est possible de surmonter la même exigence d'origine avec un simple JavaScript.

Je ne prétends pas que ce qui suit est original parce que je crois avoir vu quelque chose de similaire ailleurs il y a quelque temps.

Je n'ai testé cela qu'avec Safari sur un Mac.

La démonstration suivante récupère la page dans la balise de base et déplace son innerHTML vers une nouvelle fenêtre. Mon script ajoute des balises HTML, mais avec la plupart des navigateurs modernes, cela pourrait être évité en utilisant outerHTML.

<html>
<head>
<base href='http://apod.nasa.gov/apod/'>
<title>test</title>
<style>
body { margin: 0 }
textarea { outline: none; padding: 2em; width: 100%; height: 100% }
</style>
</head>
<body onload="w=window.open('#'); x=document.getElementById('t'); a='<html>\n'; b='\n</html>'; setTimeout('x.innerHTML=a+w.document.documentElement.innerHTML+b; w.close()',2000)">
<textarea id=t></textarea>
</body>
</html>
0
Neville Hillyer