Einbetten einer externen Webseite stört die Funktion von Button- & Submit-Elementen der externen Webseite

Question

Hallo!
In unserem Fragebogen haben wir eine externe Webseite eingebettet. Das haben wir mit folgendem Code umgesetzt:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("s2t-content").outerHTML = '<div class="h-screen", "w-screen"><iframe src="hier wäre unser Link" title="Website" height="100%" width="100%">';
}); </script>

<script src="https://cdn.tailwindcss.com"></script>

Die Webseite wird zwar wie gewollt angezeigt, aber die button und submit Elemente der externen Webseite funktionieren nicht richtig.

Auch wenn wir die Webseite, wie in einem anderen Forumsbeitrag vorgeschlagen, mit folgendem Code einbetten, tritt das Problem auf:

<iframe src="hier wäre unser Link" style="width: 100%; height: 100%">

Kann uns jemand sagen, woran das liegt bzw. wie man das fixen kann?

Answer 1

In dem JavaScript-Code scheint mir ein </div> am Ende zu fehlen:

... = '<div class="h-screen", "w-screen"><iframe src="hier wäre unser Link" title="Website" height="100%" width="100%"></div>';

Allerdings dürfte die Einbettung nur per <iframe> keine Auswirkung auf die restliche Seite haben. Möchten Sie nochmal exakt den Code posten, den Sie verwendet haben? Falls auch dort ein HTML-Tag fehlt, würde das den Fehler erklären.

Comments

Wenn ich ein </div> dort einfüge, bekomme ich folgende Fehlermeldung (ohne </div> bekomme ich keine Fehlermeldung):

(Anfang der Fehlermeldung)
Warnung: Der HTML-Code des Textbausteins IN06 [ger] scheint nicht valide zu sein. Bitte überprüfen Sie den HTML-Code, um Probleme mit der HTML-Struktur des Fragebogens zu vermeiden. Intern wurde folgende Fehlermeldung ermittelt:
[line 4] Unexpected end tag : script
}); </script>
             ^
[line 6] Unexpected end tag : div
<script src="https://cdn.tailwindcss.com"></script></div>
                                                         ^
Die Änderungen wurden gespeichert.
(Ende der Fehlermeldung)

Die Funktion des Codes scheint sich allerdings mit und ohne </div> nicht zu unterscheiden, beides mal tritt das oben erklärte Problem mit der externen Webseite auf.

Der Einfachkeit halber und weil dort ja auch das Problem auftritt, würde ich bei dem einfachen iframe-Code bleiben. Das ist der exakt verwendete Code (in einem HTML-Element):
(Codeanfang)
<iframe src="https://laufbahn-atlas.vercel.app/" style="width: 100%; height: 100vH">
(Codeende)
Hinweis: Die Veränderungen zum oben bereits geposteten Code sind der Websitelink und inzwischen zur besseren Darstellung die height. Mehr Code ist auf dieser Fragebogenseite nicht eingebunden. Ein </iframe> am Ende ändert auch nichts am Problem.

Falls das hilft, hier auch noch ein Pretestlink, für die Seite, wo die externe Webseite mittels des iframe-Codes eingebunden ist: https://www.soscisurvey.de/laufbahnatlas2/?act=ltmlqGSWyxNx8YUpv52ujMor

Ich weiß nicht, ob das bei der Lösung des Problems hilft, aber inzwischen haben wir herausgefunden, dass das Problem nur auftritt, wenn man die Webseite das erste Mal besucht. Dann wird eine Willkommensseite und im Anschluss eine Erklärseite angezeigt, welche bei erneuter Verwendung nicht mehr angezeigt werden. Hat man die Webseite also schon mal verwendet und öffnet SosciSurvey im gleichen Browser, kommt man im iframe direkt auf die Hauptseite und dort funktioniert alles normal. Kommt man im iframe allerdings als Erstnutzer auf die Website kann man nur zwischen der Willkommens- und der Erklärseite hin- und herspringen und gelangt nicht auf die Hauptseite. Außerhalb des iframe in SosciSurvey (also wenn man die Webseite ganz normal nutzt) taucht dieses Problem nicht auf.

---

Danke für den Pretest-Link. Bitte ergänzen Sie hinter dem <iframe> noch ein </iframe>.

---

Das </iframe> ist ergänzt und löst aber leider immer noch nicht das Problem.

---

Wir kommen aber weiter: Unter dem <iframe> ist nun das Eingabefeld für die Pretest-Kommentare sichtbar und der Weiter-Knopf. Das war vorher nicht der Fall.

Wenn ich nun den "Weiter"-Knopf in Ihrem Pretest klicke, komme ich korrekt ru nächsten (ind em fall zur letzten) Seite des Fragebogens: "Vielen Dank für Ihre Teilnahme!" - technisch ist SoSci-seitig also schonmal einiges besser.

> aber die button und submit Elemente der externen Webseite funktionieren nicht richtig.

In dem eingebetteten Inhalt kann ich in Firefox auch munter klicken. In welchem Browser funktionieren denn welche Knöpfe genau nicht?

---

Am Computer funktioniert Firefox, aber nicht Edge und Chrome. Am Handy funktioniert Firefox auch, aber Chrome und Ecosia nicht.

Das Problem ist auf der 2. Seite (Wie funktioniert's?). Dort sollte der Pfeil rechts unten zur Hauptseite (mit den 3 Tabs) führen. In den Browsern, wo es Probleme gibt, wird man allerdings wieder zur ersten Seite zurückgeleitet. Dementsprechend kann man dort immer nur zwischen der Willkommensseite und der 2. Seite hin und herspringen und landet nie auf der Hauptseite.

---

Ich kann das Problem in Chrome replizieren ... allerdings lässt sich "von außen" nicht nachvollziehen, warum er auftritt. Da müssten Sie sich bitte mal direkt an den Anbieter der eingebetteten Seite https://laufbahn-atlas.vercel.app/ wenden. Und falls Sie das sein sollten, müssten Sie in der App mal zusätzliches Logging einschalten, um das Routing zu verfolgen.

Es ist durchaus möglich, dass bei der Programmierung der App niemand getestet hat, wie sich diese in einem iFrame in Chrome verhält.

Im schlimmsten Fall müssten Sie die App in einem neuen Browser-Tab öffnen und darauf hoffen, dass die Leute anschließend wieder zum Fragebogen-Tab zurückfinden.

---

Alles klar, vielen Dank für die Hilfe!