¿Puede Javascript leer la fuente de cualquier página web?

78

Estoy trabajando en la captura de pantalla y quiero recuperar el código fuente de una página en particular.

¿Cómo se puede lograr esto con javascript? Por favor, ayúdame.

praveenjayapal
fuente
Aquí hay una página similar en la que puede obtener su respuesta, ya que resuelve mi problema de obtener la fuente de la página HTML stackoverflow.com/questions/1367587/javascript-page-source-code
Asim Sajjad
7
@mikenvck ¿Por qué mencionaste PHP cuando la pregunta era sobre JavaScript? Las respuestas a continuación muestran cómo hacer esto con JavaScript.
Corgrath
para obtener la fuente de un enlace, es posible que deba utilizar $.ajaxpara enlaces externos. aquí está la solución - stackoverflow.com/a/18447625/2657601
otaxige_aol
1
Ni una sola respuesta era Javascript nativo, todas estaban basadas en jquery.
ILikeTacos
1
jQuery es JavaScript nativo. Es solo JavaScript que puede copiar desde jquery.com en lugar de desde stackoverflow.com.
Quentin

Respuestas:

112

Una forma sencilla de empezar, prueba jQuery

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

Más en jQuery Docs

Otra forma de hacer screen scraping de una manera mucho más estructurada es usar YQL o Yahoo Query Language. Devolverá los datos raspados estructurados como JSON o xml.
por ejemplo
, raspemos stackoverflow.com

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

le dará una matriz JSON (elegí esa opción) como esta

 "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 belleza de esto es que puede hacer proyecciones y cláusulas where que, en última instancia, le permiten estructurar los datos raspados y solo los datos que necesita (mucho menos ancho de banda en el cable en última instancia),
por ejemplo.

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

te conseguirá

 "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 ?"
    },
…..

Ahora, para obtener solo las preguntas, hacemos un

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

Tenga en cuenta el título en las proyecciones

 "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 … "
    },
    {
……

Una vez que escribe su consulta, genera una URL para usted

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

en nuestro caso.

Así que al final terminas haciendo algo como esto

var titleList = $.getJSON(theAboveUrl);

y juega con él.

Hermoso , ¿no?

Cherian
fuente
4
Brillante, especialmente por dar pistas sobre la solución del pobre en yahoo que elimina la necesidad de un proxy para obtener los datos. ¡¡Gracias!! Me tomé la libertad de arreglar el último enlace de demostración a query.yahooapis.com: faltaba un signo% en la codificación de URL. ¡Genial que esto todavía funcione!
GitaarLAB
¿Alguna idea de cómo extraer la imagen y la meta descripción de amazon.in/Xiaomi-Redmi-4A-Grey-16GB/dp/… ?
1
query.yahooapis se retiró a partir de enero de 2019. Se ve muy bien, lástima que no podamos usarlo ahora. Vea el tweet aquí: twitter.com/ydn/status/1079785891558653952?ref_src=twsrc%5Etfw
mindoverflow
32

Se puede usar Javascript, siempre que tome cualquier página que esté buscando a través de un proxy en su dominio:

<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>
karim79
fuente
4
¿Por qué se requiere un proxy basado en dominio?
Ravindranath Akila
3
debido a la Política del Mismo Origen
Ferdi265
eso es realmente interesante. presumiblemente hay algún código para instalar en el servidor para que eso suceda?
S Meaden
@ejbytes: en realidad creo que node.js tiene algunos módulos. Supongo que OP quiere raspar la web.
S Meaden
Obtendrá un 'from origin' null 'ha sido bloqueado por la política de CORS: No hay un encabezado' Access-Control-Allow-Origin 'presente en el recurso solicitado.' Sin embargo
Gerrit B
7

Simplemente puede usar XmlHttp(AJAX) para acceder a la URL requerida y la respuesta HTML de la URL estará disponible en la responseTextpropiedad. Si no es el mismo dominio, sus usuarios recibirán una alerta del navegador que dice algo como "Esta página está intentando acceder a un dominio diferente. ¿Quiere permitir esto?"

Cerebrus
fuente
3
Desafortunadamente, no recibirá ninguna alerta, solo bloqueará la solicitud
Alex
5

Como medida de seguridad, Javascript no puede leer archivos de diferentes dominios. Aunque podría haber alguna solución extraña, consideraría un idioma diferente para esta tarea.

nickf
fuente
3

Usando 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>
Sergej Andrejev
fuente
8
No puede solicitar una página fuera de su dominio de esta manera, debe hacerlo a través de un proxy, por ejemplo, $ .get (' mydomain.com/?url=www.google.com' )
karim79
2

Si es absolutamente necesario utilizar javascript, puede cargar la fuente de la página con una solicitud ajax.

Tenga en cuenta que con javascript, solo puede recuperar páginas que están ubicadas bajo el mismo dominio que la página solicitante.

kkyy
fuente
2

Solía ImportIO . Te permiten solicitar el HTML de cualquier sitio web si configuras una cuenta con ellos (que es gratis). Te permiten realizar hasta 50.000 solicitudes por año. No les tomé tiempo para encontrar una alternativa, pero estoy seguro de que hay algunas.

En su Javascript, básicamente solo hará una solicitud GET como esta:

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();

Nota al margen: encontré esta pregunta mientras investigaba lo que sentía que era la misma pregunta, por lo que otros pueden encontrar mi solución útil.

ACTUALIZACIÓN: Creé uno nuevo que me permitieron usar por menos de 48 horas antes de que dijeran que tenía que pagar por el servicio. Parece que cierran su proyecto bastante rápido ahora si no está pagando. Hice mi propio servicio similar con NodeJS y una biblioteca llamada NightmareJS. Puede ver su tutorial aquí y crear su propia herramienta de raspado web. Es relativamente sencillo. No he intentado configurarlo como una API a la que pudiera hacer solicitudes ni nada.

David Hudman
fuente
2

Puedes usar fetch :

const URL = 'https://www.sap.com/belgique/index.html';
fetch(URL)
.then(res => res.text())
.then(text => {
    console.log(text);
})
.catch(err => console.log(err));

Sarah
fuente
1

jquery no es la forma de hacer las cosas. Hacer en purre javascript

var r = new XMLHttpRequest();
    r.open('GET', 'yahoo.comm', false);
    r.send(null); 
if (r.status == 200) { alert(r.responseText); }
Alejandro
fuente
0

Puede generar un XmlHttpRequest y solicitar la página, y luego usar getResponseText () para obtener el contenido.

Vatsal Juneja
fuente
0

Puede utilizar la API de FileReader para obtener un archivo y, al seleccionar un archivo, poner la URL de su página web en el cuadro de selección. Utilice este código:

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")
    }
  }
}
Awesomeness01
fuente
0

Puede omitir la política del mismo origen creando una extensión de navegador o incluso guardando el archivo como .hta en Windows (aplicación HTML).

Jonathan Gray
fuente
0

A pesar de muchos comentarios en sentido contrario, creo que es posible superar el mismo requisito de origen con JavaScript simple.

No estoy afirmando que lo siguiente sea original porque creo que vi algo similar en otro lugar hace un tiempo.

Solo lo he probado con Safari en una Mac.

La siguiente demostración recupera la página en la etiqueta base y mueve su innerHTML a una nueva ventana. Mi secuencia de comandos agrega etiquetas html, pero con la mayoría de los navegadores modernos, esto podría evitarse utilizando externalHTML.

<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>
Neville Hillyer
fuente
Utilizo Safari 5.0.6 con parches de webkit para actualizarlo al equivalente de versiones más recientes. ¿Qué versión de Safari usaste y qué sucedió?
Neville Hillyer
8.0.3. No pasó nada más que algunos errores (que no memoricé) aparecieron en la consola.
Quentin
¿Qué Safari estás usando y cuáles fueron exactamente los errores?
Neville Hillyer
Aún 8.0.3 y si realmente quieres que reproduzca el caso de prueba:TypeError: undefined is not an object (evaluating 'w.document')
Quentin
La explicación más probable de lo que ha logrado hacer es que ha encontrado un agujero de seguridad que existe gracias a alguna combinación de su navegador positivamente antiguo y los parches no oficiales. Eso no es algo de uso práctico en la mayoría de los casos.
Quentin
0
<script>
    $.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('hhttps://example.com/') + '&callback=?', function (data) {
        alert(data.contents);
    });

</script>

Incluya jQuery y use este código para obtener HTML de otro sitio web. Reemplace example.com con su sitio web .

Este método implica que un servidor externo obtenga el HTML del sitio y se lo envíe. :)

Steev James
fuente
0
javascript:alert("Inspect Element On");
javascript:document.body.contentEditable = 'true';
document.designMode='on'; 
void 0;
javascript:alert(document.documentElement.innerHTML); 

Resalte esto y arrástrelo a la barra de marcadores y haga clic en él cuando desee editar y ver el código fuente del sitio actual.

Roger Keene
fuente
0

En linux

  1. descargar slimerjs (slimerjs.org)

  2. descargar firefox versión 59

  3. agregue esta variable de entorno: export SLIMERJSLAUNCHER = / home / en / Letöltések / firefox59 / firefox / firefox

  4. en la página de descarga de slimerjs use este programa .js (./slomerjs program.js):

     var page = require('webpage').create();
     page.open(
      'http://www.google.com/search?q=görény',
       function() 
       {
         page.render('goo2.pdf');
         phantom.exit();
       }
     );
    

Utilice pdftotext para obtener texto en la página.

Henrik Schmid
fuente