Forum : Ouvrir une URL sans ouvrir le navigateur

Bonjour
Est-ce qu’il est possible d’ouvrir une URL http:// sans que celle-ci ne s’ouvre dans un navigateur Web ?

Voici mon adresse : http://127.0.0.1:4142/ACT/DF55546C-048F-4EB7-A0A1-BAD85C81FC74

Je voudrais que celle-ci s’exécute sur un lien clicable sans qu’elle n’ ouvre le navigateur un genre de GET

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tv Samsung</title>
    <style type="text/css">
        body{background: #000}
        .with{width: 400px;margin: 0 auto;padding: 20px}
        .block{border: 1px solid;border-color: #fff;display: inline-block;width: 32%;text-align: center;}
        a {color: #fff;font-size: 25px}
    </style>
</head>
<body>
<div class="with">
    <div class="block">
        <a href='http://127.0.0.1:4142/ACT/5B2A2C1B-8F5F-460B-8816-272938429F25'">1</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/B47A6623-C16F-48C6-9585-73D22DAE1FD7">2</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7A31B43E-26BB-46AA-B471-7F75525FF034">3</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/2D3A8E71-4422-4EED-8328-4C953388563E">4</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/AFBECC23-E013-44C1-A803-2F78CBEF24BC">5</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/2F80199D-92E3-4D20-928A-D559D2D04880">6</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/48AB5AD6-94E6-4097-88F0-8A6DBC61BC83">7</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/725727AC-BE3A-4CC8-A877-B68265A9F175">8</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/E3C28671-3728-436A-AFB2-72456D218AEE">9</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/1DE9D4AC-87E7-4120-8485-9D2FC7ADEE4B">CH +</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/B47A6623-C16F-48C6-9585-73D22DAE1FD7">0</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/C1FD7017-1D18-464F-BC27-17C98E1F33B3">CH -</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7FDEDCE7-889E-4FC0-B2A3-CC66390815B3">VOL +</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/A674250B-A423-4AD9-9A1D-3E6755C2A14B">MUTE</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/0E3E42C7-97D2-4993-841F-24A252681302">VOL -</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/5B2A2C1B-8F5F-460B-8816-272938429F25"></a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/DF55546C-048F-4EB7-A0A1-BAD85C81FC74">Arret</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7A31B43E-26BB-46AA-B471-7F75525FF034"></a>
    </div>
</div>
</body>
</html>

Comment procéder ?

9 réponses

popotte

Hello :)

Alors pour ça faudrait que tu utilises JS

<button onClick="on_click_button" data-link="http://127.0.0.1:4142/ACT/7FDEDCE7-889E-4FC0-B2A3-CC66390815B3">VOL +</button>
<!-- Tu transformes tes liens en boutons, pour le visuel tu t'arranges avec CSS -->
<!-- Et tu fait la même chose avec tous les liens -->

<script>
    const on_click_button = event => {
        const link = event.target.dataset.link // Tu récupères le data-link du button cliqué
        fetch(link) // Ca envoie un GET sur le lien

        /** Si ton lien renvoie une réponse tu ajoutes un then au lieux de seulement faire un fetch */
        fetch(link).then(response => {
            console.log(response) // La réponse de ton URL, au lieux de faire un console.log tu en fait ce que tu veux
        })
    }
</script>

.... Grossomerdo :)

steph1977

Auteur

Je viens de faire un test sur "Volume +" mais ça n'a pas l'air de fonctionner

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tv Samsung</title>
    <style type="text/css">
        body{background: #000}
        .with{width: 400px;margin: 0 auto;padding: 20px}
        .block{border: 1px solid;border-color: #fff;display: inline-block;width: 32%;text-align: center;}
        a {color: #fff;font-size: 25px}
    </style>
    <script>
    const on_click_button = event => {
        const link = event.target.dataset.link // Tu récupères le data-link du button cliqué
        fetch(link) // Ca envoie un GET sur le lien

        /** Si ton lien renvoie une réponse tu ajoutes un then au lieux de seulement faire un fetch */
        fetch(link).then(response => {
            console.log(response) // La réponse de ton URL, au lieux de faire un console.log tu en fait ce que tu veux
        })
    }
</script>
</head>
<body>
<div class="with">
    <div class="block">
        <a href='http://127.0.0.1:4142/ACT/5B2A2C1B-8F5F-460B-8816-272938429F25'">1</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/B47A6623-C16F-48C6-9585-73D22DAE1FD7">2</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7A31B43E-26BB-46AA-B471-7F75525FF034">3</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/2D3A8E71-4422-4EED-8328-4C953388563E">4</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/AFBECC23-E013-44C1-A803-2F78CBEF24BC">5</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/2F80199D-92E3-4D20-928A-D559D2D04880">6</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/48AB5AD6-94E6-4097-88F0-8A6DBC61BC83">7</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/725727AC-BE3A-4CC8-A877-B68265A9F175">8</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/E3C28671-3728-436A-AFB2-72456D218AEE">9</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/1DE9D4AC-87E7-4120-8485-9D2FC7ADEE4B">CH +</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/B47A6623-C16F-48C6-9585-73D22DAE1FD7">0</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/C1FD7017-1D18-464F-BC27-17C98E1F33B3">CH -</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <button onClick="on_click_button" data-link="http://127.0.0.1:4142/ACT/7FDEDCE7-889E-4FC0-B2A3-CC66390815B3">VOL +</button>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/A674250B-A423-4AD9-9A1D-3E6755C2A14B">MUTE</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/0E3E42C7-97D2-4993-841F-24A252681302">VOL -</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/5B2A2C1B-8F5F-460B-8816-272938429F25"></a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/DF55546C-048F-4EB7-A0A1-BAD85C81FC74">Arret</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7A31B43E-26BB-46AA-B471-7F75525FF034"></a>
    </div>
</div>
</body>
</html>

popotte

Alors si tu veux mettre ton script dans le head, il faut que tu le mettes en defer

<script defer>
    ...
</script>

Ensuite faut que tu lises les commentaires x) la tu es en train de fetch 2 fois l'url x) choisit le fetch seul ou celui avec le then, pas les deux x)

Et ensuite, tu as un message d'erreur qui apparait en console quand tu cliques?

steph1977

Auteur

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tv Samsung</title>
    <style type="text/css">
        body{background: #000}
        .with{width: 400px;margin: 0 auto;padding: 20px}
        .block{border: 1px solid;border-color: #fff;display: inline-block;width: 32%;text-align: center;}
        a {color: #fff;font-size: 25px}
    </style>
    <script defer>
    const on_click_button = event => {
        const link = event.target.dataset.link // Tu récupères le data-link du button cliqué
        fetch(link) // Ca envoie un GET sur le lien

        /** Si ton lien renvoie une réponse tu ajoutes un then au lieux de seulement faire un fetch */
        fetch(link).then(response => {
            console.log(response) // La réponse de ton URL, au lieux de faire un console.log tu en fait ce que tu veux
        })
    }
</script>
</head>
<body>
<div class="with">
    <div class="block">
        <a href='http://127.0.0.1:4142/ACT/5B2A2C1B-8F5F-460B-8816-272938429F25'">1</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/B47A6623-C16F-48C6-9585-73D22DAE1FD7">2</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7A31B43E-26BB-46AA-B471-7F75525FF034">3</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/2D3A8E71-4422-4EED-8328-4C953388563E">4</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/AFBECC23-E013-44C1-A803-2F78CBEF24BC">5</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/2F80199D-92E3-4D20-928A-D559D2D04880">6</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/48AB5AD6-94E6-4097-88F0-8A6DBC61BC83">7</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/725727AC-BE3A-4CC8-A877-B68265A9F175">8</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/E3C28671-3728-436A-AFB2-72456D218AEE">9</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/1DE9D4AC-87E7-4120-8485-9D2FC7ADEE4B">CH +</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/B47A6623-C16F-48C6-9585-73D22DAE1FD7">0</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/C1FD7017-1D18-464F-BC27-17C98E1F33B3">CH -</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <button onClick="on_click_button" data-link="http://127.0.0.1:4142/ACT/7FDEDCE7-889E-4FC0-B2A3-CC66390815B3">VOL +</button>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/A674250B-A423-4AD9-9A1D-3E6755C2A14B">MUTE</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/0E3E42C7-97D2-4993-841F-24A252681302">VOL -</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/5B2A2C1B-8F5F-460B-8816-272938429F25"></a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/DF55546C-048F-4EB7-A0A1-BAD85C81FC74">Arret</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7A31B43E-26BB-46AA-B471-7F75525FF034"></a>
    </div>
</div>
</body>
</html>

Modifications apportées, aucune erreur dans la console le lien ne fonctionne toujours pas.

https://www.noelshack.com/2023-50-7-1702830058-capture-d-ecran-2023-12-17-a-17-16-01.png

steph1977

Auteur

la tu es en train de fetch 2 fois l'url x) choisit le fetch seul ou celui avec le then, pas les deux x)

Désolé mais là j'ai pas compris ce que tu veux dire

popotte

fetch(link) // Ca envoie un GET sur le lien

/** Si ton lien renvoie une réponse tu ajoutes un then au lieux de seulement faire un fetch */
fetch(link).then(response => {
    console.log(response) // La réponse de ton URL, au lieux de faire un console.log tu en fait ce que tu veux
})

Ici, il y a deux fois fetch, un fetch(link) qui tape l'url en get, et un deuxieme fetch(link).then() qui tape une deuxième fois l'url mais avec un callback then faut choisir un des deux fetch et virer l'autre, selon si tu dois récup une réponse depuis l'url ou pas

Okay du coup quand tu cliques sur le bouton ça ne fait rien du tout?

Du coup faudrait que tu ajoutes une console pour voir si le click est bien target ou pas

Ajoutes un console au début de la fonction

    const on_click_button = event => {
        console.log(event.target) // Ca doit afficher le boutton dans la console, si ça ne l'affiche pas, c'est que la fonction n'est même pas appelée

        const link = event.target.dataset.link

        fetch(link).then(response => {
            console.log(response) // Ca devrait retourner soit la réponse de l'url, soit undefined ou null
        })
    }

Si il n'y a rien du tout en console après le click, peut etre onclick au lieux de onClick :o

steph1977

Auteur

Voici mon code modifié

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tv Samsung</title>
    <style type="text/css">
        body{background: #000}
        .with{width: 400px;margin: 0 auto;padding: 20px}
        .block{border: 1px solid;border-color: #fff;display: inline-block;width: 32%;text-align: center;}
        a {color: #fff;font-size: 25px}
    </style>
    <script defer>
    const on_click_button = event => {
        console.log(event.target) // Ca doit afficher le boutton dans la console, si ça ne l'affiche pas, c'est que la fonction n'est même pas appelée

        const link = event.target.dataset.link

        fetch(link).then(response => {
            console.log(response) // Ca devrait retourner soit la réponse de l'url, soit undefined ou null
        })
    }
</script>
</head>
<body>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/5B2A2C1B-8F5F-460B-8816-272938429F25">1</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/B47A6623-C16F-48C6-9585-73D22DAE1FD7">2</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7A31B43E-26BB-46AA-B471-7F75525FF034">3</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/2D3A8E71-4422-4EED-8328-4C953388563E">4</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/AFBECC23-E013-44C1-A803-2F78CBEF24BC">5</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/2F80199D-92E3-4D20-928A-D559D2D04880">6</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/48AB5AD6-94E6-4097-88F0-8A6DBC61BC83">7</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/725727AC-BE3A-4CC8-A877-B68265A9F175">8</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/E3C28671-3728-436A-AFB2-72456D218AEE">9</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/1DE9D4AC-87E7-4120-8485-9D2FC7ADEE4B">CH +</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/B47A6623-C16F-48C6-9585-73D22DAE1FD7">0</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/C1FD7017-1D18-464F-BC27-17C98E1F33B3">CH -</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <button onclick="on_click_button" data-link="http://127.0.0.1:4142/ACT/7FDEDCE7-889E-4FC0-B2A3-CC66390815B3">VOL +</button>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/A674250B-A423-4AD9-9A1D-3E6755C2A14B">MUTE</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/0E3E42C7-97D2-4993-841F-24A252681302">VOL -</a>
    </div>
</div>
<div class="with">
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/5B2A2C1B-8F5F-460B-8816-272938429F25"></a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/DF55546C-048F-4EB7-A0A1-BAD85C81FC74">Arret</a>
    </div>
    <div class="block">
        <a href="http://127.0.0.1:4142/ACT/7A31B43E-26BB-46AA-B471-7F75525FF034"></a>
    </div>
</div>
</body>
</html>

Cela ne fonctionne pas et aucune erreur ou message n'est affiché dans la console

popotte

Ok alors c'est vraiment que la fonction n'est pas du tout appelée

remplaces const on_click_button = event => { par function on_click_button(event) {

Et si ça fonctionnes toujours pas remplaces le onclick par un eventlistener coté JS et ça devrait être bon

steph1977

Auteur

J'ai modifié le const on_click_button = event => { par function on_click_button(event) { mais ça ne fonctionne toujours pas et il n'y a aucune erreur dans la console.
Concernant eventlistener Peux-tu préciser un peu la Modification à faire ?