0

Tengo una página de prueba que tiene un menú y más abajo un iframe que me muestra una tabla de ventas. Esa tabla de ventas la tengo creada en otro fichero .html en el mismo directorio que la pagina index. Bien, mi idea es que cuando el usuario pulse un elemento del menú, el contenido del iframe cambie. Por ejemplo, cuando pulse en Usuarios, el contenido del iframe sea la tabla de usuarios y cuando pulse en ventas, el contenido sea ventas.

Las tablas de usuarios.html y ventas.html están en el mismo directorio que el index.

Este es mi código de index.

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" id="ventas" href="#">Ventas <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="usuarios" href="#">Usuarios</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="embed-responsive embed-responsive-16by9">
      <iframe id="iframe" class="embed-responsive-item" src="ventas.html" allowfullscreen></iframe>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

¿Alguna ayuda? He leído que se podría hacer con JQuery o JavaScript pero no soy muy bueno en esos lenguajes

2 respuestas 2

2

lo primero que debes hacer es capturar los distintos links del menú en un arreglo, esto lo haces utilizando el método querySelectorAll() y pasándole por parámetro un punto seguido del nombre de la clase (.nav-link)

Luego, asumiendo que tus distintos archivos HTML tienen el mismo nombre que los id de cada link del menú, crear un método que reemplace el valor del atributo "src" del iframe, por el valor del id del hipervínculo clicado.

Por ultimo, debes recorrer el arreglo de hipervínculos, y agregarles un eventListener con el método de reemplazo del iframe.

espero haberte ayudado!

const links = document.querySelectorAll('nav-link');
let iframe = document.getElementById('iframe');

function changeIframeContent(src) {
  iframe.setAttribute('src', `${src}.html`);
}

links.forEach( link => {
  link.addEventListener('click', changeIframeContent(link.id));
})
<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" id="ventas" href="#">Ventas <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="usuarios" href="#">Usuarios</a>
          </li>
        </ul>
      </div>
    </nav>

    <div class="embed-responsive embed-responsive-16by9">
      <iframe id="iframe" class="embed-responsive-item" src="ventas.html" allowfullscreen></iframe>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

2
  • Acabo de ver el código de arriba y supongo que será un código javascript no? Es que al ejecutarlo no me hace nada cuando pulso los elementos del menú
    – Maginon
    el 26 oct. 2020 a las 8:31
  • Si, es javascript, tienes que incluir una etiqueta <script> en tu html, con "src" apuntando al archivo .js que contiene ese codigo, olvide colocarlo en tu html. Saludos! el 26 oct. 2020 a las 12:54
0

Como estás utilizando Bootstrap, creo que la mejor solución es utilizar las pestañas o nav que en la misma librería de Bootstrap están listadas.

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
   
   
   
   
   
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item active" role="presentation">
            <a class="nav-link" id="ventas-tab" data-toggle="tab" href="#ventas" role="tab" aria-controls="ventas" aria-selected="true">Ventas <span class="sr-only">(current)</span></a>
          </li>
          
          
          <li class="nav-item" role="presentation">
            <a class="nav-link" id="usuarios-tab" data-toggle="tab" href="#usuarios" role="tab" aria-controls="usuarios" aria-selected="false">Usuarios</a>
          </li>
        </ul>
      </div>
    </nav>
    
    <div class="tab-content" id="myTabContent">
     
      <div class="tab-pane fade show active" id="ventas" role="tabpanel" aria-labelledby="ventas-tab">
          
          <div class="embed-responsive embed-responsive-16by9">
          <iframe id="iframe" class="embed-responsive-item" src="//getbootstrap.com/docs/4.5/components/navs/" allowfullscreen></iframe>
          </div>
          
      </div>
      
      <div class="tab-pane fade" id="usuarios" role="tabpanel" aria-labelledby="usuarios-tab">
          
          <div class="embed-responsive embed-responsive-16by9">
          <iframe id="iframe" class="embed-responsive-item" src="//getbootstrap.com/docs/4.5/components/alerts/" allowfullscreen></iframe>
          </div>
          
      </div>
      
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body> 

Por favor nota que estoy utilizando prácticamente tu mismo código, sin embargo he tomado nota de las navs dentro de la librería de Bootstrap y he cambiado también el contenido de tus iframe: "ventas" y "usuarios" por enlaces reales que te muestran la web oficial de Bootstrap. Esto con la intención de que veas el ejemplo funcional, pero únicamente tendrás que modificar:

<div class="embed-responsive embed-responsive-16by9">
          <iframe id="iframe" class="embed-responsive-item" src="//getbootstrap.com/docs/4.5/components/navs/" allowfullscreen></iframe>
</div>

Por:

<div class="embed-responsive embed-responsive-16by9">
              <iframe id="iframe" class="embed-responsive-item" src="ventas.html" allowfullscreen></iframe>
</div>

Y hacer lo mismo con "usuarios".

Espero que hayas comprendido la explicación y si tienes dudas adicionales, estaré encantado de ayudarte a resolverlas.

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.