¿Cómo añadir una función a un enlace?

paskuini · #1 (**permalink**) 17/06/2011, 06:26

Me explico; no me refiero a cómo llamar una función desde un enlace.

Lo que estoy intentando hacer es que al enlazar a una página, en el momento de cargarla ejecute una función. Algo así (aunque así no es jaja)

Código:

<a href="pagina.html?funcion()">Enlace</a>

La función deberúia ejecutarse en el momento que carga la página a la que se enlaza.

¿Puede hacerse solo con javascript?

¿Cómo?

Muchas gracias compis!

Naahuel · #2 (**permalink**) 17/06/2011, 06:57

Y podrías hacerlo pasando un hash por el url.
Mirá estos ejemplos:

Llamar a la funcion hola():
http://jsbin.com/ugegu5/6#hola

Llamar a la función adios()
http://jsbin.com/ugegu5/6#adios

Código fuente:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script>
  //llamar a la funcion con el nombre del hash
 eval(location.hash.split('#')[1] + '()');
  
  function hola(){
    alert('hola hola');
  }
  
  function adios(){
    alert('adios adios');
  }
  </script>
</head>
<body>
  <p>Llamar a una funcion desde el hash</p>
</body>
</html>

paskuini · #3 (**permalink**) 20/06/2011, 01:35

no me funciona :S

Naahuel · #4 (**permalink**) 20/06/2011, 05:46

El ejemplo que puse ahí sí funciona. ¿Podrías mostrarnos tu código a ver cómo estás haciendo?

paskuini · #5 (**permalink**) 21/06/2011, 01:55

Pues no debí saberlo usar. ¿Podrias explicarmelo un poco?

Naahuel · #6 (**permalink**) 21/06/2011, 06:07

Podrías mostrarme el código que has hecho y te puedo indicar dónde está tu error.

Te hice un ejemplo mucho más elaborado que espero entiendas mejor. Está comentado para que lo sigas paso a paso.

No llamar a ninguna función:
http://nahueljose.com.ar/llamar-funcion.html

Llamar a la función escribir_hola() (la cual sí existe):
http://nahueljose.com.ar/llamar-func...#escribir_hola

Llamar a la función mostrar_alert() (sí existe):
http://nahueljose.com.ar/llamar-func...#mostrar_alert

Llamar a la función funcion_loca() (la cual no existe):
http://nahueljose.com.ar/llamar-func...l#funcion_loca

Código fuente:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script>
function analizar_hash(){
    //analizar el hash para ver si hay una funcion
    var funcion = location.hash ? location.hash.split('#')[1] : false;
    
    //si funcion no es false (es decir, si se escribio algo en el hash) intentar llamar a la funcion
    if(funcion){
        try{
            //intentar llamar a la funcion obtenida
            eval(funcion + '()');
        }catch(err){
            //aca hago algo si ocurrio un error llamando la funcion.
            //se llamo a una funcion que no existe!
            document.getElementById('txt').innerHTML = 'Se llam&oacute; a la funcion '+ funcion + ', la cual no existe. Error: <span style="color:red;">'+ err +'</span>';
        }
    }
}
 
 
//mis funciones
function escribir_hola(){
    document.getElementById('txt').innerHTML = 'Se llam&oacute; a la funcion "escribir_hola()"';
}
function mostrar_alert(){
    alert('Se llamo a la funcion "mostrar_alert()"');
}
 
</script>
</head>
<body onload="analizar_hash();">
  <p id="txt">No se llam&oacute; a ninguna funci&oacute;n o no se escribi&oacute; ning&uacute;n comando en el hash.</p>
</body>
</html>

El ejemplo funciona en todos los navegadores en los que lo he probado (IE6+, Chrome, Firefox).
Lo que hace es simple. Analiza el hash (el valor de # que se ponga en el url) para ver si hay una función. Si no hay un hash, la variable funcion es false y no hace nada.
Si hay algo escrito después del hash, se intenta (con "try catch") llamar a la función. Si esta existe, se la llama correctamente. De no existir, hay un manejo de error en el catch.

Y eso es todo :)

paskuini · #7 (**permalink**) 21/06/2011, 07:08

muchas gracias nahuel! me lo miro mejor y te comento.
En cuanto al código no puedo colgarlo porque pertenece a la empresa!
De todas formas te explico mejor lo que quiero hacer, no vaya a ser que no nos estemos entendiendo.

Tengo dos páginas "A" y "B"
"A" es la página principal
"B" es una plantilla para los productos (tengo otro post abierto referente a esta página)

En la página "A" muestro los contenidos haciendo display block/none con varios div's. 3 en total (presentación, contacto y productos);

Entonces: lo que busco es que al abrir productos desde "B" me ejecute la función que oculta el div de la 'bienvenida' y muestre el de 'productos', en "A"

¿Se entiende? es sencillo, pero me hago un lio explicándolo

paskuini · #8 (**permalink**) 22/06/2011, 05:52

mira, me han dejado colgarlo si quitaba "palabras clave"

Página "A"

Código HTML:

<html >
<head>
    <script type="text/javascript" src="jquery-1.5.2.js"></script>

*********<style>

    <script>
		function precargar(imagen,origen) {	eval(imagen+' = new Image()') ; eval(imagen+'.src = "'+origen+'"') }
		function previo(titulo_Imagen,Path_Imagen,ID_Contenido){
			/* Identificar Imagen */
				var titul = document.getElementById('titulo_foto')
				var titulo = titul.innerHTML=titulo_Imagen
			/* Averiguar tamaño de imagen */
				var newImg = new Image();
				newImg.src = Path_Imagen;
			/* Precargar imagen */
				precargar('titulo_Imagen','Path_Imagen');
			/* Tomar tamaño de imagen y ajustar contenedor */
				var altura = newImg.height;
				var ancho  = newImg.width;
				var sup_ancho = ancho+40;
				var sup_altura = altura+70;
			/* Alinear contenedor */
				var img2width =sup_ancho;
				var alignwidth= -0.5*(img2width);
			/* Contenidos
				var cont = contenidos+'['+ID_contenido+']';
				document.getElementById('cont').style.display='block'; */
			document.getElementById('vistaprevia').style.backgroundImage="url('" + Path_Imagen + "')";
			document.getElementById('images2').style.display='block';
			document.getElementById('images2').style.width= sup_ancho +'px';
			document.getElementById('images2').style.height= sup_altura +'px';
			document.getElementById('images2').style.position='relative';
			document.getElementById('images2').style.marginLeft='50%';
			document.getElementById('images2').style.left=alignwidth +'px';
			document.getElementById('vistaprevia').style.backgroundPosition='center';
			document.getElementById('vistaprevia').style.backgroundRepeat='no-repeat';
			document.getElementById('vistaprevia').style.padding='0px';
			document.getElementById('vistaprevia').style.margin='20px';
			document.getElementById('vistaprevia').style.width=ancho +'px';
			document.getElementById('vistaprevia').style.height=altura +'px';
			}
		function chapa(){document.getElementById('images2').style.display='none';}

cadVariables = location.search.substring(1,location.search.length);
arrVariables = cadVariables.split("&");
for (i=0; i<arrVariables.length; i++) {
	arrVariableActual = arrVariables[i].split("=");
	if (isNaN(parseFloat(arrVariableActual[1])))
		eval(arrVariableActual[0]+"='"+unescape(arrVariableActual[1])+"';");
	else
		eval(arrVariableActual[0]+"="+arrVariableActual[1]+";");
}
/* Funcion para pasar variables de una página a otra */
function pasarVariables(pagina,nombres){
pagina +="?";
nomVec=nombres.split(",");
for(i=0;i<nomVec.length;i++)
pagina +=nomVec[i] + "=" + escape(eval(nomVec[i]))+"&";
pagina=pagina.substring(0,pagina.length-1);
location.href=pagina;
}
var		varFamilia_formato		="<font style=\"padding-left:20px;\">"+varFamilia+"</font>"
var		varNombre_formato	="<font class=\"subtitulo\">"+varNombre+"</font>"
</script>
</head>
<body>
	<div style="position:absolute; top:110px; width:100%; border-bottom:2px solid rgb(186,0,181);"></div>
<div id="kontainer"    >
    <div id="cabecera"><div onClick="window.location.reload()"></div></div>
    <div id="title">
        <p class="titulo">
            &raquo;<script>document.write(varFamilia_formato)</script>
        </p>
    </div>
    <div id="images">
      <div id="img_prev">
        <ul>
          <div id="img_prev_">
            <li onclick="previo('lalalala','lalalala/Estat.jpg')">
            	<a class="sombra" style="display:block;"></a>
                <script>document.write(miniFoto1)</script>
            </li>
            <li onclick="previo('#CC66CC')">
            	<a class="sombra" style="display:block;"></a>
                <script>document.write(miniFoto2)</script>
            </li>
            <li onclick="previo('#FFCCFF')">
            	<a class="sombra" style="display:block;"></a>
                <script>document.write(miniFoto3)</script>
            </li>
            <li onclick="previo('#FF0000')">
            	<a class="sombra" style="display:block;"></a>
                <script>document.write(miniFoto4)</script>
            </li>
            <li onclick="previo('#00FF00')">
            	<a class="sombra" style="display:block;"></a>
                <script>document.write(miniFoto5)</script>
            </li>
            <li onclick="previo('#0000FF')">
            	<a class="sombra" style="display:block;"></a>
                <script>document.write(miniFoto6)</script>
            </li>
          </div>
        </ul>
      </div>
    </div>
    <div id="images2" style="display:none;">
        <p>
            <div id="titulo_foto"></div>
            <a style="float:right;cursor:pointer; position:absolute; top:20px; right:20px;" onclick="chapa()">[cerrar]</a>
        </p>
        <p id="vistaprevia" style="display:block">
        </p>
    </div>
    <div id="content"> <!--Introducir Variable Javascript-->
        <p class="parrafo_indent_1">
        	<script>document.write(varNombre_formato)</script>
            <script>document.write(varDescripcion)</script>
        </p>
        <p class="parrafo_indent_3">
        </p>
        <blockquote>
   			<script>document.write(varQuote);</script>
        </blockquote>
    </div>
    <div>
        <div style="width:100%; height:110px;" onClick="window.location.reload()"></div>
        <ul id="menu_nav" class="navigator navigator-horizontal">
            <li><a href="./lalalala.html/#reload">Ibermedic</a></li>
            <li><a href="./lalalala.html#navContacto">Contacto</a></li>
            <li><a href="./lalalala.html#navProductos()">Productos</a></li>
            <li><a href="http://www.promaternity.com" target="_blank">Promaternity.com</a></li>
        </ul>
    </div>
</div>    
</body>
</html>

Página "B"

Código HTML:

<style>
	body 						{ 	margin:0; padding:0; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:0.9em; font-family:"kozgopro-extralight"; src: url('kozgopro-extralight.otf') format(“opentype”); }
</style>
<link rel="stylesheet" href="myStyles.css" />
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript" src="shortcuts_v1.js"></script>
<script type="text/javascript" src="myScripts.js"></script>
</head>

<body onload="loAd();">
<script type="text/javascript" src="navigator.js"></script>
<script type="text/javascript" src="lalalala.js"></script>
<script type="text/javascript" src="contact.js"></script>
<script>
function analizar_hash(){
    //analizar el hash para ver si hay una funcion
    var funcion = location.hash ? location.hash.split('#')[1] : false;
    //si funcion no es false (es decir, si se escribio algo en el hash) intentar llamar a la funcion
    if(funcion){
        try{
            //intentar llamar a la funcion obtenida
            eval(funcion + '()');
        }catch(err){
            //aca hago algo si ocurrio un error llamando la funcion.
            //se llamo a una funcion que no existe!
            document.getElementById('txt').innerHTML = 'Se llam&oacute; a la funcion '+ funcion + ', la cual no existe. Error: <span style="color:red;">'+ err +'</span>';
        }
    }
} 
	function navlalalala(){pskShow('lalalala'); pskHide('contacto'); pskHide('productos')}
	function navContacto(){pskHide('lalalala'); pskShow('contacto'); pskHide('productos')}
	function navProductos(){pskHide('lalalala'); pskHide('contacto'); pskShow('productos')}
</script>
<ol id="productos" class="steps">
	<li><ol><h1>Productos</h1></ol></li>
    <li style="margin-left:35px;">
        <div id="mobiliario" class="categoria">Producto</div>
            <div id="mobiliario_" class="subcategoria"><ul>
                <li><a id="mobiliario_1">Producto</a>
                    <ul id="mobiliario_1_" style="display:none;">
                        <li onclick="shader(1);"><a href="lalalala_productos_plantilla.html?varFamilia=Prueba&varNombre=65464&varDescripcion=xxxxx" target="_self">Producto</a></li>
        <div id="emergencias" class="categoria">Producto</div>
            <div id="emergencias_" class="subcategoria"><ul>
                <li><a id="emergencias_1">Producto</a>
                    <ul id="emergencias_1_" style="display:none;">
                        <li onclick="shader(78);">Producto</li>
                        <li onclick="shader(79);">Producto</li>
                    </ul>
                </li>
            </ul></div>
	</li>
</ol>
</body>
</html>

paskuini · #9 (**permalink**) 22/06/2011, 05:53

Cita:

Iniciado por style

Código HTML:

 <style>
		@font-face								{ font-family: "kozgopro-extralight";src: url("kozgopro-extralight.otf") format("opentype");}
		#kontainer								{ width:700px; height:100%; margin-left:50%; margin-bottom:50px; padding:0; position:relative; left:-350px; font-size:1em;}
		#cabecera								{ width:100%; background-image:url(cabecera.png);  background-position:center;  background-repeat:no-repeat;  width:100%; 
													height:110px; border-bottom:2px solid rgb(186,0,181); cursor:pointer; }
		#cabecera>div							{ height: 110px; width: 100%;}
	/* Estilos para "galería de imágenes" */
		#images									{ background: #CCC; border-bottom: 1px solid rgb(186,0,181); border-top: 1px solid rgb(220,127,218); 
													display: block; height: 145px; max-height: 500px;}
		#images2								{ background: none; border: 1px solid #666; margin-top: 20px;}
			#images2 p							{ margin-top:50px;}
			#vistaprevia						{ border: 1px solid #666; display: block; margin: 10px; width:auto;}
			#titulo_foto						{ position:absolute; top:20px; left:20px; }
		#img_prev								{ background: #FFF; border: 1px solid #666; display: block; height: 100px; left: -302px; margin-left: 50%; 
													margin-top: 20px; position: relative; width: 604px;}
			#img_prev ul						{ display: block; margin: 0; margin-left: auto; padding: 0; text-align: center;}
				#img_prev ul li					{ border-left: 1px dotted black; display: block; float: left; height: 100px; list-style: none; width: 100px;}
				#img_prev ul div :first-child	{ border:none; cursor:pointer;}
			#img_prev_							{ width: 615px;}
				.sombra 						{ background:url(1.png); position:relative; width:100%; height:100%; z-index:10}
				.sombra:hover 					{ background:none;}
				.miniatura 						{ display:block; background:none; position:relative; top:-100px; width:100%; height:100%; z-index:9;}
		#title									{ display:block; border-bottom: 1px solid rgb(186,0,181); color: #666; display: block; font-size: 1.5em; position: relative; text-align: left; text-transform: uppercase;}
	/* Estilos para contenido TEXTO */
		#content								{ display: block; margin-left: 20px; margin-right: 20px; position: relative; text-align: justify;}
			.titulo									{ display:block; font-size:1em; color:#751848; text-transform:uppercase; margin-top:50px;}
			.subtitulo								{ display:block; font-size:1.2em; font-weight:normal; text-decoration:underline; text-transform:uppercase; color:#751848; margin-top:10px; padding-left:50px;}
			.parrafo_indent_1						{ display:block; margin:0px; margin-top:10px; word-wrap: break-word; overflow:hidden;}
			.parrafo_indent_2						{ display:block; margin-left:15px; margin-top:10px;}
			.parrafo_indent_3						{ display:block; margin-left:30px; margin-top:10px;}
			.listas									{ display:block; font-size:1em; list-style:circle; color: #751848;}
			.listas p 								{ color:#000; line-height:0.5em;}
			.listas li:hover						{ list-style:disc;}
			blockquote 								{ background:#CCC; display: block;padding: 0 100px;width:75%; font-style:italic; color:#333; margin-left:-20px;}
				blockquote:before, blockquote:after {color:#751848;display: block;font-size: 420%;}
				blockquote:before {content: '\201C';height: 0;margin-left: -0.8em; padding-top:10px;}
				blockquote:after {content: '\201D';height: 30px;margin-top: -25px; padding-bottom:10px;margin-left: 7.3em;}
				
				
				
/* Estilos para menú de navegación principal y cabecera */
	ul.navigator,
	ul.navigator li,
	ul.navigator ul 			{ 	margin: 0; padding: 0; font-weight:bold; border-top:1px solid rgb(186,0,181); list-style: none; }
	ul.navigator 				{ 	position: relative;z-index: 597; float: left; }
	ul.navigator li 			{ 	padding: 7px 10px; float: left; line-height: 1.3em; border-style: solid; border-width: 1px 1px 1px 0; border-color: #fff #fff rgb(238,191,236) #fff; background-color:#f1f1f1; color: #000; }
	ul.navigator li.hover,
	ul.navigator li:hover 		{ 	position: relative; z-index: 599; cursor: default; background-color:#e7e7e7; color: #000; }
	ul.navigator>li a:hover 	{ 	color:#751848; }
	ul.navigator ul 			{ 	margin-top: 1px; visibility: hidden; position: absolute;top: 100%; left: 0; z-index: 598; width: 100%; width: 150px; }
	ul.navigator ul li 			{ 	float: none; font-weight: normal; }
	ul.navigator ul ul 			{ 	top: -3px; left: 100%; }
	ul.navigator li:hover > ul 	{ 	visibility: visible; }
	ul.navigator a:link,
	ul.navigator a:visited		{ 	color: #000; text-decoration: none; }
	ul.navigator a:hover		{ 	color: #000; }
	ul.navigator a:active		{ 	color: rgb(186,0,181); }
	#menu_nav					{ 	margin-left:-200px; position:absolute; top:111px; left:50%; }
	#menu_nav li				{	 cursor:pointer;}
	</style>

Naahuel · #10 (**permalink**) 22/06/2011, 06:30

Las cosas que observo en tu código:

1 Desde la página A, debés linkear a la B de esta forma:

Código:

"./lalalala.html#navContacto"

Sin agregar barras ni (). Es decir que estas dos formas están mal:

Código:

"./lalalala.html/#navContacto"
"./lalalala.html#navContacto()"

2 En la página B, no veo dónde estás llamando a la función analizar_hash()... En el ejemplo que te dí, esa función se llama desde el onload del body. Esta función debe llamarse cuando el DOM esté listo así que ponela ahí o integrala dentro de la función loAd() que ya tenés.

paskuini · #11 (**permalink**) 22/06/2011, 07:11

mea culpa, soy un despistado. el fallo fue no poner la función en el onLoad. (lo de los enlaces fue por que probé del derecho y del revés y nada jajaj)

Muchas gracias Nahuel!! te debo una