IFrame Lightboxes

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.

:warning: Whatever domains you specify here also need to be whitelisted in the 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:

Credit:

This component uses Noël Bossart’s fantastic Featherlight library (MIT license - 3kb gzip)

31 个赞

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

5 个赞

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!
-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 个赞

Why is it desktop-only?

I had a bug this theme component, post contents weren’t showing.

Could I trigger open iframe in a any link simply?
User just see iframe only when click at link

1 个赞

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… :upside_down_face:

I just pushed an update that should fix all the problems.

It will be after you update.

The component is now self-contained with no external requests.

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 :+1:

7 个赞

非常感谢!

不用道歉,很高兴看到您在忙于其他事情的同时,还能抽出时间来关注它。我们非常感激。

1 个赞

是否有可以以这种方式在链接中打开 iframe light box 的组件?

我不知道有任何现有的组件能做到这一点,所以你必须在 Marketplace 类别中创建一个或委托这项工作。

这个主题组件 检查 iFrame 帖子,并将其 src 属性与组件设置中管理员提供的 符合条件的来源列表 进行比较。如果来源域匹配,它会添加 灯箱按钮。灯箱的显示由 featherlight.js 处理。Featherlight 监听带有 data-featherlight 属性的元素的点击事件。如果其中一个被点击,它将打开灯箱,其中包含该 iFrame 的内容。

你可以用另一个组件中的 \u003ca\u003e 标签做同样的事情,只需稍微调整一下。如果链接的 href 与组件设置中列出的域匹配,则在灯箱中以 iframe 的形式显示。否则,将其保留为常规链接。你不希望所有链接都在灯箱 iframe 中打开。

所需的大部分工作已经由该组件处理,因此你可以直接分叉它并从那里开始。此组件没有添加该功能的计划,因为它只用于处理帖子中的 iFrame 标签。

3 个赞

这里有一种将 iFrame Lightbox 包含在可点击的内联文本元素中的方法……

Discourse Footnotes Plugin 接受 HTML 和 Markdown 作为弹出脚注的内容。

所以,例如这段代码……

……会生成这个可点击的弹出脚注,其中包含一个带有右上角 Expand content 按钮的迷你 iFrame……

为了实现这个功能,我在(站点设置中)启用了 enable markdown footnotesdisplay footnotes inline……

然后,我将该站点的域名(microchic.com)添加到了站点设置中的 allowed iframes 列表中……

……以及 iFrame Lightbox 插件设置中的 iframe origin domains 列表中……

……你可以在这里现场试用……

我想知道您如何格式化帖子。我使用 <iframe> src="url"></iframe> 得到一个空白框,即使在使用主站点允许 iframe 的 codepen.io 时也是如此。

这个组件还在工作吗?以前对我来说是有效的,但不知何故现在停止工作了。
看起来上次更新是在 3 年前:hnb-ku/discourse-iframe-lightboxes (github.com) 所以可以合理地假设有什么东西坏了?

1 个赞

它在五月份还能用,我在这里用过。

1 个赞

在最新的 Discourse 版本上,我的这边可以正常运行。

浏览器控制台有任何错误吗?

2 个赞

无法使其正常工作,我已严格按照指南操作,并将域名同时添加到了主题组件和站点设置中。这是我得到的结果:

JavaScript 开发人员控制台中未记录任何错误。

allowed iframes 站点设置中包含顶级域名:

https://example.biz/

主题组件设置中不包含 https,这与现有示例一致:

example.biz

有什么调试思路吗?

1 个赞

控制台中没有错误。
我正在将其与 PDF 预览一起使用:Inline PDF Previews - #116 by Alon1
我期望在 PDF 上方获得展开箭头

但它们根本没有显示出来

您能否尝试这个 fork

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

如果之前能用,您就走运了!

两个TC都使用相同的API来装饰帖子,因此安装顺序很重要。此外,iframe源是在PDF下载后动态设置的,可能无法立即在此IFrame Lighboxes TC中获得。

我所做的更改主要是:

  • 在下一个运行循环中搜索iframe元素,因此可以保证iframe可用
  • 等待iframe加载,以便您可以检索源URL

请告诉我是否效果更好。 :+1:

4 个赞