Abrir contenido externo HTML en un div contenedor

Salome · #1 (**permalink**) 12/07/2014, 08:52

Hola a tod@s...

Estoy intentando abrir páginas html en un div contenedor, es decir, tengo una página index, la cual tiene un menú que llama a otras páginas html, la idea es que el contenido de esas páginas se cargue en la que tengo el menú en un div contenedor.

Todo marcha bien en internet explorer y en mozilla pero en chrome no, este es mi código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#nav a").each(function(){
      var href = $(this).attr("href");
      $(this).attr({ href: "#"});
      $(this).click(function(){
         $("#show").load(href);
      });
   });
});
</script>
</head>

<body>
<ul id="nav">
   <li><a href="servicios.html">Servicios</a></li>
   <li><a href="dos.htm">Enlace Dos</a></li>
   <li><a href="link.htm">Otro link</a></li>
   <li><a href="1337.htm">1337</a></li>
   <li><a href="creacionismo.htm">iDIotas</a></li>
</ul>

<div id="show">
</div>
</body>
</html>

El error que me sale en Chrome (Que hace que no cargue el contenido) es el siguiente:

Código:

XMLHttpRequest cannot load file:///C:/Users/Salome/Desktop/Prueba/servicios.html. Received an invalid response. Origin 'null' is therefore not allowed access.

Alexis88 · #2 (**permalink**) 12/07/2014, 09:47

Según puedo deducir del mensaje, estás intentando ejecutar la carga asíncrona de archivos que están en una ubicación que no corresponde a la de la carpeta de instalación del servidor. Asegúrate de que todos tus archivos estén en dicho directorio, que por lo general suele estar en C:\AppServ\www para AppServ y en C:\wamp\www para WAMP. También te sugiero hacer la carga de los contenidos de esta forma:

Código Javascript:

Ver original$("#nav a").click(function(event){
    event.preventDefault();
    $("#show").load($(this).prop("href"));
});

De este modo, cancelas el evento que se produce cuando pulsas un enlace, el cual consiste en redireccionar hacia la dirección indicada en su atributo href y luego realizar la cargas en el <div>.

Saludos

PHPeros · #3 (**permalink**) 12/07/2014, 09:47

No te deja acceder a archivos locales por motivos de seguridad.

Se puede configurar para que te lo permita, al menos en win.

Salome · #4 (**permalink**) 13/07/2014, 20:55

Hola, gracias a los dos :)

Pero aunque cambié el javascript y di permisos en chrome sigue sin funcionar en este navegador, me sigue apareciendo el mismo error.

:(

Alexis88 · #5 (**permalink**) 13/07/2014, 21:11

¿Probaste con hacerlo usando un servidor? Porque por la ruta que muestra el mensaje de error, me da la impresión de que no estás ejecutando el archivo desde el servidor y para usar Ajax, es necesario trabajar desde uno.

Saludos

Salome · #6 (**permalink**) 13/07/2014, 21:49

es local, de hecho necesito que me funcione así, local.

Funciona bien en IE y en Mozilla, es sólo en chrome donde no lo hace...

Alexis88 · #7 (**permalink**) 13/07/2014, 22:44

Me refiero a ejecutar el archivo desde tu servidor local, es decir, si tienes el AppServ o el WAMP, tienes que guardar los archivos con los que trabajarás en las rutas que te indiqué más arriba y cuando los quieras usar, tendrás que ingresar escribiendo en la barra de direcciones la ruta del servidor seguida de la carpeta que contiene a los archivos y finalmente, el nombre del archivo que deseas ver, por ejemplo: http://localhost/pruebas/demo.php. Si pretendes ejecutarlo simplemente dándole doble clic para abrirlo en el navegador, no va a funcionar ni siquiera estando en la carpeta del servidor, tienes que escribir la ruta en la barra de direcciones.

Saludos

Salome · #8 (**permalink**) 15/07/2014, 16:54

No estoy usando servidor local, no es para usarlo o exponerlo, es para presentar una documentación con html.

Cuando entregue este contenido mi usuario simplemente no tendrá un servidor porque no es necesario y tampoco estará expuesto en internet.

Lo que me ha parecido "curioso" es que sea solo en Chrome donde no se vea.

Alexis88 · #9 (**permalink**) 15/07/2014, 18:01

Si no deseas ejecutar esto en un servidor, puedes hacer la carga en un elemento <iframe> al cual solamente le cambiarías el valor del atributo src.

Saludos

juaarias · #10 (**permalink**) 17/09/2014, 21:15

me sucede lo mismo, me da ese error en chrome pero no firefox, pudiste resolverlo?

NDOmx · #11 (**permalink**) 20/09/2014, 11:24

Es cierto lo que te comentan. No es con un servidor HTTP para que lo puedas hacer con ajax.
También es correcto que si no puedes con ajax lo puedes solucionar con iframes.

Te dejo el que funciona con iframe.

Saludos.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#nav a").each(function(){
      var href = $(this).attr("href");
      $(this).attr({ href: "#"});
      $(this).click(function(){
         //$("#show").load(href);
         $("#show").html('<iframe src="' + href + '" style="border:none;"></iframe> ');
      });
   });
});
</script>
</head>
 
<body>
<ul id="nav">
   <li><a href="servicios.html">Servicios</a></li>
   <li><a href="dos.htm">Enlace Dos</a></li>
   <li><a href="link.htm">Otro link</a></li>
   <li><a href="1337.htm">1337</a></li>
   <li><a href="creacionismo.htm">iDIotas</a></li>
</ul>
 
<div id="show">
</div>
</body>
</html>