HTML-Seite um auf Webvisualisierungsseiten von zwei SPS zu wechseln

CORT · 12. Mai 2020

Hallo Forum,

ich hätte eine Theoretische Frage.

Wie bereits im Titel erwähnt, geht es darum, dass ich eine HTML-Seite erstellen möchte um mich auf eine WebVisualisierung einer SPS zu verbinden.

Hierzu läuft ein Webserver auf einer SPS. Diese ist über den link "http://<IP>:<PORT>/webvisu.htm" erreichbar.

Über ein Panel mit installiertem Browser kann ich die Visualisierung öffnen.

Da ich nun ein Redundantes System habe, müsste ich mich immer auf die Master-Steuerung verbinden. Dies hab ich innerhalb der SPS gelöst.

Problem ist jedoch beim Starten der SPS. Falls SPS1 nicht erreichbar ist, möchte ich mich zu SPS2 verbinden.

Dazu möchte ich dann quasi eine HTML-Seite erstellen, auf der man die beiden Links eingeben kann und dann versucht wird sich mit Link1 zu verbinden. Wenn das nicht möglich ist dann mit Link 2.

Ist das automatisiert möglich? Wenn ja, wie würde man das realisieren?

Ich persönlich bin eher SPS Programmierer und kenne nur die "grundlegendsten Grundlagen" der html Programmierung (und mit Sicherheit nicht alle tags etc.)

Von daher wäre ich über Code-Beispiele sehr froh!

Gruß

Chris

Sempervivum · 12. Mai 2020

Ich denke schon, dass das möglich ist: Ich würde daran denken, beide Links in je einen iFrame zu laden. Dann für beide einen Eventlistener für load registrieren. Für den Link, bei dem als erstes dieser Listener triggert, dann eine Weiterleitung machen, so dass die Seite browserfüllend angezeigt wird. Alternativ könnte man auch nur das Laden z. B. eines Bildes von der Steuerung testen.

CORT · 12. Mai 2020

Hi, vielen Dank für deine schnelle Antwort.

Das hört sich schon mal gut an... aber wenn ich ehrlich bin...ich wüsste jetzt nicht wie ich das in html programmieren müsste.

Hast du eventuell Einzelbeispiele wie man das mit dem iFrame macht bzw. den Eventlistener registriert etc.

Wenn ich einzelne Examples hätte, würde ich das sicher hin bekommen... aber bei 0 anzufangen...da kenne ich einfach die Syntax zu wenig

Gruß Chris

Sempervivum · 12. Mai 2020

Müsste etwa so aussehen, ungetestet, wenn es nicht läuft und Du den Fehler nicht findest, melde dich wieder.

Den Code für den zweiten iFrame kannst Du selbst hinzu fügen.

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>Untitled Document</title>

</head>

<body>
    <iframe id="iframe1" src="http://<IP1>:<PORT>/webvisu.htm"></iframe>
    <iframe id="iframe2" src="http://<IP2>:<PORT>/webvisu.htm"></iframe>
    <script>
        // Eventlistener für iFrame 1 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
        document.getElementById('iframe1').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
            window.location.href = event.target.src;
        });

        // Hier das gleiche für iFrame 2
    </script>

</body>

</html>

Alles anzeigen

CORT · 12. Mai 2020

Hi,

wow... vielen Dank für das Beispiel und die ausführliche Kommentierung!

Hab das soweit mal eingepflegt, das ganze für iFrame2 auch gemacht und IP und Port eingetragen.
Das ganze schein soweit auch erst mal gut zu funktionieren.

Es wird lediglich (falls beide SPS erreichbar sind) immer auf die zweite gesprungen. Ist die erste erreichbar, soll das zweite gar nicht mehr versucht werden.

Zusätzlich möchte ich ein Eingabefenster, in dem man die beiden URL's eintragen kann. Sollte nichts eingetragen sein, wird auch nichts ausgeführt.

Habe das ganze wie im Codebeispiel gemacht.

Die Eingabefenster erscheinen...jedoch tut sich nichts Bin da mit der Syntax noch nicht ganz im Reinen

Was ich noch gern hätte wäre folgendes (falls das geht)

Wenn die Eingabe bei der Seite gemacht wurde, wird das für die Zukunft gespeichert. Wird die Seite erneut geöffnet läuft eine Zeit von 5Sek ab und Startet dann mit den alten Eingaben. Wird vorher auf "Ändern" geklickt und eine neue Eingabe gemacht, wird diese verwendet, nachdem auf "Senden" geklickt wird.

Ist so was möglich? Wenn ja wie könnte man das realisieren?

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>TurCon_Redundancy</title>

</head>

<body>
    <form>
        <label for="Ip1">IpAddress1:
        <input id="Ip1" name="Ip1">
        </label>

        <label for="Ip2">IpAddress2:
        <input id="Ip2" name="Ip2">
        </label>

         <input type="submit" value="senden">
    </form>

    <iframe id="iframe1" src=Ip1></iframe>
    <iframe id="iframe2" src=Ip2></iframe>

    <script>
        if (Ip1 == undefined) {var xNoInputs = true;}
        if (Ip1 == undefined) {var xNoInputs = true;}



        if (!xNoInputs) {

            // Eventlistener für iFrame 1 registrieren
            // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
            // wird aufgerufen, wenn der iFrame geladen ist
            document.getElementById('iframe1').addEventListener('load', (event) => {
                // event.target ist das Element, auf das der Listener registriert wurde.
                // d. h. der iFrame.
                // Wir leiten auf die HTML-Seite der SPS um,
                // damit sie browserfüllend dargestellt wird.
                var xIPC1Active = TRUE;
                window.location.href = event.target.src;

            });
            IF (xIPC1Active){
                // Eventlistener für iFrame 2 registrieren
                // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
                // wird aufgerufen, wenn der iFrame geladen ist
                document.getElementById('iframe2').addEventListener('load', (event) => {
                    // event.target ist das Element, auf das der Listener registriert wurde.
                    // d. h. der iFrame.
                    // Wir leiten auf die HTML-Seite der SPS um,
                    // damit sie browserfüllend dargestellt wird.
                    window.location.href = event.target.src;
                });
                }
                var xIPC1Active = FALSE;

        }
    </script>
</body>
</html>

Alles anzeigen

Sempervivum · 12. Mai 2020

Zitat

Es wird lediglich (falls beide SPS erreichbar sind) immer auf die zweite gesprungen. Ist die erste erreichbar, soll das zweite gar nicht mehr versucht werden.

Das kannst Du erreichen, indem Du zunächst nur die erste ansprichst und bei deren iFrame zusätzlich einen Eventhandler für "error" registrierst. Triggert dieser, weil sie nicht verfügbar ist, setzt Du das src-Attribut für die zweite und machst dort das selbe mit den Eventhandlern. Triggert auch dort der Eventhandler, kannst Du eine Fehlermeldung an den Benutzer ausgeben.

Nachteil bei diesem Verfahren: Wahrscheinlich bekommst Du keinen Fehler 404, der schnell kommt, sondern musst einen Timeout abwarten bis die zweite angesprochen wird. Man könnte daran denken, nicht den error abzuwarten, sondern die zweite mit einer Verzögerung anzusprechen, aber das wäre nicht zuverlässsig.

Sempervivum · 12. Mai 2020

Code

    <iframe id="iframe1" src=Ip1></iframe>
    <iframe id="iframe2" src=Ip2></iframe>

Das wird nicht funktionieren, denn dieser Code wird ja sofort beim Laden der Seite ausgeführt und dann ist in den Eingabefeldern noch nichts drin. Du musst das Submit ebenfalls mit einem Eventlistener abfangen, darin die Werte auslesen und in die src-Attribute eintragen, etwa so:

Code

document.querySelector('form').addEventListener('submit', (event) => {
    // Defaultaktion des Submit d. h. Abschicken des Formulars unterdruecken
    // Dabei wuerde die Seite neu geladen und das wollen wir nicht
    event.preventDefault();
    // Werte aus den Eingabefeldern auslesen und in die
    // src-Attribute der iFrames eintragen
    vIp1 = document.getElementById('Ip1').value;
    vIp2 = document.getElementById('Ip2').value;
    document.getElementById('iframe1').src = vIp1;
    document.getElementById('iframe2').src = vIp2;
});

Alles anzeigen

Ungetestet. Wenn das funktioniert, kannst Du der ersten SPS Priorität geben wie im vorigen Posting beschrieben.

Wahrscheinlich wäre es auch ratsam, die URLs zu validieren bzw. zu prüfen, aber wir wollen mal nicht den zweiten Schritt vor dem ersten tun.

Sempervivum · 12. Mai 2020

Zitat

Wenn die Eingabe bei der Seite gemacht wurde, wird das für die Zukunft gespeichert. Wird die Seite erneut geöffnet läuft eine Zeit von 5Sek ab und Startet dann mit den alten Eingaben. Wird vorher auf "Ändern" geklickt und eine neue Eingabe gemacht, wird diese verwendet, nachdem auf "Senden" geklickt wird.

Auch das ist selbstverständlich möglich. Speichern ist am einfachsten im Localstorage. Dieser liegt jedoch lokal auf dem Computer des Benutzers. Willst Du, dass die Werte für alle Benutzer verfügbar sind, musst Du sie serverseitig speichern.

Und für eine Verzögerung gibt es in Javascript die Funktion setTimeout().

CORT · 13. Mai 2020

Zitat von Sempervivum

Das kannst Du erreichen, indem Du zunächst nur die erste ansprichst und bei deren iFrame zusätzlich einen Eventhandler für "error" registrierst. Triggert dieser, weil sie nicht verfügbar ist, setzt Du das src-Attribut für die zweite und machst dort das selbe mit den Eventhandlern. Triggert auch dort der Eventhandler, kannst Du eine Fehlermeldung an den Benutzer ausgeben.

Nachteil bei diesem Verfahren: Wahrscheinlich bekommst Du keinen Fehler 404, der schnell kommt, sondern musst einen Timeout abwarten bis die zweite angesprochen wird. Man könnte daran denken, nicht den error abzuwarten, sondern die zweite mit einer Verzögerung anzusprechen, aber das wäre nicht zuverlässsig.

Ok, hab das mal versucht...Falls IP1 erreichbar ist, klappt das auch... leider wird IP2 nicht aufgerufen wenn 1 nicht verfügbar ist...brauche ich da einen zweiten Frame (wie vorher)?

Du meintest ich müsste das src-Attribut für die zweite IP setzen (Im zweiten Frame?) Wie mach ich das richtig?

Meine Idee war jetzt die zweite IP in das src-Attribut des ersten Frames zu schreiben (quasi erste IP löschen und dafür zweite nehmen) und dann das ganze Frame neu laden...

Wenn hier nicht sofort der Fehler 404 kommt, spielt das keine Rolle. Die html Seite wird eigentlich wirklich nur beim Starten der SPS benötigt, da hier mein internes Programm auf der SPS noch nicht läuft. Sollte hier das Laden etwas länger dauern, spielt das keine Rolle.

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>TurCon_Redundancy</title>

</head>

<body>
   <!-- <form>
        <label for="Ip1">IpAddress1:
        <input id="Ip1" name="Ip1">
        </label>

        <label for="Ip2">IpAddress2:
        <input id="Ip2" name="Ip2">
        </label>

         <input type="submit" value="senden">
    </form>
    -->

    <iframe id="iframe1" src="http://192.168.1.100:8080/webvisu.htm"></iframe>

    <script>
        // Eventlistener für iFrame 1 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
        document.getElementById('iframe1').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
                window.location.href = event.target.src;
        });


        // Eventlistener für iFrame 1 registrieren
        //die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        //wird aufgerufen, wenn der iFrame nicht geladen werden kann
        document.getElementById('iframe1').addEventListener('error', (event) => {
            //kann die Seite nicht geladen werden, wird versucht die zweite Seite zu laden
            document.getElementById('iframe1').src = "http://192.168.1.101:8080/webvisu.htm";
        })

        // Eventlistener für iFrame 1 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
        document.getElementById('iframe1').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
                window.location.href = event.target.src;
        });
      
 

        // Eventlistener für iFrame 2 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
  //      document.getElementById('iframe2').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
  //          window.location.href = event.target.src;
//        });


    </script>
</body>
</html>

Alles anzeigen

CORT · 13. Mai 2020

Zitat von Sempervivum
Code
    <iframe id="iframe1" src=Ip1></iframe>
    <iframe id="iframe2" src=Ip2></iframe>
Das wird nicht funktionieren, denn dieser Code wird ja sofort beim Laden der Seite ausgeführt und dann ist in den Eingabefeldern noch nichts drin. Du musst das Submit ebenfalls mit einem Eventlistener abfangen, darin die Werte auslesen und in die src-Attribute eintragen, etwa so:
Code
document.querySelector('form').addEventListener('submit', (event) => {
    // Defaultaktion des Submit d. h. Abschicken des Formulars unterdruecken
    // Dabei wuerde die Seite neu geladen und das wollen wir nicht
    event.preventDefault();
    // Werte aus den Eingabefeldern auslesen und in die
    // src-Attribute der iFrames eintragen
    vIp1 = document.getElementById('Ip1').value;
    vIp2 = document.getElementById('Ip2').value;
    document.getElementById('iframe1').src = vIp1;
    document.getElementById('iframe2').src = vIp2;
});
Alles anzeigen
Ungetestet. Wenn das funktioniert, kannst Du der ersten SPS Priorität geben wie im vorigen Posting beschrieben.

Wahrscheinlich wäre es auch ratsam, die URLs zu validieren bzw. zu prüfen, aber wir wollen mal nicht den zweiten Schritt vor dem ersten tun.

Das mit dem Submit scheint gut zu funktionieren...:-)

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>TurCon_Redundancy</title>

</head>

<body>
   <form>
        <label for="Ip1">URL1:
        <input id="Ip1" name="Ip1">
        </label>

        <label for="Ip2">URL2:
        <input id="Ip2" name="Ip2">
        </label>

         <input type="submit" value="senden">
    </form>


    <iframe id="iframe1"></iframe>

    <script>
        document.querySelector('form').addEventListener('submit', (event) => {
            // Defaultaktion des Submit d. h. Abschicken des Formulars unterdruecken
            // Dabei wuerde die Seite neu geladen und das wollen wir nicht
            event.preventDefault();
            // Werte aus den Eingabefeldern auslesen und in die
            // src-Attribute der iFrames eintragen
            vIp1 = document.getElementById('Ip1').value;
            vIp2 = document.getElementById('Ip2').value;
            document.getElementById('iframe1').src = vIp1;
            //document.getElementById('iframe2').src = vIp2;
        });




        // Eventlistener für iFrame 1 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
        document.getElementById('iframe1').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
                window.location.href = event.target.src;
        });


        // Eventlistener für iFrame 1 registrieren
        //die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        //wird aufgerufen, wenn der iFrame nicht geladen werden kann
        document.getElementById('iframe1').addEventListener('error', (event) => {
            //kann die Seite nicht geladen werden, wird versucht die zweite Seite zu laden
            document.getElementById('iframe1').src = "http://192.168.1.101:8080/webvisu.htm";
        })

        // Eventlistener für iFrame 1 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
        document.getElementById('iframe1').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
                window.location.href = event.target.src;
        });
      
 

        // Eventlistener für iFrame 2 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
  //      document.getElementById('iframe2').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
  //          window.location.href = event.target.src;
//        });


    </script>
</body>
</html>

Alles anzeigen

CORT · 13. Mai 2020

Zitat von Sempervivum

Auch das ist selbstverständlich möglich. Speichern ist am einfachsten im Localstorage. Dieser liegt jedoch lokal auf dem Computer des Benutzers. Willst Du, dass die Werte für alle Benutzer verfügbar sind, musst Du sie serverseitig speichern.

Und für eine Verzögerung gibt es in Javascript die Funktion setTimeout().

Ich denke hier würde ausreichen, wenn ich das im Localsotrage des Panels speichern würde, mit dem ich die Visualisierung aufrufe. Sollten weitere Clients dazu kommen, müssten die, die Eintragung einfach auch vornehmen. Das wäre OK.

Sollte das Grundlegende von den Posts oben gut funktionieren, werde ich das mit dem setTimeout mal probieren

Dir schon mal vielen Dank für die sehr kompetente Unterstützung!

CORT · 13. Mai 2020

Hab das ganze auch mal wie folgt versucht:

- Eingabe funktioniert und öffnet sich erst nach Submit

- Leider öffnet sich nur die URL1...auch wenn diese nicht erreichbar ist, passiert nichts

Es wird mir nur angezeigt "Loading Webvisualisation" => Irgendwann hier dann Fehler beim Laden...wobei hier kein Fehler 404 angezeigt wird, sondern Fehler beim Laden der Webvisu. (Bild im Anhang)

Der Fehler wird scheinbar nicht getriggert... dies ist der Fall, wenn ich mein SPS-Programm stoppe, oder auch die ganze SPS neu Starte (also auch der Webserver definitiv nicht aktiv ist)

Eine Idee an was das liegen könnte?

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>TurCon_Redundancy</title>

</head>

<body>
   <form>
        <label for="Ip1">URL1:
        <input id="Ip1" name="Ip1">
        </label>

        <label for="Ip2">URL2:
        <input id="Ip2" name="Ip2">
        </label>

         <input type="submit" value="senden">
    </form>


    <iframe id="iframe1"></iframe>
    <iframe id="iframe2"></iframe>

    <script>
        document.querySelector('form').addEventListener('submit', (event) => {
            // Defaultaktion des Submit d. h. Abschicken des Formulars unterdruecken
            // Dabei wuerde die Seite neu geladen und das wollen wir nicht
            event.preventDefault();
            // Werte aus den Eingabefeldern auslesen und in die
            // src-Attribute der iFrames eintragen
            vIp1 = document.getElementById('Ip1').value;
            vIp2 = document.getElementById('Ip2').value;
            document.getElementById('iframe1').src = vIp1;
            //document.getElementById('iframe2').src = vIp2;
        });




        // Eventlistener für iFrame 1 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
        document.getElementById('iframe1').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
                window.location.href = event.target.src;
        });


        // Eventlistener für iFrame 1 registrieren
        //die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        //wird aufgerufen, wenn der iFrame nicht geladen werden kann
        document.getElementById('iframe1').addEventListener('error', (event) => {
            //kann die Seite nicht geladen werden, wird versucht die zweite Seite zu laden
            document.getElementById('iframe2').src = vIp2;
        })

        // Eventlistener für iFrame 2 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
        document.getElementById('iframe2').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
                window.location.href = event.target.src;
        });
      
 

        // Eventlistener für iFrame 2 registrieren
        // Die anonyme Funktion, hier in Kurzschreibweise mit Doppelpfeil,
        // wird aufgerufen, wenn der iFrame geladen ist
  //      document.getElementById('iframe2').addEventListener('load', (event) => {
            // event.target ist das Element, auf das der Listener registriert wurde.
            // d. h. der iFrame.
            // Wir leiten auf die HTML-Seite der SPS um,
            // damit sie browserfüllend dargestellt wird.
  //          window.location.href = event.target.src;
//        });


    </script>
</body>
</html>

Alles anzeigen

Sempervivum · 13. Mai 2020

Ich habe das jetzt getestet und habe das selbe Ergebnis: Das onerror-Event triggert nicht, wenn man einen iFrame verwendet. Es gibt jedoch eine Alternative:

Ein Testbild laden, das auf der SPS liegt. Ich habe das mit diesem Testskript versucht und es funktioniert, wenn ich irgend eine Bildquelle eintrage, die es nicht gibt:

Code

    <script>
        let im = new Image();
        im.onload = function () { console.log('ok') };
        im.onerror = function () { console.log('err') };

        //im.src = 'xyz----.jpg'; dieses habe ich beim Test verwenden
        im.src = 'http://<IP1>:<PORT>/testbild.jpg'; // so müsste die src bei dir aussehen
    </script>

Teste zunächst, ob es mit einer SPS auch funktioniert und wenn ja, können wir das Ganze vervollständigen.

Sempervivum · 13. Mai 2020

PS: Jetzt erst lese ich dieses:

Zitat

Der Fehler wird scheinbar nicht getriggert... dies ist der Fall, wenn ich mein SPS-Programm stoppe, oder auch die ganze SPS neu Starte (also auch der Webserver definitiv nicht aktiv ist)

Dann wird das wahrscheinlich auch mit dem Testbild nicht funktionieren, denn wenn der Webserver läuft, wird wahrscheinlich auch das Bild fehlerfrei geladen. Versuche es dennoch.

CORT · 13. Mai 2020

Hi,

erst mal wieder Danke für deine Antwort.

Ich fürchte dass das nicht so einfach möglich ist.

Wenn ich ein Bild auf dem Dateisystem der SPS ablege, kann ich das nur über z.B. FTP öffnen...was ja als Bestandteil einer Http(s)-Seite verboten ist...richtig?

Ich könnte jedoch das WebBasedManagement der SPS erreichen...würde mir das was bringen? Hier wird über eine LED der Status der SPS angezeigt. Ist die SPS abgeschaltet, wäre auch diese Seite nicht zu erreichen...

Sempervivum · 13. Mai 2020

Zitat

Ich könnte jedoch das WebBasedManagement der SPS erreichen

Wäre das eine HTML-Seite? Dann könne man daran denken, den Inhalt auszuwerten und auf diese Weise den Status der SPS zu ermitteln. Ich fürchte nur, dass uns dann die SOP einen Strich durch die Rechnung machen wird. Man könnte es allerdings versuchen, ob diese Seite für Cross-Domain-Zugriff freigegeben ist.

CORT · 13. Mai 2020

Ja das ganze ist <!DOCTYPE html>

Ich könnte dir den Code mal kopieren:

HTML

<!DOCTYPE html>

<html>
<head>
<title>CODESYS Ethernet Web-based Management</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="author" content="3S-Smart Software Solutions GmbH">


<link rel="stylesheet" type="text/css" href="css/styles.css">

</head>

<!------------------------------------------------------------
< HTML BODY
<------------------------------------------------------------->

<body>

<div id="page">
  <!-------------------------------------------------------------------  < HEAD AREA  < ------------------------------------------------------------------->  <div id="head_area">
    <h1>Web-based Management</h1>    <div class="user_management_area"></div>
            <p id="value_coupler_info_text"></p>
  </div>  <div class="horizontal-line"></div>
  <!-------------------------------------------------------------------  < STATUS AREA  < ------------------------------------------------------------------->      <div id="status_area">      <div style="display:none"><img src="images/wait_frame_red.gif"><img src="images/wait_red.gif"></div>      <h3>Status</h3>      <ul>        <li>WBM<span class="value"><span id="value_wbm_state"><img class="wbm_state" src="images/wait_frame_green.gif" alt="Status OK"></span></span>        <li>Local Time <span class="value" id="value_status_time_local"></span></li>        <li>Local Date <span class="value" id="value_status_date_local"></span></li>        <li>PLC Switch<span class="value" id="value_run_stop_reset">run</span></li>          <li>            LEDs            <div id="led_area" class="value">              <ul>                              </ul>            </div>          </li>      </ul>    </div>

  <!-------------------------------------------------------------------  < MAIN NAVIGATION AREA  < ------------------------------------------------------------------->      <div id="main_nav">      <h3>Navigation</h3>        <ul>        </ul>      <!-- filled by javaScript -->    </div>
  <!-------------------------------------------------------------------  < CONTENT AREA  < ------------------------------------------------------------------->  <div id="content_area">
    <div class='single_content_page' id='error_content'>      <h2>Error</h2>      <p>Requested content is not available.</p>      <p class="content_page_error"></p>    </div>
  </div>
</div>

    <div id="footer_area">      <p class="footer">WAGO &#8226 Hansastr. 27 &#8226 D-32423 Minden &#8226 WAGO is a registered trademark of WAGO Verwaltungsgesellschaft mbH.    </div>

</body>


<!------------------------------------------------------------
< JAVA SCRIPT FUNCTIONS
<------------------------------------------------------------->
<script type="text/javascript">

var wbmWorking = true;

if(("Microsoft Internet Explorer" === window.navigator.appName) && (9 >= parseInt(document.documentMode, 10)))
{  wbmWorking = false;
}

// polyfill for indexOf, which is not supported by IE8
// Production steps of ECMA-262, Edition 5, 15.4.4.14
// Reference: http://es5.github.io/#x15.4.4.14
if (!Array.prototype.indexOf) {  Array.prototype.indexOf = function(searchElement, fromIndex) {    for (var i = fromIndex; i < this.length; i++) {      if (this[i] === searchElement) return i;    }    return -1; // not found  };
}

Alles anzeigen

CORT · 13. Mai 2020

Fortsetzung:

Code

</script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/iplib.js"></script>
<script type="text/javascript" src="js/jquery.xml2json.js"></script>
<script type="text/javascript" src="js/file-iterator.js"></script>
<script type="text/javascript" src="js/xhr.js"></script>
<script type="text/javascript" src="js/file-transfer.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
<script type="text/javascript" src="js/general_definitions.js"></script>
<script type="text/javascript" src="js/page_buildup.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
<script type='text/javascript' src="js/device_communication.js"></script>
<script type="text/javascript" src="js/device_params.js"></script>
<script type="text/javascript" src="js/device_param_list.js.php"></script>
<script type='text/javascript' src="js/state_area.js"></script>
<script type="text/javascript" src="js/head_station_info.js"></script>
<script type="text/javascript" src="js/user_management.js"></script>
<script type='text/javascript' src="js/interface_config.js"></script>
<script type='text/javascript' src="js/information.js"></script>
<script type='text/javascript' src="js/rts_info.js"></script>
<script type='text/javascript' src="js/rts_configuration.js"></script>
<script type='text/javascript' src="js/webvisu.js"></script>
<script type='text/javascript' src="js/tcpip_common_configuration.js"></script>
<script type='text/javascript' src="js/interfaces.js"></script>
<script type='text/javascript' src="js/default_gateway.js"></script>
<script type='text/javascript' src="js/dns_server.js"></script>
<script type='text/javascript' src="js/ethernet.js"></script>
<script type='text/javascript' src="js/firewall_general_configuration.js"></script>
<script type='text/javascript' src="js/firewall_mac_address_filter.js"></script>
<script type='text/javascript' src="js/firewall_user_filter.js"></script>
<script type='text/javascript' src="js/firewall_service_configuration.js"></script>
<script type='text/javascript' src="js/clock.js"></script>
<script type='text/javascript' src="js/users.js"></script>
<script type='text/javascript' src="js/create_image.js"></script>
<script type='text/javascript' src="js/rs232.js"></script>
<script type='text/javascript' src="js/service_interface.js"></script>
<script type='text/javascript' src="js/start_reboot.js"></script>
<script type='text/javascript' src="js/firmware_backup.js"></script>
<script type='text/javascript' src="js/firmware_restore.js"></script>
<script type='text/javascript' src="js/system_partition.js"></script>
<script type='text/javascript' src="js/mass_storage.js"></script>
<script type='text/javascript' src="js/software_uploads.js"></script>
<script type='text/javascript' src="js/network_services.js"></script>
<script type='text/javascript' src="js/ntp.js"></script>
<script type='text/javascript' src="js/codesys_ports.js"></script>
<script type='text/javascript' src="js/ssh.js"></script>
<script type='text/javascript' src="js/tftp.js"></script>
<script type='text/javascript' src="js/dhcpd.js"></script>
<script type='text/javascript' src="js/dns_service.js"></script>
<script type='text/javascript' src="js/modbus_services.js"></script>
<script type='text/javascript' src="js/snmp_general.js"></script>
<script type='text/javascript' src="js/snmp_v1_v2c.js"></script>
<script type='text/javascript' src="js/snmp_v3.js"></script>
<script type='text/javascript' src="js/diagnostic.js"></script>
<script type='text/javascript' src="js/profibus.js"></script>
<script type='text/javascript' src="js/modem.js"></script>
<script type='text/javascript' src="js/vpn.js"></script>
<script type='text/javascript' src="js/tls.js"></script>
<script type='text/javascript' src="js/integrity.js"></script>
<script type='text/javascript' src="js/opcua.js"></script>
<script type='text/javascript' src="js/cloud_connectivity.js?20190325"></script>
<script type='text/javascript' src="js/routing.js"></script>
<script type='text/javascript' src="js/bacnet_diagnostic.js"></script>
<script type='text/javascript' src="js/bacnet_general_configuration.js"></script>
<script type='text/javascript' src="js/bacnet_storage_location.js"></script>
<script type='text/javascript' src="js/opkg.js"></script>
<script type="text/javascript">
//------------------------------------------------------------------------------
//document ready
//------------------------------------------------------------------------------
$(document).ready(function()
{  // get our own MAC - available only via PHP and important  var clientMacAddress = '';
  //------------------------------------------------------------------------------  // start working  //------------------------------------------------------------------------------  pageElements  = new PageElements();
  var content = new Array(      new InformationContent('information'),      new RtsInfoContent('rts_info'),      new DiagnosticContent('diagnostic'),      new RtsConfigurationContent('rts_configuration'),      new WebvisuContent('webvisu'),      new TcpIpCommonConfigurationContent('tcpip_common_configuration'),      new InterfacesContent('interfaces'),      new EthernetContent('ethernet'),      new FirewallGeneralConfigContent('firewall_general_configuration'),      new FirewallMacAddressFilterContent('firewall_mac_address_filter', clientMacAddress),      new FirewallUserFilterContent('firewall_user_filter'),      new ClockContent('clock'),      new UsersContent('users'),      new CreateImageContent('create_image'),      new RS232Content('rs232'),      new ServiceInterfaceContent('service_interface'),      new StartRebootContent('start_reboot'),      new FirmwareBackupContent('firmware_backup'),      new FirmwareRestoreContent('firmware_restore'),      new SystemPartitionContent('system_partition'),      new MassStorageContent('mass_storage'),      new SoftwareUploadsContent('software_uploads'),      new NetworkServicesContent('network_services'),      new NtpClientContent('ntp'),      new CodesysPortsContent('codesys_ports'),      new SshContent('ssh'),      new TftpContent('tftp'),      new DhcpdContent('dhcpd'),      new DnsServiceContent('dns_service'),      new ModbusServicesContent('modbus_services'),      new SnmpGeneralContent('snmp_general'),      new SnmpV1V2cContent('snmp_v1_v2c'),      new SnmpV3Content('snmp_v3'),      new ProfibusContent('profibus'),            new ModemContent('modem'),      new VpnContent('vpn'),      new TlsContent('tls'),      new IntegrityContent('integrity'),      new OpcuaContent('opcua'),      new DataAgentPageContent('cloud_connectivity'),      new RoutingContent('routing'),      new BacnetDiagnosticContent('bacnet_diagnostic'),      new BacnetGeneralContent('bacnet_general_configuration'),      new BacnetStorageContent('bacnet_storage_location'),      new OpkgContent('opkg')  );
  var actualContentId  = document.location.hash.replace("#", "") || 'information';
  if(!wbmWorking)  {    $('#status_area').hide();    $('#main_nav').hide();    $('.single_content_page[id=error_content]').show();
    var errorText = 'WBM cannot be displayed, because you are using an old Internet Explorer Version (< IE10), ';    errorText    += 'or compability mode is switched on (maybe for intranet sides - please check your IE settings).';    $('.single_content_page[id=error_content] p.content_page_error').text(errorText);  }  else  {
    pageBuildup          = new PageBuildup(actualContentId, function(status)    {      var userManagement   = new UserManagement('', '');
      pageBuildup.UpdateFeatureDependantEntries(function() {
        // update main menu links        pageBuildup.ShowNavEntrySelected(pageBuildup.actualPageId);        pageBuildup.AddNavigationListEvents();
        // update main menu to user level        pageBuildup.SetCurrentUserlevel(userManagement.GetCurrentUserlevel());
        // if a special initial content is requested, load it - and do it via click to navigation, to check access rights before        if(actualContentId.length)        {          // only in case of login page, go directly to it          if('login' === actualContentId)          {            pageBuildup.ProcessContentChangeRequest(actualContentId);          }          else          {            $('#main_nav a#' + actualContentId).trigger('click');          }        }
        $('.content_page[id=error_content] .content_page_error').text('Error while creating page.');        $('.content_page[id=error_content]').show();
        stateArea.Create(function(status)        {          if(status === SUCCESS)            // disabled for for full authentication            stateArea.StartCyclicReading();      });
      // disabled for for full authentication        headStationInfoContent.Init();      });    });  };
});
</script>
</html>

Alles anzeigen

Sempervivum · 13. Mai 2020

Dann sollten wird als erstes testen, ob dabei Zugriff möglich ist oder ob es durch die SOP geblockt ist. Versuche diese Testseite und wirf einen Blick in die Console. Wenn das HTML angezeigt wird ist alles OK. Wenn ein Fehler angezeigt wird, etwa in der Form:

Zitat

Uncaught DOMException: Blocked a frame with origin "http://xxx.html" from accessing a cross-origin frame.

at HTMLIFrameElement.<anonymous>

wird der Zugriff blockiert und wir haben zunächst mal schlechte Karten.

HTML

<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

    <title>Untitled Document</title>

</head>

<body>
    <iframe id="iframe1" src="die-url-der-htmlseite.html"></iframe>
    <script>
        document.getElementById('iframe1').addEventListener('load', (event) => {
            console.log(document.getElementById('iframe1').contentWindow.document.body.innerHTML);
        });
    </script>

</body>

</html>

Alles anzeigen

CORT · 13. Mai 2020

hmh...sieht leider schlecht aus:

könnte man mit php und URL-Check was machen... hab da was gelesen... man müsste dann aber vermutlich ein separates php-File schreiben und das einbinden oder?

so in der Art:

PHP

<?php

// Prüft ob bestimmte URL existiert und sendet im Fehlerfall E-Mail

// URL oder Ressource definieren
$seturl = 'http://meine-website.tld/foo.html';

//Funktion URL Check
function url_check($url) {
    $urlheaders = @get_headers($url);
    return is_array($urlheaders) ? preg_match('/^HTTP\\/\\d+\\.\\d+\\s+2\\d\\d\\s+.*$/',$urlheaders[0]) : false;
};

//URL prüfen
if(url_check($seturl)){
    //URL existiert, Hinweis ausgeben
    echo 'Die URL '.$seturl.' ist erreichbar!';
} else {
    //URL existiert NICHT, Hinweis ausgeben und E-Mail senden
    echo 'Die URL '.$seturl.' ist NICHT erreichbar! Eine E-Mail wurde an die angegebene Adresse gesendet.';
 };

?>

Alles anzeigen

HTML-Seite um auf Webvisualisierungsseiten von zwei SPS zu wechseln

Jetzt mitmachen!

Teilen