iframe

Widget zum Einbinden externer Inhalte in einem Iframe. Vor der Anzeige des Iframes wird geprüft, ob die externe Seite erreichbar ist (HEAD Request). Während der Prüfung wird ein rotierendes Spinner-Icon angezeigt. Konnte die Seite geladen werden, wird der Iframe eingeblendet, ansonsten ein Error-Symbol.

Prüfung:

Prüfung fehlgeschlagen:

Same Origin Policy: Aufgrund der Same Origin Policy ist es nicht ohne weiteres möglich Inhalte von fremden Servern per Javascript zu laden. Sollte eine entsprechende Fehlermeldung in der JS Console angezeigt werden, sind in Ways to circumvent the same origin policy einige Wege beschrieben, wie die SOP zu umgehen ist. Wenn es nicht möglich die SOP für einen Dienst zu umgehen, es aber eine alternative Prüf-URL gibt, die zur Verfügbarkeitsprüfung heran gezogen werden kann, dann kann das Attribut "check-src" verwendet werden.

HTML

<div data-type="iframe"
    data-src="http://server.intranet/externer/inhalt.html"
></div>

Versucht die Seite "http://server.intranet/externer/inhalt.html" in einem 100x100 Pixel großen IFrame anzuzeigen.

<div data-type="iframe"
    data-src="http://server.intranet/externer/inhalt.html"
    data-fill="yes"
></div>

Versucht die Seite "http://server.intranet/externer/inhalt.html" in einem IFrame anzuzeigen, der das umgebende Element vollständig ausfüllt.

<div data-type="iframe"
    data-src="http://server.intranet/externer/inhalt.html"
    data-check-src="http://server.intranet/externer/inhalt.html"
    data-device="SERVER"
    data-get="presence"
    date-get-refresh="present"
    data-fill="no"
    data-height="100"
    data-width="100"
    data-icon-spinner="fa-spinner fa-spin"
    data-color-spinner="#aa6900"
    data-icon-error="fa-frown-o"
    data-color-error="#505050"
    data-scrolling="no"
    data-timeout="3000"
></div>

Attribute

src

URL des externen Inhalts, der im Iframe angezeigt werden soll

check-src

URL des externen Inhalts, deren Verfügbarkeit geprüft werden soll. Default: Wert des Attributes "src"

device

Name eines Fhem-Devices das überwacht werden soll. Bei Zustandsänderung kann ein Refresh des Widgets ausgelöst werden. Default: nicht gesetzt

get

Name eines Readings eines Fhem-Devices das überwacht werden soll. Bei Zustandsänderung kann ein Refresh des Widgets ausgelöst werden. Default: STATE

get-refresh

Wert des überwachten Zustands (siehe device/get) der einen Refresh des Widgets auslösen soll. Ist get-refresh nicht gesetzt, löst jede Zustandsänderung einen Refresh aus. Default: nicht gesetzt

fill

Soll das umgebende Element vom Iframe ausgefüllt werden? Höhere Priorität als height und width. Mögliche Werte: yes, no. Default: no

height

Höhe des Iframes in Pixeln. Default: 100

width

Breite des Iframes in Pixeln. Default: 100

icon-spinner

Icon das während der Verfügbarkeitsprüfung angezeigt werden soll. Durch hinzufügen der Klassen "fa-spin" wird das Icon drehend angezeigt. Default: fa-spinner fa-spin

color-spinner

Farbe für icon-spinner. Default: #aa6900

icon-error

Icon das bei fehlgeschlagener Verfügbarkeitsprüfung angezeigt werden soll. Default: fa-frown-o

color-error

Farbe für icon-error. Default: #505050

scrolling

Sollen Scrollbars im Iframe angezeigt werden? Mögliche Werte: yes,no,auto. Default: no

timeout

Timeout für die Verfügbarkeitsprüfung in Milisekunden. Default: 3000