Comunidad de diseño web y desarrollo en internet online

Seleccionar contenido de una url externa para incluirla con jQuery

Citar            
MensajeEscrito el 30 Oct 2012 10:45 pm
Hola.
Necesito extraer contenido de una web a partir de su url, una etiqueta de su html y una clase. A ser posible mediante Ajax. Para poder acoplarla a mi web
Sé seleccionar contenido a partir de una clase, es fácil, pero no sé de una url externa. También sé hacer peticiones Ajax, pero enviando y recibiendo datos en variables.

Agradecería un poco de ayuda y algo de código si es posible. Si pregunto es porque apenas encuentro información sobre este tema en concreto.

Gracias y saludos.

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 31 Oct 2012 12:15 pm
Lo que estás queriendo hacer no es posible. No puedes hacer peticiones Ajax a un dominio diferente del que se está ejecutando debido al Same Origin Policy.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 31 Oct 2012 01:45 pm
Gracias por la información. Una cosa nueva que aprendo.
Entonces sería sin Ajax, y tampoco sé como seleccionar contenido específico de una web externa.
Embeberla en un iframe sí sé, pero no quiero añadir toda la web, solo cierto contenido.

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 31 Oct 2012 03:17 pm
Me temo que tendrás que recurrir a programación del lado del servidor.

En tu servidor, si tienes PHP es bastante sencillo tomar una página de otro servidor, simplemente haciendo algo como:

Código PHP :

$contenido = file_get_contents("http://www.laotraweb.com.ar/pagina.html"):

En $contenido tendrás el código HTML de la página del otro servidor.
Luego usando expresiones regulares (preg_match() o preg_match_all()) podrás extraer la parte que te interesa y devolverla a tu página.
Todo esto bien lo puedes hacer mediante Ajax. La petición Ajax apuntaría al script PHP en tu servidor que se encarga de todo lo anterior. ¿Se comprende?.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 31 Oct 2012 03:45 pm
Sí comprendo, pero no me vale porque pretendo hacer una aplicación de cliente pura, sin alojar nada en el servidor.
Lo que no entiendo es, por qué puedo embeber una página externa en un iframe de mi página (por ejemplo con el código de abajo), y no puedo decir qué quiero mostrar y qué no. No sé si me explico...

Código Javascript :

   $(document).ready(function() {
      $('#search').click(function () {
         var url = 'http://www.paginaweb.com;
         $('#iframe').attr('src', url);
         $('#iframe').reload();
      });
   });

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 31 Oct 2012 04:58 pm
Porque un <iframe> no es una petición Ajax. Pretende ser una ventana dentro de otra. Además el <iframe> no tiene la restricción Same Origin Policy.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 31 Oct 2012 08:17 pm
Sí. Ya lo sé. Lo que digo que no entiendo es por qué tengo que recurrir a programación del lado del servidor tal y como dices en tu respuesta.
Lo de Ajax era una idea, no tengo por qué hacerlo así.

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 31 Oct 2012 11:41 pm
Por que así esta definido en los estándares, si no te gusta siempre puedes crear tu propio navegador y probar suerte con tu propio lenguaje web ^^

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 01 Nov 2012 12:16 pm
vicenrele;
Tal como dice HtrMancera, así es el estándar. Un <iframe> es como una ventana aparte de la ventana donde se carga tu página y por tanto el DOM creado para el <iframe> no forma parte del DOM creado para tu página. Simplemente no puedes acceder al contenido de un <iframe> de la misma manera que no puedes acceder al contenido de la ventana/pestaña que el usuario ha abierto al lado de la ventana/pestaña que contiene tu página. No creo que sea muy difícil de entender ¿no?.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 01 Nov 2012 02:05 pm
Decís que es así el estándar, lo entiendo, pero porque me lo decís vosotros. Sin ánimo de llevaros la contraria, os invito a que probéis lo siguiente: http://jsbin.com/ovedew/1/edit

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 01 Nov 2012 04:32 pm
Si lo que querías mostrar es que ese script lo hace a puro JavaScript, lo comprendo, pero resulta ser que YUI hace una petición a query.yahooapis.com, servidor que además tiene implementado CORS.

O sea, al final hace lo mismo que te había propuesto.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 01 Nov 2012 05:06 pm
Interesante. No sabía nada de la "same origin policy" ni de CORS.
Haga lo que haga YUI, por lo que veo, posibilita hacer lo que pregunto en el post, aunque todavía no sé bien cómo usarlo. Ese ejemplo que he puesto no funciona para algunos id's y no sé por qué. Tendré que seguir investigando.
¿Sabe alguien algún tutorial o ejemplo más que tenga relacióncon lo que pretendo hacer?

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 01 Nov 2012 05:22 pm

DriverOp escribió:


O sea, al final hace lo mismo que te había propuesto.


No es igual que haya algo que te lo haga (YUI), a hacerlo uno mismo. jejje. De todas formas gracias por la orientación.

Por vicenrele

17 de clabLevel



 

chrome
Citar            
MensajeEscrito el 01 Nov 2012 08:18 pm
Yo no dije que sea igual. He dicho que el método es el mismo.

Por DriverOp

Claber

2510 de clabLevel



 

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.