0

Quisiera consultar lo siguiente, me gustaria saber :

Este se trata de un proyecto offline las personas descargan el codigo y ejecutan en desde su pc directo en un navegador y todo es manejado desde el mismo index.html

Tengo un Javascript que contiene declaraciones de una botonera que son cargados en un index.html dentro de un <div id="botonera"></div> los link de la botonera ejecutan un onclick='funcion(#);' que literalmente lo que hacen es cargar en un <div id="contenido"></div> el contenido que esta declarado en la funcion que llama el onclick='funcion(#);'

Eso tal cual como esta funciona, la persona debe hacer click para cargar el contenido de las botoneras, pero ahora Mi duda Sera posible hacer que cuando un usuario pueda llamar por ejemplo a una web esta ejecute de forma automática el onclick requerido, tratare de graficar mi ejemplo:

Si se llama a file:///home/documentos/ruta/index.html#contenido1 entonces se ejecute como que si se le hubiera dado click al boton que llama a la funcion contenido1()

o si se llama a la web file:///home/documentos/ruta/index.html#ejercicios1 se ejecute la funcion ejercicios(1)

file:///home/documentos/ruta/index.html#ejercicios2 se ejecute la funcion ejercicios(2)

Mi codigo de la botonera es la siguiente

function botonera() {

  var avl = a + v + l;

  botonera = "<nav class='navbar navbar-expand-lg navbar-light fixed-top' style='background-color: #c9deff;'>" +
    "<div class='container'>" +
    '<a onclick="bienvenida();" title="Cargar Inicio" class="navbar-brand" href="#Bienvenida">' + logoje + ' </a>' +
    '<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">' +
    '<span class="navbar-toggler-icon"></span>' +
    '</button>' +
    '<div class="collapse navbar-collapse" id="navbarResponsive">' +
    '<ul class="navbar-nav">' +

    '<li class="nav-item">' +
    '<a onclick="bienvenida();" title="Cargar Inicio" class="nav-link active" href="#Bienvenida"><i class="fas fa-home fa-fw"></i> Inicio' +
    '<span class="sr-only">(current)</span>' +
    '</a>' +
    '</li>' +


    '<li id="dropdown-secciones" class="nav-item dropdown">' +
    '<a title="Secciones" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
    '<i class="fa fa-puzzle-piece fa-fw"></i>  Secciones' +
    '</a>' +

    '<div id="dropdown-secci" class="dropdown-menu" aria-labelledby="navbarDropdown">' +

    "<a onclick='videos(1);' name='Videos_Seccion_1' title='Videos' href='#Videos_Seccion_1' class='dropdown-item'>01 Videos Bienvenida " + v + " </a>" +
    "<a onclick='videos(2);' name='Videos_Seccion_2' title='Videos' href='#Videos_Seccion_2' class='dropdown-item'>02 Videos Entorno de Aprendizaje " + v + w + z + " </a>" +
    "<a onclick='videos(3);' name='Videos_Seccion_3' title='Videos' href='#Videos_Seccion_3' class='dropdown-item'>03 Videos Introduccion Informal " + v + w + z + " </a>" +
    "<a onclick='videos(4);' name='Videos_Seccion_4' title='Videos' href='#Videos_Seccion_4' class='dropdown-item'>04 Videos Operadores y Expresiones " + v + w + " </a>" +
    "<a onclick='videos(5);' name='Videos_Seccion_5' title='Videos' href='#Videos_Seccion_5' class='dropdown-item'>05 Videos Controlando el flujo " + v + w + " </a>" +
    "<a onclick='videos(6);' name='Videos_Seccion_6' title='Videos' href='#Videos_Seccion_6' class='dropdown-item'>06 Videos Colecciones de datos " + v + w + " </a>" +
    "<a onclick='videos(7);' name='Videos_Seccion_7' title='Videos' href='#Videos_Seccion_7' class='dropdown-item'>07 Videos Entradas y salidas de datos " + v + w + " </a>" +
    "<a onclick='videos(8);' name='Videos_Seccion_8' title='Videos' href='#Videos_Seccion_8' class='dropdown-item'>08 Videos Programacion de funciones " + v + w + " </a>" +
    "<a onclick='videos(9);' name='Videos_Seccion_9' title='Videos' href='#Videos_Seccion_9' class='dropdown-item'>09 Videos Manejo de excepciones " + v + w + " </a>" +
    "<a onclick='videos(10);' name='Videos_Seccion_10' title='Videos' href='#Videos_Seccion_10' class='dropdown-item'>10 Videos Clases y objetos " + v + w + " </a>" +
    "<a onclick='videos(11);' name='Videos_Seccion_11' title='Videos' href='#Videos_Seccion_11' class='dropdown-item'>11 Videos Herencia " + v + w + " </a>" +
    "<a onclick='videos(12);' name='Videos_Seccion_12' title='Videos' href='#Videos_Seccion_12' class='dropdown-item'>12 Videos Metodos de las colecciones " + v + " </a>" +
    "<a onclick='videos(13);' name='Videos_Seccion_13' title='Videos' href='#Videos_Seccion_13' class='dropdown-item'>13 Videos Modulos y paquetes " + v + " </a>" +
    "<a onclick='videos(14);' name='Videos_Seccion_14' title='Videos' href='#Videos_Seccion_14' class='dropdown-item'>14 Videos Manejo de ficheros " + v + " </a>" +
    "<a onclick='videos(15);' name='Videos_Seccion_15' title='Videos' href='#Videos_Seccion_15' class='dropdown-item'>15 Videos Interfaces graficas con Tkinter " + v + " </a>" +
    "<a onclick='videos(16);' name='Videos_Seccion_16' title='Videos' href='#Videos_Seccion_16' class='dropdown-item'>16 Videos Bases de datos con SQLite " + v + " </a>" +
    "<a onclick='videos(17);' name='Videos_Seccion_17' title='Videos' href='#Videos_Seccion_17' class='dropdown-item'>17 Videos Funcionalidades avanzadas " + v + " </a>" +
    "<a onclick='videos(18);' name='Videos_Seccion_18' title='Videos' href='#Videos_Seccion_18' class='dropdown-item'>18 Videos Documentacion y pruebas " + v + " </a>" +
    "<a onclick='videos(19);' name='Videos_Seccion_19' title='Videos' href='#Videos_Seccion_19' class='dropdown-item'>19 Videos Distribucion " + w + " </a>" +
    "<a onclick='videos(20);' name='Videos_Seccion_20' title='Videos' href='#Videos_Seccion_20' class='dropdown-item'>20 Videos Anexos " + w + " </a>" +
    "<a onclick='videos(21);' name='Videos_Seccion_21' title='Videos' href='#Videos_Seccion_21' class='dropdown-item'>21 Videos Bonus " + w + " </a>" +
    "<a onclick = 'glosario();' title = 'Glosario de Terminos' name = 'Glosario de Terminos' href='#glosario' class='dropdown-item'>Glosario de Terminos <span class = 'glyphicon glyphicon-book' aria-hidden = 'true'> </span> " + i + " </a>" +
    '</div>' +
    '</li>' +

    '<li>' +
    "<a href = '#extra' title = 'Ver Extensiones Instaladas' name = 'Extensiones' onclick = 'extra();' class='nav-link'> Extensiones  " + e + " </a>" +
    '</li>' +

    '<li>' +
    "<a href = '#Creditos' onclick = 'creditos();' title = 'Creditos' name = 'Creditos' class='nav-link'>Creditos " + r + " </a>" +
    '</li>' +

    '</ul>' +
    '</div>' +
    "</div></nav>";

  bienvenida();
  footer_site();

  document.getElementById('botonera').innerHTML = botonera, document.getElementById('foot').innerHTML = foot, document.getElementById('contenido').innerHTML = contenido;
  mensextra();

  $('li a').click(function(e) {
     //e.preventDefault();
     $('a').removeClass('active');
     $(this).addClass('active');

  });


}

1 respuesta 1

0

Puedes obtener la url de la página con window.location.href y manejarla a tu antojo. Por ejemplo:

var funcName = window.location.href.split('#')[1];

if (funcName != undefined) {

    eval(funcName + '()');

}

Tendrías que complicar un poco el ejemplo para manejar los parámetros que recibe la función que quieres ejecutar.

Un saludo!

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.