Wie binde ich zusätzliche Inhalte (z. B. Google Maps) über Iframes ein?

Inlineframes zur Einbindung externer Quellen

Wie kann ich Inhalte von externen Seiten anzeigen?

Mit der Hilfe eines Frames bzw. Iframes ist es möglich, Inhalte anderer Seiten schaufensterartig auf der eigenen Seite einzubinden und dem Nutzer anzuzeigen. Ein möglicher Anwendungsfall ist die Einbindung einer Karte von Google Maps. Google Maps stellt dabei einen speziellen Link zur Verfügung, der eine optimale Einbindung der Inhalte (hier: der Karte) ermöglicht. Ähnliche spezifische Links für die Einbindung als Iframe werden auch von anderen Seiten bereitgestellt.

Technische und rechtliche Hürden

Welche Inhalte kann man anzeigen?

Nicht jeder Inhalt darf ohne Zustimmung des Betreibers der externen Seite eingebunden werden. Aber auch wenn Sie sich sicher sind, dass der Inhalt eingebunden werden darf, da es sich bspw. um Ergebnisse auf einem Server ihres eigenen Forschungsprojektes handelt, gibt es noch zwei technische Hürden:

  1. Sie müssen einen "https://"-Link nehmen. Da die Seiten unseres Systems über https (also "sicher") ausgegeben werden, sträuben sich die Browser in einem Teil der Seite dann etwas fremdes anzuzeigen, dass nur über http (ohne s) eingebunden wird.
  2. Die eingebundene Seite darf nicht "X-Frame-Options: SAMEORIGIN" nutzen. Diese Option entspricht quasi einem "Kopierschutz" der genau dieses Einbinden als Iframe unterbinden soll. Typische Beispiele dafür sind https://www.google.de/ u.ä. Webseiten auf denen man sich prinzipiell einloggen kann. In solchen Fällen müssen Sie immer die angebotenen Links zum einbetten nehmen. Das heißt: für die Google-Hauptseite ist es verboten, aber die "diese Google Karte auf ihrer Seite einfügen"-Option bietet einen erlaubten Link.

Einbindung eines I-Frames am Beispiel von Google Maps

1. Schritt

Modulseite auswählen

Links in der Modulübersicht wird das Modul "Seite" ausgewählt und dann selektiert man im Seitenbaum nach der jeweiligen Unterseite. 

2. Schritt

Neues Textelement anlegen

Im Bearbeitungsbereich geht man nun auf den Bereich "Neues Element anlegen" und wählt das Element "Text" aus.

3. Schritt

Typ Inline Frame einstellen

Nachdem man das Textelement in die Bearbeitungsmaske gezogen hat, geht man ds Element drauf und kann unter dem Reiter Allgemein den Typ: "Inline Frame" einstellen. Nachdem man den Typ eingestellt hat, kann man die Überschrift sowie die jeweilige URL einfügen. 

4. Schritt

Höhe verändern

In den Feldern Breite und Höhe kann die Größe des Iframes konfiguriert werden. Die Breite sollte grundsätzlich auf 100% festgelegt werden. Für die Höhe sollte ein geeigneter Wert (z. B. 400px) gewählt werden. Die Werte können jederzeit geändert werden.

5. Schritt

Speichern des Elementes

Das Speichern erfolgt oben durch einen Klick auf den Button "Speichern". Anschließend klickt man auf den Button "Schließen" und somit schließt sich die Bearbeitungsmaske.