Abrir nueva página dentro de la actual

davidddp · #1 (**permalink**) 22/04/2015, 04:07

Tengo un problema, vamos a ver... pongo en situación:

Tengo una web de turismo, con visitas virtuales, entonces supongamos que estoy en la pagina de una localidad (donde muestro información sobre la ciudad) y en una parte de la web (supongamos que al final) quiero insertar una vista de una camara 360º que he generado con un programa que me crea sus propios directorios y archivos html.

Y dependiendo si es movil o desktop me muestra un html u otro, entonces he puesto este código JavaScript:

Código:

<script type="text/javascript">
	var _url="";
	var _bi=window.navigator.userAgent.toLowerCase();
	if(_bi.indexOf("iphone")>0 || _bi.indexOf("ipad")>0 || _bi.indexOf("ipod")>0) _url="html5/Abadia.html";
	else _url="flash/TourWeaver_Abadia.html";
	window.location.href=_url;
</script>

El problema es que directamente lo que me hace es redireccionarme a esa ruta, y pierdo toda la información de la ciudad, mostrándome solo la imagen de la visita virtual.

Me gustaría saber como poder incrustar esa visita virtual dentro de la misma página de la ciudad (y claro está que me siga permitiendo seleccionar automaticamente que dispositivo es con el que se está visualizando)

PD: supongo que la solución está en cambiar la última linea, o sea la manera de abrir la web. He probado con window.open y nada

Tusade · #2 (**permalink**) 22/04/2015, 04:20

¿Utilizas Java? Porque desde Java y páginas.jsp es fácil incluir una pagina dentro de otra. No tengo ni idea de cómo se podría realizar en javascript.

Quizás con un location.href="urldelapágina.html", pero eso te redirecciona, no te incluye la página...

davidddp · #3 (**permalink**) 22/04/2015, 04:28

Claro eso es precisamente lo que tengo hecho pero me redirecciona. Pues la verdad es que en Java no sabría hacerlo no lo he usado nunca.

Creo que trataré de hacerlo con iframes, pero es que no me gusta mucho porque así tendré que definir un area fijo, y no me gustaría que ocupara lo mismo el iframe de los móviles que el del pc

Tusade · #4 (**permalink**) 22/04/2015, 04:29

Aquí tienes a alguien que pregunta exactamente lo mismo que tú (creo):

http://stackoverflow.com/questions/4967629/insert-external-page-html-into-a-page-html

Le responden que tiene 2 opciones: utilizar un iframe (esto no sé lo que es) o una petición AJAX

davidddp · #5 (**permalink**) 22/04/2015, 06:51

Llevo un buen rato para intentar la solución con AJAX pero no lo consigo, supuestamente está bien el ejemplo pero pone más abajo que hay que añadir tambien "http = createRequestObject ()", lo he añadido a la función "function sendReq(req) " pero sigue sin funcionar.
Si alguien consiguiera hacer funcionar el método de AJAX estaría muy agradecido.

Estoy probando así, si alguien tiene alguna sugerencia...

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>Prueba Ajax</title>
</head>
<body>
        <p>hola</p>
 
        <script type="text/javascript">
 
        function createRequestObject() 
        {
            var obj;
            var browser = navigator.appName;
            if (browser == "Microsoft Internet Explorer") {
                obj = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                obj = new XMLHttpRequest();
            }
            return obj;
        }
 
        function sendReq(req) 
        {    
            http = createRequestObject();
            http.open('get', req);
            http.onreadystatechange = handleResponse;
            http.send(null);
        }
 
        function handleResponse() 
        {    
            if (http.readyState == 4)
            {
                var response = http.responseText;
                document.getElementById('flashcontent').innerHTML=response;
            }
        }
 
         sendReq('http://158.49.247.14/caceresvirtual/contenido/abadia/flash/TourWeaver_Abadia.html');
 
        </script>
        <p>Adios</p>
</body>
</html>

Tusade · #6 (**permalink**) 22/04/2015, 08:37

La petición AJAX sería así:

Código Javascript:

Ver originalwindow.onload = function () { 
            var xmlhttp; // En esta variable recogeremos lo que nos responda el servidor
            
            document.getElementById(id_donde_escribiremos).innerHTML="Cargando..."; /* Mientras
            se hace la petición al servidor, escribimos "Cargando" o algo así para que aparezca en
            pantalla*/
            if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp= new XMLHttpRequest();
                }
            else
                {// code for IE6, IE5
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
                }
                  
            function escribir() { /* Creamos esta función para que JavaScript la utilice una vez le
            responda el servidor, es decir, que significa que el servidor ya nos ha respondido*/
                if (xmlhttp.readyState===4 && xmlhttp.status===200) // Nos da el visto bueno
                    { // Escribimos el resultado
                    document.getElementById(id_donde_escribiremos).innerHTML=xmlhttp.responseText;
                    }
                else { // No nos da el visto bueno
                    document.getElementById(id_donde_escribiremos).innerHTML="ERROR";
                }
            } // Fin de la función escribir
                
            xmlhttp.onreadystatechange = escribir; /*Cuando el servidor le responda, llama a la 
            función escribir anteriormente declarada*/
            xmlhttp.open("POST","http://www.misitio.com/cargar_datos.html",true); /*dirección donde
            se encuentra la pagina html */
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xmlhttp.send("que_datos="+datos+"&que_valor="+valor); /* Si queremos enviarle 
            parámetros al servidor, podemos hacer de esta manera*/   
        }

davidddp · #7 (**permalink**) 23/04/2015, 03:41

Antes de nada muchas gracias, solo alguna preguntilla sobre el código que me acabas de escribir:

¿Todo esto iría dentro de las etiquetas: <script type="text/javascript"> tu codigo </script>?

¿Cuando pones "id_donde_escribiremos", te refieres a que debajo me cree un <div id=nombre></div>?

Y la última: ¿la ultima linea donde pones xmlhttp.send("que_datos="+datos+"&que_valor="+valo r); esa es necesario usarla aunque no quiera mandar nada de vuelta?

Tusade · #8 (**permalink**) 23/04/2015, 08:34

Cita:

¿Todo esto iría dentro de las etiquetas: <script type="text/javascript"> tu codigo </script>?

Sí

Cita:

¿Cuando pones "id_donde_escribiremos", te refieres a que debajo me cree un <div id=nombre></div>?

Un div u otro elemento contenedor para utilizar el innerHTML, sí.

Cita:

¿la ultima linea donde pones xmlhttp.send("que_datos="+datos+"&que_valor="+valo r); esa es necesario usarla aunque no quiera mandar nada de vuelta?

Ni idea, no lo he probado (aunque creo que sí, porque siempre está justo después de haber declarado todas las variables), pero si te da problemas, ponle un "null" a todo el paréntesis.

El AJAX normalmente se utiliza para hacer consultas desde el cliente a las bases de datos de un servidor sin tener que recargar la página. Por eso se le envia parámetros y tal.

Otra cosa que descubrí es que NO hay que utilizar localhost a la hora de poner la dirección del servidor.