[SOLUCIONADO] Insertar una ventana de navegacion dentro de la misma

Landa11 · #1 (**permalink**) 25/03/2015, 13:31

Hola que tal,

Mi duda es la siguiente, he estado investigando como poder insertar una ventana nueva en la misma ventana de navegación, esto lo quiero hacer para un menú que tengo realizado y al momento de seleccionar una opción, me abra en la misma ventana la página (URL) que estoy seleccionando y que no la abra en una nueva pestaña.

No sé si se entienda mi concepto y he buscado que se puede realizar con Javascript o con AJAX pero no he encontrado el ejemplo adecuado para ver como funciona.

Gracias por su ayuda y comentarios.

NueveReinas · #2 (**permalink**) 25/03/2015, 13:55

Quizá esto te sea útil:

Código HTML:

Ver original<a href="ENLACE" target="_self">Texto</a>

Landa11 · #3 (**permalink**) 25/03/2015, 15:07

Cita:

Iniciado por NueveReinas

Quizá esto te sea útil:

Código HTML:

Ver original<a href="ENLACE" target="_self">Texto</a>

Gracias por el aporte, ya lo he utilizado pero no es lo que busco.

Digamos que en el espacio que tengo en mi index quiero utilizarlo para visualizar la página dependiendo de la opción que elija, y no que se abra en una nueva pestaña o en la misma pestaña.

esto lo hago para poder utilizar toda la página principal y que sea más cómoda la visualización y el acceso.

NueveReinas · #4 (**permalink**) 25/03/2015, 15:31

¿Te refieres a un iframe?

Deja algún ejemplo gráfico, si tienes.

Landa11 · #5 (**permalink**) 25/03/2015, 15:36

En si tengo sólo mi menú:

Código HTML:

Ver original<!doctype html>
<html lang='es'>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
   <meta charset='utf-8'>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="css/styles.css">
   <link href="imagenes/rhino-icon.PNG" rel="icon" type="image/png" />
   <title>Página Principal</title>
      
</head>
<body>
 
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Zona Norte</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span><b>Tienda1</b></span></a>
            <ul>
               <li><a href='http://www.tienda1.com' target='_blank'><span>tienda 1</span></a></li>
               <li><a href='http://www.tienda2.com' target='_self'><span>tienda 2</span></a></li> 
               <li class='last'><a href='http://www.tienda3.com' target='_blank'><span>tienda 3</span></a></li>
            </ul>
         </li>

Aún faltan más lineas pero más o menos para que te des una idea, este menú tiene el acceso a varias páginas y ya, lo demás dentro del body lo tengo en blanco y ahi quiero meter un tipo iframe que se recargue dependiendo de la opción que elija

NueveReinas · #6 (**permalink**) 25/03/2015, 15:47

Entonces haz una función donde declares que al hacer click en el ID, por ejemplo, "tienda 1", se cree un iframe con esa URL dentro del mismo.

¿Me explico?

NueveReinas · #7 (**permalink**) 25/03/2015, 16:35

Quizá esto te sirva. Es solo un ejemplo, puedes modificarlo como quieras.

JSFIDDLE: http://jsfiddle.net/ft3mf1bh/

Código HTML:

Ver original<div id='cssmenu'>
<ul>
    <li id="home"><span>Home</span></li>
    <li class='active has-sub' id="zona_norte"><span>Zona Norte</span></li>
        <ul>
            <li class='has-sub'><span><b>Tienda1</b></span>
                <ul>
                    <li id="tienda1"><span>tienda 1</span></li>
                    <li id="tienda2"><span>tienda 2</span></li> 
                    <li class='last' id="tienda3"><span>tienda 3</span></li>
                </ul>
            </li>
         </ul>
</ul>
</div>
 
<div class="contenedor"></div>

Código CSS:

Ver original/* ----- ESTILOS DE EJEMPLO ----- */
 
#cssmenu li {
    cursor:pointer;
    list-style:none;
    color:#000;
    background:#CCC;
}
 
#cssmenu li:hover {
    color:white;
    background:#000;
}
 
/* ---------- */
 
.contenedor {
    background:none;
    border:1px solid red;  /* Solo por ejemplo */
    height:600px; /* Solo por ejemplo */
}

jQuery 1.9.1 o mayor

Código Javascript:

Ver original//Enlaces
$enlace_Home = "http://www.wikipedia.org/";
$enlace_ZonaNorte = "http://www.taringa.net/";
$enlace_tienda1 = "http://www.forosdelweb.com/";
$enlace_tienda2 = "http://www.mercadolibre.com.ar/";
$enlace_tienda3 = "http://k31.kn3.net/1/B/6/D/A/3/20F.gif";
 
//Por defecto, carga en enlace de Home, pero esto lo puedes editar según cada página o lo que sea
 $(".contenedor").html('<iframe src=" '+$enlace_Home+' " frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>');
 
 //Establecemos los controles
$("#home").click(function(e) {
    $(".contenedor").html('<iframe src=" '+$enlace_Home+' " frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>');
});
 
$("#zona_norte").click(function(e) {
    $(".contenedor").html('<iframe src=" '+$enlace_ZonaNorte+' " frameborder="0" scrolling="yes" width="100%" height="100%" ></iframe>');
});
 
$("#tienda1").click(function(e) {
    $(".contenedor").html('<iframe src=" '+$enlace_tienda1+' " frameborder="0" scrolling="yes" width="100%" height="100%" ></iframe>');
});
 
$("#tienda2").click(function(e) {
    $(".contenedor").html('<iframe src=" '+$enlace_tienda2+' " frameborder="0" scrolling="yes" width="100%" height="100%" ></iframe>');
});
 
$("#tienda3").click(function(e) {
    $(".contenedor").html('<iframe src=" '+$enlace_tienda3+' " frameborder="0" scrolling="yes" width="100%" height="100%" ></iframe>');
});

Landa11 · #8 (**permalink**) 26/03/2015, 16:24

Cita:

Iniciado por NueveReinas

Entonces haz una función donde declares que al hacer click en el ID, por ejemplo, "tienda 1", se cree un iframe con esa URL dentro del mismo.

¿Me explico?

Amigo. siguiendo tu consejo pude encontrar un ejemplo y lo ando adaptando y hace lo que necesito.

Agregué un div para poder llamar los enlaces y con JS puse la sentencia para que me muestre la página que necesito.

Dejo el código muestra por si alguien en el futuro pueda necesitarlo. Y gracias de nuevo por tu gran ayuda, igual los ejemplos que agregaste me ayudaron a comprender el asunto.

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
    .menu {
        width: 20%;
        height: 25px;
        float: left;
        padding: 10px;  
        text-align: center;
        background: #fff;
        color: #000;
    }
    .menu:hover {
        background: #000;
        color: #fff;    
    }
    #content {
        clear: both;
        background: #e5e5e5;
        padding: 0;
        overflow-y: scroll;
        width: 100%;
        height: 600px;
        border: 0;
    }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(document).ready(function(e) {
        $('#menu1').on('click', function(){
            
            $('#content').attr('src', 'page1.html');
        });
        $('#menu2').on('click', function(){
            $('#content').attr('src', 'page2.html');
            
        });
        $('#menu3').on('click', function(){     
            $('#content').attr('src', 'http://bing.com');
            
        });
        
        
    });
</script>
</head>
<body>
<div id="main">
    <div id="nav">
        <div id="menu1" class="menu">Page 1</div>
        <div id="menu2" class="menu">Page 2</div>
        <div id="menu3" class="menu">Google</div>       
    </div>
    <iframe id="content" src="http://google.com" allowtransparency="1" scrolling="auto"> No Soporta iFrames</iframe>
</div>
</body>
</html>

Lo que necesitaba era que al dar click en el div de Google, me abriera ahí mismo en la página, y así es, ya lo ando implementando en mi menú y funciona de maravilla.