Johani
2018 年 6 月 14 日午前 6:56
1
This is a theme component that adds the ability to open iFrames in lightboxes.
Samples
This component adds an “expand” button on top of the iframes you enable it on.
Clicking the button will open the iframe in fullscreen in a lightbox.
Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes.
Settings
There’s only one setting. You add the domains that you want to have this functionality on there.
allowed_iframes site setting to show up in posts in the first place.
Usage examples:
Here’s a couple of examples besides the CodePen iframe above
Google forms iframe:
Embedding the entire weather.gov website:
This component uses Noël Bossart’s fantastic Featherlight library (MIT license - 3kb gzip)
「いいね！」 31
tophee
2018 年 6 月 14 日午前 8:20
2
I suppose these iframes still also need to be activated in the allowed iframes site setting?
「いいね！」 5
Johani
2018 年 6 月 14 日午前 11:51
3
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
@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!
amotl
2019 年 4 月 10 日午前 2:58
5
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,
「いいね！」 3
Malek1
2021 年 10 月 13 日午前 2:47
7
I had a bug this theme component, post contents weren’t showing.
cmdntd
2021 年 10 月 30 日午後 6:50
8
Could I trigger open iframe in a any link simply?
「いいね！」 1
Johani
2021 年 10 月 31 日午前 3:52
9
Welp… this one fell through the cracks. It’s been a while since it got any attention, and a lot has changed in Discourse.
Better late than never…
I just pushed an update that should fix all the problems.
committed 03:27AM - 31 Oct 21 UTC
It will be after you update.
The component is now self-contained with no external requests.
Zup:
Why is it desktop-only?
After you update, it will work on mobile too.
Should be fixed after you update
This is out of the scope of this component. You need a different component to handle that.
Apologies for the delay, and thanks for the feedback
「いいね！」 7
amotl
2021 年 11 月 29 日午後 4:47
10
Thanks a stack!
お詫びの必要はありません。他の多くのことの合間に、このコンポーネントに愛情を注ぐことができたのを見るのは素晴らしいことです。本当に感謝しています。
「いいね！」 1
Zup
2021 年 12 月 24 日午前 12:19
11
リンクでiframeライトボックスをそのように開くことができるコンポーネントはすでにありますか？
Johani
2021 年 12 月 24 日午前 9:47
12
そのような既存のコンポーネントは認識していませんので、Marketplace
このテーマコンポーネントは、投稿内の [iFrame] タグをチェックし、その src 属性を、コンポーネント設定で管理者が提供する対象ソースのリスト と比較します。ソースドメインが一致する場合、ライトボックスボタン が追加されます。ライトボックスの表示は、featherlight.js によって処理されます。Featherlight は、data-featherlight
別のコンポーネントで <a> タグを使用して、少し工夫すれば同様のことを行うことができます。リンクの href がコンポーネント設定にリストされているドメインと一致する場合、ライトボックスで表示します。それ以外の場合は、通常のリンクとして扱います。すべてのリンクをライトボックス化された iFrame で開きたくはないでしょう。
必要な作業のほとんどは、このコンポーネントによって既に処理されているため、ハードフォークしてそこから開始できます。このコンポーネントは投稿内の iFrame タグのみを処理することを目的としているため、その機能を追加する計画はありません。
「いいね！」 3
インラインテキスト要素をクリック可能にするiFrame Lightboxの組み込み方法を1つ紹介します…
Discourse Footnotes Plugin は、ポップアップフットノート内でHTMLとMarkdownの両方を受け入れます。
例えば、このコード…
…は、右上にExpand content ボタンが付いたミニiFrameを含む、クリック可能なポップアップフットノートを生成します…
これを機能させるために、（サイト設定で）enable markdown footnotes とdisplay footnotes inline の両方を有効にしました…
次に、サイト設定のallowed iframes リストにそのサイトのドメイン名（microchic.com
…そして、iFrame Lightbox Pluginの設定にあるiframe origin domains のリストにも追加しました…
ライブで試すことができます…
Site Development
Site Features
▶ Table of contents --> This post is a quick reference tool for authors on this site. All of the features, plugins, tools, code snippets and online services used in the Post Composer/Editor on this site are demonstrated and documented here. ...
Heliosurge
2023 年 3 月 21 日午後 10:00
14
投稿のフォーマット方法について質問があります。
<iframe> src="url" を < と > で囲んで使用すると、空白のボックスが表示されます。これは、CodePen.io を使用して、メインサイトのホワイトリストに登録されている iframe であっても同様です。
Alon1
2024 年 6 月 27 日午後 4:05
15
このコンポーネントはまだ動作していますか？以前は動作していましたが、何らかの理由で動作しなくなりました。hnb-ku/discourse-iframe-lightboxes (github.com) 何か壊れたと考えるのは妥当でしょうか？
「いいね！」 1
私の環境では最新の Discourse バージョンで動作します。
ブラウザのコンソールにエラーはありますか？
「いいね！」 2
meglio
2024 年 7 月 1 日午前 1:36
18
これを機能させることができません。ガイドを正確に実行し、テーマコンポーネントとサイト設定の両方にドメインを追加しましたが、次のようになります。
JS開発者コンソールにエラーは記録されていません。
allowed iframes サイト設定には、トップレベルドメインがあります。
https://example.biz/
テーマコンポーネントの設定には、既存の例に従ってHTTPSなしで設定されています。
example.biz
デバッグする方法についてのアイデアはありますか？
「いいね！」 1
Alon1
2024 年 7 月 3 日午後 4:46
19
コンソールにエラーはありません。Inline PDF Previews - #116 by Alon1
しかし、表示されません。
こちらを代わりに試していただけますか？ fork
URL: https://github.com/Arkshine/discourse-iframe-lightboxesimprove-compatibility
以前は動作していたとしても、運が良かっただけです！
どちらのTCも投稿を装飾するために同じAPIを使用しているため、インストールする順序が重要になります。また、iframeソースはPDFがダウンロードされた後に動的に設定されるため、このIFrame Lighboxes TCではすぐに利用できない場合があります。
私が加えた変更は基本的に次のとおりです。
次の実行ループでiframe要素を検索するため、iframeが確実に利用可能になります
iframeが読み込まれるのを待ってから、ソースURLを取得できるようにします
これでうまくいくか教えてください。
「いいね！」 4
Whatever domains you specify here also need to be whitelisted in the
