1

Quise experimentar mientras investigo más cosas. Específicamente, lo que estaba intentando, es traer una página web de internet a mi página en servidor local. Funcionó, pero me trajo realmente toda la página, on este código:

$(document).on("click", "a", function(e) {
  $.ajax({
    url: "https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes",
    success: function(data) {
      $("#contenedor").html(data);
    }
  });
});
* {
  /*A todos los elementos de la página web se les dará estos estilos.*/
  padding: 0;
  /*La página no empujará los elemento hacia dentro. Aprovechamiento de toda la ventana.*/
  margin: 0;
  /*La página no iniciara en ningún lado. Aprovechamiento de toda la ventana.*/
  font-family: "Bariol";
  /*Se le agrega un tipografía a todo el documento.*/
}


/*Se terminasn los estilos para todos los elementos de la página.

/*Se modificará el contenedor de la información. Los id se identifican conel # y las clases con el .*/

#contenedor {
  position: absolute;
  /*Se desmaqueta la divisón con id contenedor*/
  top: 10%;
  /*El contenedor se moverá hacia abajo un 20% con respecto a la página.*/
  width: 100%;
  /*El contenedor medirá todo el ancho de la página.*/
}


/*Se modifican los estilos de todas las etiquetas de enlaces.*/

a {
  cursor: pointer;
  /*Se le pone el cursor del dedo.*/
}
<!DOCTYPE html>
<!--Se indica qué tip de documento es.-->
<html lang="es">
<!--Se abre el lenguaje de etiquetas y se agrega un idioma a la página web.-->

<head>
  <!--Se inicia la cabecera de la página.-->
  <meta charset="UTF-8">
  <!--Se define un tipo de caracteres que se utilizarán en la página.-->
  <title>Prueba</title>
  <!--Se le da un título a la página en la pestaña del navegador.-->
</head>
<!--Se finaliza la cabecera de la página.-->

<body>
  <!--Se inicia el cuerpo de la página: Lo que el usuario verá.-->
  <div id="contenedor">
    <!--Se abre una división con identificador de "contenedor" que contendrá toda la información de la página.-->
    <a>Traer pseudoclases.</a>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
<!--Se cierra el cuerpo de la página: Lo que el usuario verá.-->

</html>
<!--Se finaliza la página web.-->

Lo que yo quiero saber es cómo traer sólo una sección de la página de internet a mi página web en servidor local. Algo así como una API. Es decir, la página de ejemplo tiene un ID llamado "wiki-content". ¿Cómo podría hacer que, para cuando le de click a la etiqueta a, me traiga sólo esa sección de página, o en su defecto, si no es posible.

2
  • Es posible si el servidor de destino lo permite. Lo que buscas es usar load. Si no te responde nadie antes, ahora te escribo una respuesta.
    – Alvaro Montoro
    Commented el 18 ago. 2019 a las 2:18
  • Gracias. Estaré esperando. De igual forma iré mirando el evento .load()
    – Saco04
    Commented el 18 ago. 2019 a las 2:19

1 respuesta 1

1

Una cosa que puedes hacer es utilizar el método .load() en lugar de .ajax().

Básicamente, lo que hace .load() es una llamada AJAX a un servidor para obtener/cargar datos (más o menos lo que hace .get()). Pero además, te permite cargar páginas parcialmente, como se indica en la documentación (traducción mía):

El método .load(), a diferencia de $.get(), permite especificar una porción del documento remoto que se va a insertar. Esto se puede conseguir con una sintaxis especial para el parámetro de la url. Si uno o más caracteres de espacio se incluyen en la cadena, la parte de la cadena que sigue al primer espacio en blanco se considerará el selector jQuery que determina el contenido a ser cargado.

Entonces lo que tendrías que hacer es simplemente indicar, después de la URL que quieres cargar, el ID de la sección que quieres que se cargue (en tu caso "#wiki-content"). Algo como esto:

// esto cargará el contenido del ID #wiki-content de la página indicada en el elemento #contenedor
$("#contenedor").load("https://developer.mozilla.org/es/docs/Web/CSS/Pseudo-classes #wiki-content")
4
  • ¿Y si no funciona, significa que el servidor no lo permite? Agradezco esa información. Podría ser útil para algún tipo de portafolio.
    – Saco04
    Commented el 18 ago. 2019 a las 2:32
  • Puedes encontrarte con problemas de CORS. Pero si te funcionaba antes con .ajax(), te debería funcionar también ahora con .load().
    – Alvaro Montoro
    Commented el 18 ago. 2019 a las 3:02
  • Pero no me trae la sección. Me trae toda la página.
    – Saco04
    Commented el 18 ago. 2019 a las 3:05
  • @SantiagoCorreaAguirreSanmar No sé entonces. He creado una demo simple usando el código de mi respuesta y funciona bien. Sólo copia el contenido del div especificado en la página.
    – Alvaro Montoro
    Commented el 18 ago. 2019 a las 3:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.