11488 sujets

JavaScript, DOM et API Web HTML5

Est-il possible de modifier l'aspect d'une fenêtre d'un navigateur ?

Bonjour à vous tous,

Est-il possible, en Javascript, de modifier l'aspect, la position et les dimensions d'une fenêtre appelé avec un lien classique <a> ? Par exemple, je voudrais afficher une fenêtre avec ce lien HTML :
<a href="page_html.html">Cliquez ici pour afficher une nouvelle fenêtre</a>
et obtenir une nouvelle page en haut à droite, de petites dimensions, sans la barre de titre, sans les boutons de fermeture, d'agrandissement, de réduction, sans les barres de défilement, etc. juste un fond blanc et un cadre.

Merci pour votre aide
Modifié par ObiJuanKenobi (03 Sep 2023 - 08:46)
Merci gcyrillus, je suis allé voir le contenu du ton lien et j'ai réussi mais à moitié.
Je n'arrive pas à afficher "Page en construction" dans la petite fenêtre, cela apparaît dans la grande fenêtre en arrière plan.
Mon but est que le contenu du fichier "construction.html" s'affiche dans la petite fenêtre et pas dans la grande.

Voilà d'abord mon code du fichier "index.html" :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test manipulation de fenêtre avec Javascript</title>
</head>

<body>
    <a href="construction.html" onclick="ouvrirFenetreModale()">Cliquez ici pour ouvrir une fenêtre</a>

    <script>
        function ouvrirFenetreModale() {
            var fenetreModale = window.open('', 'FenetreModale', 'width=400,height=300');
        }
    </script>
</body>

</html>
et le code du second fichier "construction.html" :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page "En construction"</title>
    <style>
        .construction {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <h1 class="construction">Page en construction</h1>
</body>

</html>

Modifié par ObiJuanKenobi (03 Sep 2023 - 13:06)
Modérateur
Bonjour,

Pour eviter que le lien ouvre effectivement la page en href, il faut à partir de ton essai désactivé son action avec return false;

Ensuite, pour afficher l'autre page dans la fenêtre ouverte , il faut lui passer l'URL de cette page.

Tu peut par exemple modifier le code comme suit :
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test manipulation de fenêtre avec Javascript</title>
</head>

<body>
    <a href="construction.html" onclick="ouvrirFenetreModale(this.href);return false;">Cliquez ici pour ouvrir une fenêtre</a>

    <script>
        function ouvrirFenetreModale(view) {
            var fenetreModale = window.open(view, 'FenetreModale', ' width=400,height=300');            
        }
    </script>
</body>
</html>

Dans ton code modifié, l'url est récupérée et transmise depuis la balise de lien par this.href et ensuite récolté dans la fonction avec une variable que j'ai appelée view , mais tu peut luis donner le nom que tu veut , elle prendra la valeur de this.href. Enfin , cette variable est transmise à window.open() qui se charge d'ouvrir l'url transmise dans la nouvelle fenêtre.

Tu peut t'inspirer des exemples fournis par MDN en les modifiants à ta guise Smiley smile

Cdt
Modifié par gcyrillus (04 Sep 2023 - 11:40)
De nos jours les gens n'ouvrent-ils pas leur nouvelle page dans un nouvel onglet de manière obligatoire par le navigateur ?
Prévenir un modérateur
Répondre au sujet
Aller à