Expérimentez avec les méthodes window.open et window.close
Dans cette étape, vous allez explorer les méthodes window.open() et window.close(), qui vous permettent de créer et de gérer programmatiquement de nouvelles fenêtres ou onglets de navigateur.
Accédez au répertoire du projet :
cd ~/projet/bom-demo
Tout d'abord, créez un nouveau fichier HTML appelé popup.html :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fenêtre pop-up</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h1>Voici une fenêtre pop-up</h1>
<p>Ouverte à l'aide de la méthode window.open()</p>
<button onclick="window.close()">Fermer la fenêtre</button>
</body>
</html>
Maintenant, mettez à jour le fichier bom-methods.js avec des méthodes de manipulation de fenêtre :
// Fonction pour ouvrir une nouvelle fenêtre
function openNewWindow() {
const outputDiv = document.getElementById("output");
// Ouvrez une nouvelle fenêtre avec des dimensions spécifiques
const newWindow = window.open(
"popup.html",
"PopupWindow",
"width=400,height=300,resizable=yes"
);
// Vérifiez si la fenêtre a été ouverte avec succès
if (newWindow) {
outputDiv.textContent = "Nouvelle fenêtre ouverte avec succès!";
} else {
outputDiv.textContent = "Popup bloquée. Veuillez autoriser les popups.";
}
}
// Fonction pour fermer la dernière fenêtre ouverte
function closeLastWindow() {
const outputDiv = document.getElementById("output");
try {
// Essayez de fermer la dernière fenêtre ouverte
const lastWindow = window.open("", "_blank");
if (lastWindow) {
lastWindow.close();
outputDiv.textContent = "Dernière fenêtre ouverte fermée.";
} else {
outputDiv.textContent = "Aucune fenêtre à fermer.";
}
} catch (error) {
outputDiv.textContent = "Erreur lors de la fermeture de la fenêtre.";
}
}
// Créez des boutons pour les opérations de fenêtre
function createWindowButtons() {
const openButton = document.createElement("button");
openButton.textContent = "Ouvrir une nouvelle fenêtre";
openButton.onclick = openNewWindow;
const closeButton = document.createElement("button");
closeButton.textContent = "Fermer la dernière fenêtre";
closeButton.onclick = closeLastWindow;
document.body.appendChild(openButton);
document.body.appendChild(closeButton);
}
// Appelez la fonction pour ajouter les boutons lorsque la page est chargée
createWindowButtons();
Mettez à jour le fichier index.html pour vous assurer de la compatibilité :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Démonstration des méthodes BOM</title>
</head>
<body>
<h1>Méthodes du Browser Object Model (BOM)</h1>
<div id="output"></div>
<script src="bom-methods.js"></script>
</body>
</html>
Points clés sur window.open() et window.close() :
window.open() crée une nouvelle fenêtre ou un nouvel onglet de navigateur- Peut spécifier l'URL, le nom de la fenêtre et les fonctionnalités
window.close() ferme la fenêtre actuelle ou la fenêtre spécifiée- Les bloqueurs de pop-up peuvent empêcher l'ouverture de la fenêtre
Lorsque vous ouvrez le fichier index.html dans un navigateur web :
- Cliquez sur "Ouvrir une nouvelle fenêtre" pour créer une nouvelle fenêtre pop-up
- Cliquez sur "Fermer la dernière fenêtre" pour fermer la fenêtre récemment ouverte
- La div de sortie affichera l'état des opérations de fenêtre
