IFrame Lightboxes

Dies ist eine Theme-Komponente, die die Möglichkeit hinzufügt, iFrames in Lightboxen zu öffnen.

Beispiele

Diese Komponente fügt einen „Erweitern"-Button oben auf den iFrames hinzu, für die sie aktiviert ist.

Durch Klicken auf den Button wird der iFrame im Vollbildmodus in einer Lightbox geöffnet.

Durch Klicken entweder auf den dunklen Bereich um den iFrame oder auf das x in der oberen rechten Ecke wird die Lightbox geschlossen. Dies funktioniert genauso wie bei Standard-Bild-Lightboxen.

Einstellungen

Es gibt nur eine Einstellung. Sie fügen die Domains hinzu, für die Sie diese Funktion aktivieren möchten.

:warning: Alle Domains, die Sie hier angeben, müssen auch in der Site-Einstellung allowed_iframes freigegeben sein, damit sie überhaupt in Beiträgen angezeigt werden können.

Anwendungsbeispiele:

Hier sind einige Beispiele neben dem oben genannten CodePen-iFrame

Google Forms-iFrame:

Einbetten der gesamten weather.gov-Website:

Credits:

Diese Komponente verwendet die hervorragende Featherlight-Bibliothek von Noël Bossart (MIT-Lizenz – 3 kb gzip)

31 „Gefällt mir“

I suppose these iframes still also need to be activated in the allowed iframes site setting?

5 „Gefällt mir“

Correct, this component will not mess with any whitelisting settings at all.

In order for any iframe to show up in the cooked content of a post - expandable or not - it has to be on the list of allowed_iframes setting like you pointed out.

I’ll add a note about this to the topic.

5 „Gefällt mir“

@Johani is this component still functional? If so, any thoughts on why I am not getting the pop-out diagonal-arrows in the upper-right, but rather a blank/dead box?

Here is what I’ve tried:

  • Updated themes/components.
  • Made sure src links were white-listed in the component and the Discourse settings.
  • Tried a few different links, including Google Maps.
  • Tried several scenarios with the Media Overlay on/off + Lightbox alone on/off.

Below are some screenshots.

Thx!
-Patrick





image
image
image
image

Dear @Johani,

thank you very much for conceiving and maintaining this theme component.

After installing it on https://community.hiveeyes.org/ the other day, some users recently started to complain that the overall appearance of the head of the page looked different for them. They finally found out the reason was that they blocked cloudflare altogether, so all requests to https://cdnjs.cloudflare.com/ajax/libs/featherlight/1.7.13/featherlight.min.js would fail.

So, we are humbly asking if there would be a way for you to provide this component in a self-contained variant?

With kind regards,
Andreas.

3 „Gefällt mir“

Warum ist es nur für den Desktop verfügbar?

Ich hatte einen Fehler in diesem Theme-Komponenten; die Beitragsinhalte wurden nicht angezeigt.

Könnte ich ein Iframe einfach über einen beliebigen Link auslösen?
Der Nutzer sieht das Iframe nur, wenn er auf den Link klickt.

1 „Gefällt mir“

Na ja… das ist hier leider untergegangen. Es ist schon eine Weile her, seit es letzte Aufmerksamkeit bekam, und bei Discourse hat sich viel geändert.

Besser spät als nie… :upside_down_face:

Ich habe gerade ein Update hochgeladen, das alle Probleme beheben sollte.

Das wird sie, sobald du aktualisiert hast.

Die Komponente ist nun vollständig in sich geschlossen und benötigt keine externen Anfragen mehr.

Nach dem Update wird sie auch auf Mobilgeräten funktionieren.

Das sollte nach dem Update behoben sein.

Das liegt außerhalb des Anwendungsbereichs dieser Komponente. Dafür benötigst du eine andere Komponente.

Entschuldigt bitte die Verzögerung und danke für das Feedback :+1:

7 „Gefällt mir“

Vielen Dank!

Kein Grund zur Entschuldigung, schön zu sehen, dass Sie sich trotz allem, was sonst noch los ist, darum kümmern konnten. Wir wissen das wirklich zu schätzen.

1 „Gefällt mir“

Gibt es bereits eine Komponente, die auf diese Weise einen Iframe-Lightbox-Link öffnen kann?

Mir sind keine bestehenden Komponenten bekannt, die das tun. Sie müssten also eine erstellen oder diese Arbeit in der Kategorie Marketplace in Auftrag geben.

Diese Theme-Komponente prüft iFrame in einem Beitrag und vergleicht deren src-Attribut mit einer Liste berechtigter Quellen, die vom Administrator in den Komponenteneinstellungen bereitgestellt wird. Wenn die Quell-Domain übereinstimmt, fügt sie den Lightbox-Button hinzu. Das Anzeigen der Lightbox wird von featherlight.js übernommen. Featherlight lauscht auf Klicks auf Elemente mit dem data-featherlight-Attribut. Wenn eines davon angeklickt wird, öffnet es die Lightbox mit dem Inhalt dieses iFrames.

Sie können dasselbe mit <a>-Tags in einer anderen Komponente mit etwas Aufwand tun. Wenn die href des Links mit einer in den Komponenteneinstellungen aufgeführten Domain übereinstimmt, öffnen Sie sie in einer Lightbox als iFrame. Andernfalls belassen Sie sie als regulären Link. Sie möchten nicht, dass alle Links in einer Lightbox-iFrame geöffnet werden.

Die meiste erforderliche Arbeit wird bereits von dieser Komponente erledigt, sodass Sie sie einfach forken und von dort aus starten können. Es gibt keine Pläne, diese Funktion zu dieser Komponente hinzuzufügen, da sie nur für die Verarbeitung von iFrame-Tags in Beiträgen gedacht ist.

3 „Gefällt mir“

Hier ist eine Methode, um einen iFrame Lightbox in ein klickbares Inline-Textelement einzufügen …

Das Discourse Footnotes Plugin akzeptiert sowohl HTML als auch Markdown in Popup-Fußnoten.

Zum Beispiel dieser Code …

… generiert diese klickbare Popup-Fußnote, die einen Mini-iFrame mit der Schaltfläche Expand content in der oberen rechten Ecke enthält …

Damit dies funktioniert, habe ich (in den Site-Einstellungen) sowohl enable markdown footnotes als auch display footnotes inline aktiviert …

Dann habe ich den Domainnamen dieser Site (microchic.com) zur Liste der allowed iframes in den Site-Einstellungen hinzugefügt …

… und auch in die Liste der iframe origin domains in den iFrame Lightbox Plugin-Einstellungen …

Sie können es hier live ausprobieren …

Hallo, ich habe mich gefragt, wie Sie Beiträge formatieren. Ich bekomme eine leere Box, wenn ich

iframe src=" url" in Klammern verwende. Das passiert sogar, wenn ich codepen.io verwende, das auf der Whitelist für iframes auf der Hauptseite steht.

Funktioniert diese Komponente noch? Sie hat bei mir früher funktioniert, aber aus irgendeinem Grund nicht mehr.
Es scheint, dass das letzte Update vor 3 Jahren war: hnb-ku/discourse-iframe-lightboxes (github.com) Es ist also vernünftig anzunehmen, dass etwas kaputt gegangen ist?

1 „Gefällt mir“

Es funktionierte im Mai, als ich es hier benutzt habe.

1 „Gefällt mir“

Auf meiner Seite funktioniert es mit der neuesten Discourse-Version.

Gibt es Fehler in der Browserkonsole?

2 „Gefällt mir“

Ich kann das nicht zum Laufen bringen. Ich habe die Anleitung genau befolgt und die Domain sowohl zur Theme-Komponente als auch zur Website-Einstellung hinzugefügt. Hier ist, was ich bekomme:

Keine Fehler in der JavaScript-Entwicklerkonsole.

Die Einstellung für erlaubte Iframes hat die Top-Level-Domain:

https://example.biz/

Die Einstellungen der Theme-Komponente haben sie ohne https, wie in den vorhandenen Beispielen:

example.biz

Irgendwelche Ideen zur Fehlersuche?

1 „Gefällt mir“

Keine Fehler in der Konsole.
Ich benutze es mit PDF-Vorschauen: Inline PDF Previews - #116 by Alon1
Ich erwarte, die Aufklapppfeile über dem PDF zu erhalten

Aber sie werden einfach nicht angezeigt

Können Sie stattdessen diesen Fork ausprobieren?

URL: https://github.com/Arkshine/discourse-iframe-lightboxes
Branch: improve-compatibility

Sie hatten Glück, wenn es vorher funktionierte!

Beide TCs verwenden dieselbe API, um einen Beitrag zu dekorieren, daher wäre die Reihenfolge, in der Sie sie installieren, wichtig. Außerdem wird die IFrame-Quelle dynamisch festgelegt, sobald das PDF heruntergeladen wurde, und ist möglicherweise in diesem IFrame Lighboxes TC nicht sofort verfügbar.

Die von mir vorgenommenen Änderungen sind im Grunde:

  • Suchen Sie im nächsten Ausführungszyklus nach IFrame-Elementen, damit der IFrame garantiert verfügbar ist
  • Warten Sie, bis der IFrame geladen ist, damit Sie die Quell-URL abrufen können

Lassen Sie mich wissen, ob es besser funktioniert. :+1:

4 „Gefällt mir“