Iframe / Modalbox automatisch mit Aufruf einer Webseite öffnen

    Bitte jetzt nicht den Sinn meines Vorhabens hinterfragen, weil ich dann sehr viel schreiben müsste, das aber dann für die Lösung unwichtig ist.

    Gewünschte Funktion:
    Jemand ruft eine bestimmte Webseite auf. Auf dieser soll ein Script dafür sorgen, dass direkt nach Laden der Seite eine Modalbox (Iframe) gestartet wird, in der sofort der Inhalt einer weiteren Webseite dargestellt wird. Sowohl die zunächst aufgerufene Webseite als auch diejenige, die dann in der Modalbox dargestellt werden soll, werden auf der gleichen Website gehostet, sodass es zu keiner XSS oder ähnlicher Problematik kommen kann.
    Im Fall, dass jemand Scripte oder automatisch startende Modalboxen usw. im Browser deaktiviert hat, wird die Modalbox halt nicht angezeigt, sondern nur die zuerst geöffnete Webseite. Auf dieser befindet sich ein Button oder Link, mit dem dann die Modalbox manuell aufgerufen werden kann.

    Technik dazu:
    Ich verwende UiKit bzw. YooTheme Pagebuilder. Um dort elegant eine Modalbox mit dem Inhalt einer weiteren Webseite darstellen zu können (und zwar ohne Header und Footer), muss der Link für manuellen Aufruf in HTML so aussehen:

    <div uk-lightbox="toggle: [data-type='iframe']">
    <a href="webseite-fuer-modalbox?tmpl=template" 
    title="titel der webseite in der modalbox" 
    data-type="iframe" 
    data-caption="webseite in der modalbox" 
    data-title="Hier gehts zur webseite in der modalbox">
    </div>hier klicken</a>

    Der Trick, dass Header und Footer in der Modalbox nicht angezeigt werden, liegt in der Ergänzung der URL durch ?tmpl=template


    Nun habe ich im Web nach dem passenden Javasccript-Schnippsel gesucht und fand dies hier:

    <iframe id="BuKa" src=""></iframe>
    <script>
     // Warte, bis die Seite geladen ist
     window.addEventListener('load', function() {
       const iframe = document.getElementById('BuKa');
       // Setze die URL des zu ladenden Inhalts
       iframe.src = 'https://meine-domain.xx/webseite-fuer-modalbox; // Ersetze durch die gewünschte URL
     });
    </script>

    Dieses Script habe ich getestet und es funktioniert. Aber ich kann die Aufgabe nicht lösen, den zwingend nötigen UiKit-Code in das Script hinein zu bringen.

    Hierzu benötige ich hier Unterstützung! Danke!

    • Hilfreichste Antwort

    Gerade habe ich mal aus Jux Claude von Anthropics befragt. Ich erhielt iinnerhalb von 30 Sekunden folgende und auf Anhieb funktionierende Lösung:

    Das Problem ist eigentlich recht elegant lösbar. Der Trick: Das automatische Öffnen geschieht per JavaScript, indem UIkit.modal() programmatisch aufgerufen wird – und der manuelle Button bleibt als Fallback erhalten.

    <!-- Manueller Aufruf-Button (Fallback) -->

    <div uk-lightbox="toggle: [data-type='iframe']">

    <a href="https://meine-domain.xx/webseite-fuer-modalbox?tmpl=template"

    title="Titel der Webseite in der Modalbox"

    data-type="iframe"

    data-caption="Webseite in der Modalbox"

    data-title="Hier gehts zur Webseite in der Modalbox"

    id="modalbox-trigger">

    hier klicken

    </a>

    </div>

    <!-- Auto-Start Script -->

    <script>

    window.addEventListener('load', function () {

    var trigger = document.getElementById('modalbox-trigger');

    if (trigger && typeof UIkit !== 'undefined') {

    UIkit.lightbox(trigger.closest('[uk-lightbox]')).show(0);

    }

    });

    </script>

    Wie es funktioniert:

    Das Script wartet auf das vollständige Laden der Seite, greift dann auf das bereits vorhandene UIkit-Lightbox-Element zu und ruft .show(0) darauf auf – das öffnet den ersten (und einzigen) Eintrag der Lightbox, also Ihren Iframe.

    Warum dieser Ansatz:

    Es wird kein separater <iframe> benötigt – UIkit übernimmt das Rendering vollständig

    Der ?tmpl=template-Trick für Header/Footer-Unterdrückung bleibt erhalten

    Falls JavaScript deaktiviert ist oder UIkit nicht lädt, bleibt der manuelle Link vollständig funktionsfähig

    Kein doppelter Code – Button und Auto-Start nutzen dieselbe Konfiguration

    Wichtig: Das Script muss nach dem UIkit-JavaScript eingebunden sein (also am Ende des <body> oder nach dem UIkit-<script>-Tag), damit UIkit zum Zeitpunkt der Ausführung bereits verfügbar ist. Im YOOtheme Pro Pagebuilder können Sie das Script-Snippet direkt in ein „Custom HTML"-Element auf der Seite einfügen.

    Dass die KI so etwas so schnell lösen kann... Ich bin echt überrascht!

    Aber ich finde es dann aber auch fair, wenn ich diese Lösung hier mitteile, damit andere auch was davon haben. Möge mein Beitrag hier helfen.

    Aber was ist mit der Zukunft von z.B. diesem Joomla-Forum, wenn zunehmend solche Fragen per KI beantwortet werden, und das sofort??? Ich fände es schade, wenn demnächst womöglich wegen der leistungsstarken KI Foren sterben würden!

    Die Wahrscheinlichkeit, dass Du mit KI richtige Ergebnisse bekommst, ist immer noch weit von 100 % entfernt.

    Ich habe mir von Claude eine Erweiterung schreiben lassen. Das hat teilweise funktioniert, aber viele Nachfragen benötigt. Am Ende ist Claude daran gescheitert, aus dem (immerhin funktionsfähigen) Prototyp eine Erweiterung gemäß den Programmierstandards von J6 zu bauen; dazu hat es dann einen erfahrenen menschlichen Entwickler gebraucht.

    Freundliche Grüße aus Wächtersbach, Rolf Dautrich

    Zitat von Clemens-XS

    Aber was ist mit der Zukunft von z.B. diesem Joomla-Forum, wenn zunehmend solche Fragen per KI beantwortet werden, und das sofort??? Ich fände es schade, wenn demnächst womöglich wegen der leistungsstarken KI Foren sterben würden!

    Es existieren auch KI-Psychologen. Gratis Seelenklempner ganz ohne Webseite, aber auf eigenes Risiko, genauso wie Claude Code auch.

    Danke, bei mir gleichfalls: Ich bin ja Heilpraktiker der Psychotherapie. Da sind mir auch schon die ersten "Klienten" untergekommen, die jetzt zur KI in Therapie gehen. Prost Mahlzeit!

    In den USA klagen die ersten Eltern gegen KI Unternehmen, dass sich ihr Kind von KI hat "therapieren" lassen und das ist im Suizid geendet.

    Ich finde, man muss halt kritisch schauen und ggfs. vorsichtig genug ausprobieren, was funktioniert und was problematisch ist.

    Lang lebe unser Forum!

    Zitat von Clemens-XS

    Aber was ist mit der Zukunft von z.B. diesem Joomla-Forum, wenn zunehmend solche Fragen per KI beantwortet werden, und das sofort??? Ich fände es schade, wenn demnächst womöglich wegen der leistungsstarken KI Foren sterben würden!

    Wenn die KI dir alles beantwortet, ist es egal.

    Weil, dann brauchst du dieses Forum nicht mehr.

    Gruß Elwood