range value an <a href> anhängen

Fraggle · 06.07.2022

Hallo,
ich programmiere eine eigene html-Seite für die Steuerung meiner Heimautomation.
Bisher bin ich ganz gut mit HTML ausgekommen.
Nun benötige ich aber anscheinend Javascript für mein Problem.
Ich habe einen Range-Slider (0-100). Je nach dem, was dort eingestellt wird, soll über einen Button eine URL in einem iFrame aufgerufen werden, die aus einem festen Bestandteil + dem Wert des Range-Sliders bestehen soll.
Im Code-Beispiel: URL -> http://test.fritz.box/menu/0?go=XXX (XXX soll durch den eingestellten Slider-Wert ersetzt werden und die URL beim Klick auf den Button in einem Dummy-iframe (height:0px; width:0px;border:0px also unsichtbar) geöffnet werden.
Könnte mir hierzu eventuell jemand helfen und mir meinen Code entsprechend erweitern. Ich habe leider selbst nach längerer Suche nichts passendes gefunden, und Javascript ist nicht so ganz mein Ding :-(

Code:

  <html>
  <body>
    <div id="container">
      <div style="clear : both"></div>
      <input type="range" value="25" min="0" max="100" id="prozent" oninput="this.nextElementSibling.value = this.value">
      <output>25</output>
      <p style="font-family: Arial, Verdana;margin:0px"><font size="3">&nbsp;---------------------------------------------------</font></p>
      <a href="http://test.fritz.box/menu/0?go=XXX" target="invisibleFrame"><button class="function">SET</button></a>
      <div style="clear : both"></div>  
    </div>
    <iframe name="invisibleFrame" style="height:0px; width:0px;border:0px none red;background-color:transparent;" />
  </body>
  </html>

Sempervivum · 07.07.2022

Gern, versuche dies:

Code:

<!DOCTYPE html>
<html>

<head>
    <title>Heimautomatisierung</title>
    <style>
        iframe {
            height: 0px;
            width: 0px;
            border: 0px none red;
            background-color: transparent;
        }
    </style>
    <script>
        function setIt() {
            const
                // Festen Teil der URL bereit stellen:
                url = 'http://test.fritz.box/menu/0?go=',
                // Wert des Rangesliders bereit stellen:
                val = document.querySelector('#prozent').value;
            // scr-Attribut auf die vollständige URL setzen:
            document.querySelector('iframe').src = url + val;
        }
    </script>
</head>

<body>
    <div id="container">
        <input type="range" value="25" min="0" max="100" id="prozent"
            oninput="this.nextElementSibling.value = this.value">
        <output>25</output>
        <hr>
        <!-- Funktion setIt beim Klick auf den Button aufrufen: -->
        <button class="function" onclick="setIt();">SET</button>
    </div>
    <iframe name="invisibleFrame" />
</body>

</html>

Um das src-Attribut des iFrame zu setzen brauchst Du kein a-href-Tag.

Ich war so frei, das CSS in den head zu setzen und die horizontale Linie durch ein hr-Tag zu ersetzen.

Dieses clear: both; weist darauf hin, dass Du float-Layout verwendest. In den allermeisten Fällen ist das veraltet und wird besser durch Flex- und Gridlayout ersetzt.

Fraggle · 07.07.2022

Vielen, vielen Dank für die schnelle Antwort und den Code-Schnipsel.
Ich habe es gleich in meine html-Datei eingebaut und es hat auf Anhieb funktioniert.

Sempervivum · 07.07.2022

Frage noch aus Neugier: Warum öffnest Du einen iFrame, der gar nicht sichtbar ist?

Fraggle · 07.07.2022

Ich spreche damit Shelly-Aktoren an, die beim Aufruf eine Seite zurück geben. Diese Seite interessiert mich aber nicht. Ich möchte, dass nur die action-URL ausgeführt wird, und dass meine Fernbedienungs-Web-Seite weiterhin angezeigt bleibt.

Sempervivum · 07.07.2022

Ich möchte, dass nur die action-URL ausgeführt wird, und dass meine Fernbedienungs-Web-Seite weiterhin angezeigt bleibt.

So etwas in der Richtung hatte ich schon vermutet. Wenn Du nur eine URL ausführen willst, kannst Du das ohne den Umweg über einen iFrame auch mit der fetch-API:

Code:

fetch('deine-action-url');

range value an <a href> anhängen

Fraggle

New member

Sempervivum

Well-known member

Fraggle

New member

Sempervivum

Well-known member

Fraggle

New member

Sempervivum

Well-known member

range value an <a href> anhängen

range value an <a href> anhängen