JMiur [E]

Abrir un vínculo en una nueva ventana es una forma bastante común de agregar información sin tener que abandonar la página donde estamos. La forma más elemental es agregar el atributo target al link:
<a href="pagina.html" target="_blank">TEXTO VINCULO</a>
Sin embargo, es posible tener más control sobre esa nueva ventana y para eso, necesitamos algo de código JavaScript.

Este abre una página en nueva ventana y, este HIPERVINCULO hace exactamente lo mismo.

En ambos casos se ha abierto una ventana conteniendo una página web existente. Este es el código HTML agregado a los tags INPUT y A utilizados:
onclick="abrirNuevaVentana();return false"
y este es el script básico de la función:
function abrirNuevaVentana() {
window.open('página','nombre','opciones');
}
donde la parte más importante es el uso de la función interna window.open() que abre una nueva ventana en el navegador, "pasándole" diferentes url y algunas otras características.

Los parámetros de la función son tres, página contiene la url a abrir, el segundo nombre es el nombre dado a la ventana y el último, opciones son las propiedades dadas a la ventana. Algunas de estas propiedades son:
toolbar = yes | no       ver/ocultar barra de herramientas
menubar = yes | no ver/ocultar barra de menues
status = yes | no ver/ocultar barra de estado (Mozilla no lo acepta)
scrollbars = yes | no ver/ocultar barras de desplazamiento
location = yes | no ver/ocultar barra de direcciones
directories = yes | no ver/ocultar barra de directorios
resizable = yes | no permitir/negar redimensionamiento
width = pixeles ancho en pixeles
height = pixeles alto en pixeles
top = pixeles coordenada vertical
left
= pixeles coordenada horizontal
El valor de cada uno siempre es un valor booleano (true/false, yes/no o 1/0) y, por defecto es false/no/0. Todas las opciones se colocan en una sola instrucción, entre comillas, separadas con comas y sin espacio entre ellas.

Un ejemplo cualquiera se vería así:
window.open(url,'name','height=200,width=200,left=10, top=10,
resizable=yes,scrollbars=yes,toolbar=yes,status=yes');
También es posible hacerlo de manera directa, en ese caso, la forma correcta de abrir una ventana pop-up es la siguiente:
<a href="URL_pagina" target="_blank"
onClick="window.open(this.href, this.target, 'width=ancho,height=alto');
return false;">
BIEN</a>
Una forma errónea:
<a href="#"
onClick="window.open('URL_pagina','nombre','width=ancho,height=alto')">
MAL</a>
donde se usa el atributo href="#" para ver "la manito" y el link subrayado. Funciona pero tiene algunos inconvenientes: muchos usuarios deshabilitan JavaScript y el contenido es inaccesible, los buscadores no reconocen el link, no puede agregarse a los Favoritos (o Marcadores), al pasar el ratón sobre él, no puede verse la dirección de la página a la que nos lleva, solo veremos "#", con el botón derecho ("Abrir en ventana nueva") hará exactamente lo contrario.

Aún peor es utilizar javascript: para utilizar el código directamente desde el href:
<a href="javascript:window.open('pagina','nombre','width=ancho,height=alto');">
PEOR</a>
Al hacer click derecho y "Abrir en una ventana nueva" se abrirá una ventana en blanco y, eventualmente, la pop-up.

A diferencia de los primeros ejemplo, en lugar de definir la dirección de la nueva página dentro de la función window.open, le indicamos que la tome del atributo href del mismo tag (this), con esto, cualquier navegador abrirá la página, sin importar si tiene o no Javascript y, al ser un vínculo normal, podrá ser agregado a favoritos e indexado por los buscadores.

18 comentarios:

Anónimo  

Gracias por hacer esto más fácil.
un saludo cordial

Responder
Anónimo  

gracias por tu ayuda

Responder
Claudio - Poca Tinta  

No habré esta función, en los post de blogger, es muy extraño ya que hace poco funcionaba.
uhmmm

Responder
JMiur  

Lo siento, el error fue mio que eliminé la función de la plantilla, ya está resuelto :$

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

hola, ya solucione lo de los emoticones o almenos eso parece, pero ahora mi pregunta que eh estado buscando todo el dia es:

si te fijas en mi web tengo en el sidebar el famoso "Sigueme en Twitter". No soy mucho de esas paginas pero veo que se esta haciendo muy conocida por eso opte por crearme una cuenta.

Te explico brevemente como funciona ese script.

Lo primero fue crearme una cuenta :D y luego pues para no estar actualizando manuealmente encontre la forma de que cuando yo actualice mi web automaticamente se actualise mi twitter y esa actualizacion se muestre en mi web en "Sigueme en Twitter" bueno hasta ahi todo me va perfecto, pero mi duda es como hago para que cuando la gente haga clic en las actualizacion que se muestran automaticamente en mi web desde twitter se abra en otra ventana, me explico con un ejemplo:

Titulo de mi atualizacion - Enlace de la actualización - Hora de la actualizacion,

cuando la gente haga clic en Enlace de la actualización u Hora de la actualizacion se abra en otra ventana.

Estube buscando pero solo encontre la forma de abrir Listas en ventanas nuevas pero el widget que hay en mi plantilla es este:

< b :widget id='HTML2' locked='false' title='Sigueme en Twitter' type='HTML' >

y de las listas que ponen como ejemplo y como hay en el blog es mucho mas largas, ojala tenga alguna solucion o puedas ayudarme gracias.

Responder
[ :: WwW.FloWKaletA.CoM :: ]  

hola denuvo, me acavo de dar cuenta que tu tambien tieens una cuenta en twitter y que cuando le doy en "16 horas atrás" (alt=ver el mensaje en twitter) se te abre en otra ventana, basicamente es eso que quiero yo en mi web, que se agra en otra ventana tanto el vinculo de la actualizacion como la hora.... aver si me peudes ayudar que no se como hacerlo gracias

Responder
JMiur  

Para que se abra en una nueva ventana debes modificar el script pero, no sé cuál estás usando ni qué código tiene. En mi caso, el script que uso es este.

Responder
Anónimo  

Hola Jmiur te tengo una mega pregunta he visto muchas blogs de descarga que tienen en sus links protectores, es decir que al dar click en un link de descarga te manda a otra pagina y aparece publicidad y un boton hasta abajo con el link de la descarga ejemplo: www.furiagames360.org, he visto su codigo de fuente y he visto esto:

http://furiagames360.org/protetor/protetor.js

lo tengo implementado en mi blog pero quiero cambiarle la publicidad y el titulo, para que se vea como mi protector.

y al dar click en el source del script me encuentro con otra pagina donde vienen los codigos, he buscado tutoriales para ver como puedo implementar esto en mi blog pero no he encontrado.

Jmiur tu sabes como implementar esto en mi blog pero cambiandole la publicidad del protector de links y poner mi propia publicidad y mi propio titulo, si puedes eres un genio !!!

Responder
Anónimo  

Gostaria de saber como procedo para que o resumo do post na pagina inicial se tranforme em um link de direcionamento para outra pagina isto é; o post não teria titulo, o titulo seria dentro do resumo e nele o link para o site de origem do post. Poderia me ajudar com esse código?
Aguardo sua resposta.

Responder
JMiur  

No estoy seguro de l oque quieres hacer pero, si el post no tiene título, la dirección URL del post es accesible así:

<a expr:href='data:post.url'>
.......
</a>

data:post.url es la dirección URL de la entrada

Responder
Anónimo  

Veja o que acontece quando clica no título, esse é o comando que queria colocar no resumo e tirar o titulo http://linksnabocadosapo.blogspot.com/
Ficaria sem cabeçalho, somente o resumo que na verdade seria o titulo.

Responder
JMiur  

¿Te refieres a la parte inferior donde hay entradas resumidas? Por ejemplo, ahí hay una cuyo título es:
Não sou vencedor.
y si miro el código fuente dice esto:

<a href="http://linksnabocadosapo.blogspot.com/2011/12/nao-sou-vencedor.html">
<span style="font-size:180%;"></span>
</a>
<a href="http://www.macelocarvalho.blogspot.com/2011/12/nao-sou-vencedor.html">Não sou vencedor.</a>

El enlace a la entrada es el primero:
http://linksnabocadosapo.blogspot.com/2011/12/nao-sou-vencedor.html
pero n otiene texto; en cambio, el enlace al segundo te lleva a otro sitio.

Eso es un error ¿Estás usando el campo enlace de Blogger?

¿Qué dice tu plantilla en esa parte?

Responder
Anónimo  

Aqui é o meu - http://linksnabocadosapo.blogspot.com/

veja aqui como gostaria que ficasse - http://www.uazaa.xpg.com.br/

Note que não existe titulo somente o corpo do post, seria assim


Seria assim que gostaria de proceder.

Responder
JMiur  

No veo que en http://www.uazaa.xpg.com.br/ ocurra eso; cada resumen tiene un título que es un enlace a la entrada y una imagen que también es un enlace a la entrada.

Responder
Anónimo  

Sim é exatamente isto que quero usar em minha pagina, como poderia fazer?

Responder
JMiur  

¿Lo que quieres es que la imagen del resumen de tu blog sea un enlace y no se muestre el resumen de la entrada?

Para eso, debería modificarse la función createSummaryAndThumb(pID)

Responder
Anónimo  

Não quiero enlace no resumo e não na imagem

Responder
Anónimo  

Vou tentar aqui, qualquer coisa pesso socorro. Obrigado.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR