iFrame Einbindung und Zugriff auf bestimmten Inhalt einer anderer HTML Datei

nUgg3t · 14.04.2022

Hallo zusammen,

zunächst einmal stelle ich mich vor. Mein Name ist Angelo und bin Automatisierungstechniker.
Ich bin in Sachen HTML eher Neuling. Ich habe aktuell ein Projekt mit HTML und stehe vor einem Problem.

Ich möchte gerne in einer index.html einige iFrames hinzufügen, die auf eine weitere Datei data_all.html zugreifen, allerdings sollen hier den verschiedenen iFrames, verschiedene Inhalte (ID’s) aus der data_all.html zugewiesen werden.

Hier ein Beispielcode:

Index.html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDEX-SEITE</title>



</head>

<h1>iFrame 1
<p>
<iframe id="oben" border="0" frameborder="0" name="antrieb_oben" scrolling="no" src="_Data/data_all.html" style="width: 110px; height: 150px; left: 285px; top: 4px;" class="frame">
</iframe>
</p>
<p>
</p>
<h1>iFrame 2
<p><iframe id="unten" border="0" frameborder="0" name="antrieb_unten" scrolling="no" src="_Data/data_all.html" style="width: 110px; height: 150px; left: 286px; top: 110px;" class="frame">
</iframe>
</p>
</html>

data_all.html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>DATEN</title>


</head>

<body>

<!-- Antrieb 1  -->
<div class="text" id="antrieb1"
<br>:="Gerätestatus Oben":
<br>:="Position Oben":
<p></p>
</div>

<!-- Antrieb 2  -->
<div class="text" id="antrieb2"
<p>:="Gerätestatus Unten":
<br>:="Position Unten":
</div>


</body>

</html>

Ich habe bereits versucht über das „src“ Attribut und die „div id“ der Textabschnitte zuzugreifen, aber ohne Erfolg.

Gibt es eine einfache Methode? Wenn möglich bitte ohne php.

Vielen Dank im Voraus.

Grüße

Sempervivum · 14.04.2022

Hallo Angelo und willkommen im Forum!

Ich nehme an, Du hast keinen Zugriff auf diese data_all.html und kannst sie nicht verändern? Sonst würde es sich anbieten, diese aufzuteilen oder die Variablen gleich in index.html einzubinden.

Für die Beantwortung deiner Frage ist folgendes wichtig: Liegen diese beiden HTML-Dateien auf der selben Domain? Wenn ja ist das relativ leicht zu machen, wenn nicht, müsste man genauer darüber nachdenken.

Beste Grüße - Ulrich

nUgg3t · 14.04.2022

Hallo Ulrich,

vielen Dank für deine prompte Antwort.
Ich könnte die data_all.html verändern, es kommt drauf an wie das mit dem Aufteilen aussehen wird. Ich muss noch dazu sagen, das die data_all.html sich in einem Intervall von 1-1,5s immer aktualisiert.
Die HTML Programmierung bezieht sich nämlich auf eine SPS HMI, die auf gewisse Variablen/Parameter der Steuerung zugreift. Um unnötig ständig die index.html zu aktualisieren, indem sich Texte und Bilder befinden und die Öffnungszeit der Seite verzögern würde, wollte ich iFrames nutzen und nur die data_all.html ständig aktualisieren.

Die Dateien werden sich in der selben Domain befinden. Bzw. es gibt ein WEBORDNER mit Unterordnern natürlich, aber wenn data_all.html im gleichen Ordner wie die index.html sein soll ist es auch kein Problem.

Gruß

Sempervivum · 14.04.2022

Die HTML Programmierung bezieht sich nämlich auf eine SPS HMI, die auf gewisse Variablen/Parameter der Steuerung zugreift. Um unnötig ständig die index.html zu aktualisieren, indem sich Texte und Bilder befinden und die Öffnungszeit der Seite verzögern würde, wollte ich iFrames nutzen und nur die data_all.html ständig aktualisieren.

Das sind wichtige Infos und wenn das so ist, würde ich das etwas anders und moderner aufziehen:
Die data_all.html aufteilen und mit Ajax und der fetch-API einlesen. Würde dann so aussehen:

data1.html:

Code:

<!-- Antrieb 1  -->
:="Gerätestatus Oben":
<br>:="Position Oben":

data2.html:

Code:

<!-- Antrieb 2  -->
:="Gerätestatus Unten":
<br>:="Position Unten":

index.html:

Code:

<!DOCTYPE html>

<head>
<meta content="de" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INDEX-SEITE</title>

</head>
<body>
<h1>Antrieb 1</h1>
<p>
<div class="text" id="antrieb1"></div>
</p>

<p>
<h1>Antrieb 2</h1>
<p>
<div class="text" id="antrieb2"></div>
</p>
<script>
    // Intervall in Millisekunden, in dem die Daten aktualisiert werden:
    const intv = 200;
    // Zyklisch mit dem zuvor definierten Intervall:
    setInterval(() => {
        // Daten 1 mit fetch holen:
        fetch('data1.html').then(response => {
            // Antwort vom Server als Text auswerten:
            return response.text();
        }).then(data => {
            // Daten 1 in den zugehörigen Container eintragen:
            document.getElementById('antrieb1').innerHTML = data;
        });
        // Auf die selbe Weise Daten 2 holen:
        fetch('data2.html').then(response => {
            return response.text();
        }).then(data => {
            document.getElementById('antrieb2').innerHTML = data;
        });
    }, intv);
</script>
</body>
</html>

(ungetestet)
In data1.html und data2.html muss das Grundgerüst mit html, head, body etc. entfallen weil die Inhalte direkt in die Container in index.html eingetragen werden.
Man könnte noch einen Schritt weiter gehen und die Daten im JSON-Format mit einer einzigen Abfrage holen aber ich weiß nicht, ob das mit dem Webserver der SPS funktionieren würde.

nUgg3t · 14.04.2022

Ok

Für ein Neuling in der Materie jetzt gerade etwas viel. Würde das Intervall einmalig für alle "Unterseiten" durchgeführt? Oder wird jede html-Seite für sich 200ms aktualisiert. Damit hätte ich sonst bei bspw. 20 Seiten eine Verkettung der Aktualisierungszeit --> 4s
Ich habe bereits zu jedem Frame eine eigene Seite erstellt gehabt ( in Summe 10) mit einer Aktualisierungszeit von je 1,5s, daher hatte ich eine Latenzzeit von fast 15sek.
Kann ich dein Vorschlag ohne Webserver irgendwie testen? Ich bin gerade nicht in der Nähe der Steuerung und teste alles offline zur Zeit.

Vielen Dank.

Sempervivum · 14.04.2022

Würde das Intervall einmalig für alle "Unterseiten" durchgeführt?

Ja, d. h. die Zeiten würden sich nicht addieren.

Da kein PHP verwendet wird, erwarte ich, dass Du auch keinen Webserver zum Testen brauchst. Ich werde das mal testen.

Sempervivum · 14.04.2022

PS: Da habe ich jetzt etwas nicht bedacht: Zwar kein PHP da, aber für Ajax und fetch braucht es auch einen Webserver.

Sempervivum · 14.04.2022

PPS: Aber mit Webserver jetzt getestet und funktioniert, zumindest in meiner Testumgebung.

nUgg3t · 20.04.2022

Hallo Ulrich, das hat wunderbar geklappt mit deinem Vorschlag. Danke dafür!

Sempervivum · 20.04.2022

Immer gern, freut mich zu lesen, dass es funktioniert.