Alternativa para esconder la barra de direcciones en una ventana emergente o popup

Los navegadores actuales, por asuntos de seguridad para el usuario, no permiten que se esconda la barra de direcciones. El código típico Javascript para esconder la barra de direcciones sería:

<html>
<head></head>
<body>
<a href=»http://www.midominio.com/directorio/mipopup.html» onclick=»window.open(this.href,’child’,’width=500,height=500,status=no,directories=no,menubar=no,toolbar=no,scrollbars=no,location=no,resizable=no,titlebar=no’); return false»><button type=»button»>Mi Pop Up</button></a>
</body>
</html>

Problema encontrado

El código que se muestra en la parte de arriba funcionará en todos los navegadores, pero no en Firefox. La opción de esconder la barra de ubicación está por defecto deshabilitada en Firefox 3 y sus versiones posteriores, debido a razones de seguridad.
[sociallocker]

Hasta el momento ese código funciona bien con Internet Explorer.

El problema con Firefox es que ignora todo el Javascript relacionado con la parte «Location= no and Resize=no» .

Darle vuelta al problema

La solución muy probablemente sea la creación de un popup o ventana emergente falsa, un DIV escondido que da la apariencia de ser una nueva ventana en la parte superior y que puedes esconder nuevamente con un botón o en base a tiempo.

Las capas DIV pueden mostrarse con un botón o liga. El DIV se mostrará al dar clic y se esconderá igualmente con otro clic utilizando el style property de la página.

Se utilizará una función Javascript para administrar la propiedad de la etiqueta DIV identificada por su id.

Aquí está el código:

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1252″>
<html>
<head>
<title>Demo para Mostrar Esconder capa DIV con onclick usando botones</title>
<META NAME=»DESCRIPTION» CONTENT=»Demo para Mostrar Esconder capa DIV con onclick usando botones»>
<META NAME=»KEYWORDS» CONTENT=»Demo Mostrar capa, Demoesconder capa, mostrar div, esconder div,
botón on click, botón on click event, div property, div style set»>

<style type=»text/css»>
div {
position: absolute;
left: 250px;
top: 200px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language=»JavaScript»>
function setVisibility(id) {
if(document.getElementById(‘bt1′).value==’Hide Layer’){
document.getElementById(‘bt1’).value = ‘Show Layer’;
document.getElementById(id).style.display = ‘none’;
}else{
document.getElementById(‘bt1’).value = ‘Hide Layer’;
document.getElementById(id).style.display = ‘inline’;
}
}

</script>
</head>
<body>

<input type=button name=type id=’bt1′ value=’Show Layer’ onclick=»setVisibility(‘sub3’);»;>

<div id=»sub3″>Mensaje Texto</div>
<br><br>
</body>
</html>

 

La página fuente de este código muestra más ejemplos que podrían serte de utilidad.
[http://www.plus2net.com/javascript_tutorial/hide-layer.php]
[/sociallocker]

Share This