Link einer Website in iFrame in anderem iFrame öffnen

[ChristianG]

Hallo,

in einem Uniprojekt erstellen wir gerade eine Seite, in der Websites in mehreren iFrames aufgerufen werden sollen. So weit so gut.

Die Website ist hierbei die Webansicht eines Überwachungstools (Icinga).

Es soll nun möglich sein, wenn ich einen Link auf der Website in einem iFrame, beispielsweise mit der Topologie, anklicke, dass sich dieser in einem anderen iFrame öffnet.

Falls das mit iFrames nicht gehen sollte, ist es möglich, das Problem anderweitig zu lösen (beispielsweise über mehrere Fenster)?

Vielen Dank im Voraus!

Viele Grüße

Christian

[Lisa]

Hallo,

das geht nur, glaube ich zumindest, wenn du Einfluß auf den Quelltext des Iframeinhalts hast. Dann kannst du bestimmen in welchem Fenster/Frame Links geöffnet werden sollen. Genau genommen besser mit einer, z.B. JS, Weiche arbeiten, die diese LinkTarget-Bestimmung nur ausführt, wenn sich die Seite in deinem FrameViewer befindet. Hast du diese Option?

lg.

[ChristianG]

Mein aktueller Stand ist, dass ich nicht den Quelltext beeinflussen kann, da das Webinterface von Icinga erstellt wird. Ich werde mich aber nochmal erkundigen.

Danke schon mal!

[Felix Riesterer]

Lieber ChristianG,

Es soll nun möglich sein, wenn ich einen Link auf der Website in einem iFrame, beispielsweise mit der Topologie, anklicke, dass sich dieser in einem anderen iFrame öffnet.

egal ob iFrame, oder Frameset, wenn sich das Linkziel in einem anderen Frame oder Fenster öffnen soll, dann geht das nur mit einem passend gesetzten target-Attribut.

Jetzt stellt sich nur die Frage, wie dieses Attribut bei den jeweiligen Links in den Quellcode kommt (und was es dort bewirkt, wenn man die Seite ohne umgebende Frames nutzt!). Spontan hätte ich jetzt an eine clientseitige Lösung mit JavaScript gedacht, die diese target-Attribute dynamisch vergibt. Ein solches Ansinnen hat aber zu viele Fallstricke, da die Browser hier sehr streng abschotten, damit Sicherheitsprobleme verhindert werden.

Falls das mit iFrames nicht gehen sollte, ist es möglich, das Problem anderweitig zu lösen (beispielsweise über mehrere Fenster)?

Ein Frame ist wie ein anderes Fenster, also hilft es nicht, anstelle von Frames ganze Browserfenster (oder -tabs!) zu verwenden.

Die sicherste Lösung setzt voraus, dass ihr serverseitige Techniken einsetzen könnt. Die Frame-Seite könnte so gestaltet sein, dass die zu beobachtenden Webseiten dort nicht direkt geladen werden, sondern über ein serverseitiges Script, welches ihr auf einem Webserver bereitstellt und welches die jeweilige Webseite vor der Weiterreichung an den Browser überarbeitet und so die target-Attribute in die Links einfügt.

Liebe Grüße

Felix Riesterer

[ChristianG]

Hallo Felix,

danke schon mal für deine Antwort!

Muss ich für deine Lösung an den Quellcode des Webinterfaces von Icinga (an welches ich nach aktuellem Stand nicht komme, erkundige mich diesbezüglich nochmal) oder kann ich das Skript irgendwie hintendran schalten?

Wie du merkst, lerne ich gerade erst html, was das Ganze für mich noch ziemlich fremd aussehen lässt. Sorry dafür.

Viele Grüße

Christian

[Felix Riesterer]

Lieber ChristianG,

Muss ich für deine Lösung an den Quellcode des Webinterfaces von Icinga

sehr wahrscheinlich nicht.

oder kann ich das Skript irgendwie hintendran schalten?

Davon gehe ich aus. Was genau stellst Du bei Icinga denn ein? Stellst Du dort ein "1. Fenster https://www.example.org", "2. Fenster https://forum.selfhtml.org" usw?

Wenn dem so wäre, könntest Du dort vielleicht einstellen "1. Fenster https://my.uni.de/my/webspace/my_script.php?url=https://www.example.org", "2. Fenster https://my.uni.de/my/webspace/my_script.php?url=https://forum.selfhtml.org" usw.

Das serverseitige Script wäre dann etwas anderes als HTML, nämlich eine Scriptsprache (so richtig mit programmieren und so), aber lösbar wäre das von Dir beschriebene Problem damit.

Wie du merkst, lerne ich gerade erst html, was das Ganze für mich noch ziemlich fremd aussehen lässt. Sorry dafür.

Wieso "Sorry dafür"? Auch ich stand mit HTML einmal am Anfang. Und wenn ich Dir jetzt gleich noch eine serverseitige Scriptsprache andrehe, dann macht das die Sache sicherlich noch fremder.

Liebe Grüße

Felix Riesterer

[ChristianG]

Hallo Felix,

Icinga stellt lokal die Website zur Überwachung zur Verfügung (LAN) und sieht etwa so aus: https://icinga.com/wp-content/uploads/2016/03/icingaweb2-high-contrast-1.png

Damit kann beispielsweise die Temperatur eines Servers und dessen Lüfter überwacht werden. Hat man mehrere, so kann man sich diese in einer Topologie anzeigen lassen und, wenn ein Problem auftritt, auf das entsprechende Objekt klicken, um eine Ansicht nur dieses Objekts zu bekommen. Nun wäre es schön, wenn die Topologie dauerhaft in einem iFrame abgebildet werden kann und die Detailansichten immer in einem anderen iFrame geöffnet werden.

Die URL zum Einbinden in den iFrames wird in etwa so aussehen und nur die Punkte ändern sich beim Anklicken von Symbolen: ip/icingaweb2/...

Kannst du mir Seiten empfehlen, wo ich mich etwas in die von dir empfohlene Variante einlesen kann?

Danke erneut!

Viele Grüße

Christian

[Felix Riesterer]

Lieber ChristianG,

https://icinga.com/wp-content/uploads/2016/03/icingaweb2-high-contrast-1.png

und wo sehe ich da iFrames? Wo sind die Links, die sich in einem anderen iFrame öffnen sollen?

Damit kann beispielsweise die Temperatur eines Servers und dessen Lüfter überwacht werden.

Sehr schön, aber wo sind die Links?

Hat man mehrere, so kann man sich diese in einer Topologie anzeigen lassen und, wenn ein Problem auftritt, auf das entsprechende Objekt klicken, um eine Ansicht nur dieses Objekts zu bekommen.

Mit welchem Link? Wo soll man da klicken?

Nun wäre es schön, wenn die Topologie dauerhaft in einem iFrame abgebildet werden kann und die Detailansichten immer in einem anderen iFrame geöffnet werden.

Ich glaube, Du solltest die Macher Deines Tools anschreiben. Mir wird das hier zu bildlich. Kein Quellcode, kein Beispiel - nur ein Bild.

Liebe Grüße

Felix Riesterer

[ChristianG]

Hallo Felix,

vielleicht habe ich mich etwas schwammig ausgedrückt. Die Website die ich in mein iframe laden möchte, ist die, von der ich ein Bild geschickt habe. Sprich iframe1: src="ip/icingaweb2"

Nun sollen alle aufgerufenen Links aus iframe1 in iframe2 geöffnet werden. Für vordefinierte Links geht das ja einfach über den Target befehl (href="http://www.google.com" target="iframe2"), die Links über die Website lassen sich so nicht im anderen iframe öffnen.

Viele Grüße

Christian

[JürgenB]

Hallo Christian,

wenn alle Seiten, die frame—einbindende und die in den Frames, vom gleiche Server kommen, könntest du mit JavaScript die Links mit Target-Attributen versehen.

Wenn nicht, könntest du die Seiten serverseitig, z.B. mit php, zusammensetzen.

Eine weitere Variante wäre, die IFrame-Inhalte per Ajax zu holen und die Seite dann clientseitig zu erstellen. Dazu muss der Server mit den Frameseiten dann aber den CORS-Header gesetzt haben.

Bietet Icinga keine Schnittstelle, um die Daten z.B. als JSON abzuholen?

Gruß
Jürgen

[Felix Riesterer]

Lieber ChristianG,

ich bleibe bei meiner Empfehlung. Du hast ein Problem mit Icinga. Also ist es das Naheliegendste, die Macher zu kontaktieren. Die bieten Support an, wahrscheinlich kostenpflichtigen. Du kannst auch die Icinga-Community um Rat fragen. Vielleicht können die Dein Problem lösen.

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo ChristianG,

ich kann mir mehrere Lösungen vorstellen. Aber ich hätte ein paar Fragen zu klären:

• Stammt die Topologieseite auch von Icinga?
• Wenn ja: Braucht die Topologieseite JavaScript um sich ordentlich darzustellen?
• Könnt ihr dort, wo die Icinga Seiten herkommen, eine eigene HTML Seite hinzufügen? Oder CORS Header hinzufügen?(wegen SOP)

Ich ziele darauf ab, die Topologie Seite aus dem iframe zu holen oder alternativ Zugriff auf ihr DOM zu bekommen. Dann kann man das Problem mit JavaScript auf der Rahmenseite lösen, denke ich.

Rolf

[ChristianG]

Hallo Rolf,

danke für deine Antwort. Die Topologieseite wird auch von Icinga erstellt und nutzt JavaScript. Wir können auf dem Server, auf dem Icinga laufen wird auch eine eigene HTML Seite erstellen. Direkt den Quelltext von Icinga zu ändern geht meines Wissens nach nicht…

Viele Grüße

Christian

[Rolf B]

Hallo ChristianG,

Wir können auf dem Server, auf dem Icinga laufen wird auch eine eigene HTML Seite erstellen.

Das ist gut. Dann könnt ihr die Rahmenseite, die die iframes einbindet, aus der gleichen Quelle holen, und damit vertrauen die iframes dieser Seite. JavaScript, das auf der Rahmenseite läuft, kann dann auf das DOM des iframe zugreifen.

Ich habe eine kleine Testseite gemacht.

<!DOCTYPE html>
<html>
<head><title>iframe test</title></head>
<body>
<h1>IFRAME-Test</h1>
<main>
<iframe id="topo" src="topologie.html"></iframe>
<iframe id="content" src=""></iframe>
</main>
<script>
(function() {
   let topo = document.getElementById("topo");
   let content = document.getElementById("content");
   
   topo.addEventListener("load", topoLoadHandler);
   
   function topoLoadHandler() {
      topo.contentDocument.addEventListener("click", topoClickHandler);
   }
   
   function topoClickHandler(e) {
      if (e.target.tagName == "A") {
         content.src = e.target.href;
         e.preventDefault();
      }
   }
})();
</script>
</body>
</html>

Wenn im topo-iframe ein Link geklickt wird, öffnet sich die entsprechende Seite im content-iframe. Das muss man für deinen Anwendungsfall sicherlich noch verfeinern, aber das ist das Prinzip. Voraussetzung ist, dass diese HTML Seite aus dem gleichen Web stammt wie die Icinga Topologieseite. Andernfalls könnte man vielleicht noch was mit CORS-Headern anfangen, aber ich mutmaße mal, dass ihr die nicht hinzugefrickelt bekommt.

Rolf

[ChristianG]

Hallo Rolf,

vielen Dank für deine Hilfe!:) Ich werde das morgen mal ausprobieren und mich, falls noch Fragen auftauchen, nochmal melden.

Viele Grüße

Christian

[ChristianG]

Hallo Rolf,

ich hätte nochmal ein paar Fragen zu deinem Code: Ich habe es leider nicht zum Laufen gebracht, habe aber folgende Überlegung, was der Grund sein könnte:

Icinga läuft auf meinem Rechner (auf dem Server hab ich es noch nicht probieren können) in einer VM auf Linux und man kann die Website über den Localhost aufrufen (wird über Apache bereitgestellt). Ruft man in der VM deinen Code als HTML File auf, werden die Links trotzdem im gleichen iFrame geöffnet. Nun bin ich auf die Idee gekommen, dass wegen der SOP die iFrame-Seite auch über den Localhost laufen muss. Jedoch kann ich keinen 2ten Apache Server hierfür in der VM starten.

Liege ich damit richtig, dass das das Problem ist? Wenn ja, sollte es auf dem Server funktionieren.

Viele Grüße

Christian

[Rolf B]

Hallo ChristianG,

hm, wo ist denn nun wieder meim Würmerzieher? Ah, da. Halt mal deine Nase her...

Du machst also alles in der VM, richtig?

Gibt es irgendwelche Fehlermeldungen aus dem JavaScript? Was steht in der Console der Browser-Entwicklerwerkzeuge?

Welche URL hat die Rahmenseite, die Du aus meinem Vorschlag erstellt hast, und welche URL hat die Icinga-Topologieseite? Wenn beide von http://localhost geladen werden, sollte die SOP erfüllt sein (sprich: Protokoll, Domain und Port müssen gleich sein)

Rolf

[ChristianG]

Hallo Rolf,

ich habe jetzt mit Hilfe von XAMPP sowohl die Testseite als auch 2 andere Seiten, die sich gegenseitig verlinken, in den Lokalhost gehostet. Die Testseite ruft hierbei eine Seite auf. Das Öffnen im neuen iFrame funktioniert bestens, vielen vielen Dank nochmals!

Viele Grüße

Christian