Esta nota es una continuación de otras 2 referentes a la creación de ventanas flotantes usando JavaScript. Esto como parte de nuestro curso de JavaScript. Puedes verlas antes de leer esta para que comprendas mejor el tema.
Vimos que con alert se logra que aparezca una ventana… pero no es independiente de la página que la genera. En cambio, con el código del listado 2 se genera una ventana totalmente independiente de la de origen.
Veamos ahora el código de la ventana en si. Por supuesto, lo puedes adaptar o reemplazar según tus necesidades.
Listado 3: Crear nuevas ventanas flotantes
<html>
<head>
<script language="JavaScript">
<!--
function PopWindowOne()
{
floatingWindow = window.open("PopIt1.html","","height=200,width=400,scrollbars=no");
}
function PopWindowTwo()
{
floatingWindow = window.open("PopIt2.html","","height=400,width=300,scrollbars=no");
}
//-->
</script>
</head>
<body onLoad="PopWindowOne()">
<h1>The Main Window!</h1>
<button onclick="PopWindowOne()">create a standalone window....</button>
<button onclick="PopWindowTwo()">create a standalone window TWO....</button>
</body>
</html>
Para hacer las cosas interesantes, la página PopIt2.html incluye una llamada a alert () cuando la página pierde el foco al incluir una llamada a alertar sobre el método body'sonblur (). Puedes ver el código de PopIt2.html en el listado 4.
Listado 4: El código PopIt2.html
<html>
<header>
<title> My Popped Window Two </title> </header>
<body onblur = "alert ('Not nice ...')"> <h1> ¡Estoy flotando en la ventana número dos! < / h1>
<p> ¡Esta es una página web completa! </p> </body>
</html>
En conclusión
Mientras alert (), confirm () y prompt () mostrarán una ventana, las ventanas están limitadas en lo que pueden hacer y, lo que es peor, están vinculadas a la ventana subyacente en lugar de estar flotando libremente. Con la función open (), puede crear una ventana flotante libre e independiente. Debes recordar que la mayoría de los navegadores crearán ventanas generadas dinámicamente como ventanas emergentes. Si JavaScript está desactivado, o si un bloqueador de elementos emergentes está activado, entonces esas ventanas podrían no mostrarse.
En próximas notas ampliaremos nuestro curso. Por el momento, puedes ver el curso de PHP y el curso de Kotlin, para comprender mejor el diseño web.
