HTML: Button löst funktion auf anderer Seite aus?
Hallo,
ich habe zwei HTML-Seiten, die ich auf einem Server hoste. Die eine soll ein Kontrollpanel sein, das die andere Website steuert. Ich möchte auf dem Kontrollpanel z.B einen Button haben, der auf der anderen Website eine Funktion auslöst.
Beispiel: Auf dem Kontrollpanel ist ein Button. Wenn ich diesen betätige, wird auf der richtigen Website eine Uhr aus-/eingeblendet.
Was benötige ich dafür und wie kann ich es umsetzen?
Vielen Dank im Voraus!
3 Antworten
Du bräuchtest eine zentrale Datenstelle, an die Dokument A seine Informationen schickt und die Dokument B in regelmäßigen Abständen abfragt (oder von der Dokument B informiert wird). Hierbei würde eine Serveranwendung helfen (für die kannst du PHP, Node.js, Ruby, o.ä. verwenden - Hauptsache, du hast einen Webserver zur Verfügung, der die gewählte Technologie unterstützt).
Beide Dokumente könnten via JavaScript eine WebSocket-Verbindung zur Serveranwendung aufnehmen. Für die Kommunikation zwischen Server und Dokument B würde aber auch SSE ausreichen.
Dies soweit für den Fall, dass die Aktualisierung von Dokument A sofort umgesetzt werden soll, ohne das Dokument B neu geladen werden muss.
Den aktuellen Zustand solltest du zusätzlich zentral speichern (in einer Datei / Datenbank), sodass bei (Neu-)laden von Dokument B der letzte Stand geladen werden kann.
Das fallen mir Stichworte ein, wie "iframes" und ggf "jquery" was das Programmieren einfacherer macht.
Das, was du möchtest, ist sicher kein Hexenwert. Du kannst von der Panel-Webseite, dann per JavaScrtip z.B. Clicks auslösen:
document.getElementById('MeinElement').click();
Wenn die fremde Seite im frame eingebunden ist, geht das vom Prinzip ähnlich.
Funktionen kann man auch so aufrufen:
document.getElementById('MeinFrame').contentWindow.helloWorld();
Beim Testen musst du ggf. einige Sicherheitsbeschränkungen von Browsern beachten (Cross-Site-Beschränkungen), vor allem, wenn dein Panel lokal als HTML läuft.
Eine Javascript Datei mit den beiden Seiten verlinken und getElementById nutzen
Wie verbinde ich sie, dass der Script-Speicher geteilt wird?
<script src="(datei name).js" type="text/javascript" />
Muss in <head>. Erstelle eine extra Javascript datei in den Ordner in den sich die beiden HTML Seiten befinden.
Nutz ganz einfach PHP. Ruf dann zum Beispiel per Controller Pannel die andere Seite auf und gib einfach per $_Get oder Post die Daten mit, von den Objecten die eingeblendet sein sollen. (Per Post würde der Link dann so aussehen: https://deineSeite.de/?uhr=eingeblenders&Datum=ausgeblendet etc) Das sollte funktionieren.