IFRAME 的阴影框

我们运营一个社区网站,面向使用 Bootstrap 课程在主流数学、科学和社会研究课堂中教授计算机科学的教师。我们的 IDE 基于云端,因此我们能够将其实例嵌入到 Discourse 的帖子中——这简直太棒了,仅凭这一项功能,我们就已对迁移到该平台感到欣喜。:slight_smile:

不过,我们还有很多内容希望以这种方式嵌入,其中一些内容的宽度超出了帖子允许的范围。通过自定义 CSS 来允许更宽的帖子并未取得成效。最终,我希望 IFRAME 能像图片一样处理:显示缩略图,点击后则打开一个与浏览器窗口等宽的阴影框(shadowbox)。

我从未涉足过 Discourse 插件开发,但我也设想可以开发某种 Onebox 扩展,识别符合特定模式的 URL 并生成相应的标记。也许有更简单的方法?好奇是否有人遇到过类似的使用场景。

Maybe @Johani would have some ideas. In general heavy embedding of live content is a bad idea, whereas “click-to-load” like codepen does is more ideal:

https://codepen.io/adrianroworth/pen/OpeyZq

Thank you both for the quick reply!

@craigomez, I might be misreading your post, but it sounds like you’re suggesting I modify the source of the page I’m embedding, in order to have links in that page open in a shadowbox. Is that right? If so, let me clarify that I don’t want that – rather, I want the enclosing IFRAME (a node in the rendered topic, which just happens to contain another page) to be in a shadowbox. And if that’s not right, and I misunderstood, my apologies. :slight_smile:

@codinghorror, click-to-load is a mighty fine solution. Happy to pursue that option, if there’s a resource somewhere to follow?

It would be super cool if you could maximize without needing to visit the site, I wonder if this is a feature @chriscoyier would be interested in adding, not sure how it would be wrangled, but it makes sense for this example you made, for sure.

I’d love to make our editor click-to-load. Is there an example somewhere for how this was done with CodePen? I’m assuming whitelisting WeScheme.org in our installation is the least of the steps needed.

check out this previous post/topic for additional context:

Seems like that is done on the codepen side?

Make the preview “Click-to-Load” : Check the checkbox next to “use click-to-load” to enable the preview version for your embedded Pen. Preview embeds show a static image preview of your Pen with a “Run Pen” button. When your visitors click the button, the Pen will load.

via: https://blog.codepen.io/documentation/features/embedded-pens/

This is now possible with a theme component:

Very interesting! I was able to install the theme using the linked directions (thanks!), but I don’t see a UI for editing the theme settings in order to whitelist my site. Any suggestions for where I should be looking? Thanks in advance!

If you’ve installed the theme and cannot see the settings area, then that probably means you’re on a version of Discourse that does not support theme settings.

Even if you’re on the stable branch, the latest release, 2.0, supports theme settings so I would suggest you update Discourse and try again.

Success! Thanks so much, @Johani! And thanks to everyone else who chimed in with suggestions and advice!