Experimentar con los métodos window.open y window.close
En este paso, explorarás los métodos window.open() y window.close(), que te permiten crear y administrar programáticamente nuevas ventanas o pestañas del navegador.
Navega hasta el directorio del proyecto:
cd ~/proyecto/bom-demo
Primero, crea un nuevo archivo HTML llamado popup.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Ventana emergente</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h1>Esta es una ventana emergente</h1>
<p>Abierta utilizando el método window.open()</p>
<button onclick="window.close()">Cerrar ventana</button>
</body>
</html>
Ahora, actualiza el archivo bom-methods.js con métodos de manipulación de ventanas:
// Función para abrir una nueva ventana
function openNewWindow() {
const outputDiv = document.getElementById("output");
// Abre una nueva ventana con dimensiones específicas
const newWindow = window.open(
"popup.html",
"VentanaEmergente",
"width=400,height=300,resizable=yes"
);
// Verifica si la ventana se abrió correctamente
if (newWindow) {
outputDiv.textContent = "Nueva ventana abierta correctamente!";
} else {
outputDiv.textContent =
"Ventana emergente bloqueada. Permita las ventanas emergentes, por favor.";
}
}
// Función para cerrar la última ventana abierta
function closeLastWindow() {
const outputDiv = document.getElementById("output");
try {
// Intenta cerrar la última ventana abierta
const lastWindow = window.open("", "_blank");
if (lastWindow) {
lastWindow.close();
outputDiv.textContent = "Última ventana abierta cerrada.";
} else {
outputDiv.textContent = "No hay ventana para cerrar.";
}
} catch (error) {
outputDiv.textContent = "Error al cerrar la ventana.";
}
}
// Crea botones para las operaciones de ventana
function createWindowButtons() {
const openButton = document.createElement("button");
openButton.textContent = "Abrir nueva ventana";
openButton.onclick = openNewWindow;
const closeButton = document.createElement("button");
closeButton.textContent = "Cerrar última ventana";
closeButton.onclick = closeLastWindow;
document.body.appendChild(openButton);
document.body.appendChild(closeButton);
}
// Llama a la función para agregar los botones cuando se carga la página
createWindowButtons();
Actualiza el archivo index.html para garantizar la compatibilidad:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Demostración de métodos del BOM</title>
</head>
<body>
<h1>Métodos del Modelo de Objetos del Navegador (BOM)</h1>
<div id="output"></div>
<script src="bom-methods.js"></script>
</body>
</html>
Puntos clave sobre window.open() y window.close():
window.open() crea una nueva ventana o pestaña del navegador- Puedes especificar la URL, el nombre de la ventana y las características
window.close() cierra la ventana actual o la especificada- Los bloqueadores de ventanas emergentes pueden evitar que se abra una ventana
Cuando abres el archivo index.html en un navegador web:
- Haz clic en "Abrir nueva ventana" para crear una nueva ventana emergente
- Haz clic en "Cerrar última ventana" para cerrar la ventana recientemente abierta
- El div de salida mostrará el estado de las operaciones de ventana
