我可以在JSFiddle中使用全屏API吗?


30

我有以下JSFiddle,http://jsfiddle.net/brantolsen/ejUWt/。它完成了每次使用Fullscreen API单击主体时从全屏更改为非全屏的简单任务。当所有内容都复制到本地网页中时,此方法正确运行,并且根据此处找到文档是正确的。但是,在JSFiddle上什么也没有发生。

是否可以使JSFiddle上的示例代码全屏显示?

请注意,我并不是说要以全屏方式查看结果,而是要使javascript全屏命令正常工作。


全屏无法在JSFiddle中使用。
罗曼C

这是前一段时间修复的。今天尝试jsfiddle,单击正文中的文本,它将全屏显示。
gman

@gman我建议将其编辑为Brant的答案(我建议写另一个答案,但我认为他们的答案包括一些可能有用的附加信息)
jonsca

Answers:


35

您可以像这样全屏查看结果-

http://jsfiddle.net/brantolsen/ejUWt/embedded/result/

只需点击顶部的共享按钮-

在此处输入图片说明

更新: 不再显示“共享”按钮。您仍然可以通过手动embedded/result/在Fiddle的URL末尾添加全屏显示


抱歉,我不清楚全屏的含义。我的意思是我无法让Javascript全屏api在jsfiddle中工作,而不是如何以全屏方式查看结果。无论如何谢谢。
布兰特·奥尔森

1
明白了 JsFiddle使用iframe显示输出。实际上,所有这四个盒子都是iframe。因此,没有常规的方法可以实现此目的。
Bibhas 2012年

2
请注意,直到您单击“保存”按钮一次保存JSFiddle之后,此“共享”按钮才出现。
罗里·奥肯

8
我认为“共享”按钮不再显示。您仍然可以通过手动embedded/result/在Fiddle的URL末尾添加全屏显示。
凯·卡弗

这个问题与没有iframe的情况下运行jsfiddle无关。这是关于JavaScript / HTML全屏API在jsfiddle中不起作用的情况
gman


3

在使用Chrome浏览器和检查元素后找到了原因。结果代码放置在iframe中,该iframe禁止全屏命令。

我能够加入临时解决此mozallowfullscreen,并webkitallowfullscreen在发现https://developer.mozilla.org/en/HTML/Element/iframe通过使用萤火虫和Chrome的调试工具,在iframe中。

但是,看起来JSFiddle不允许您此时自定义iframe包装代码的代码。


2

我认为您的线程的其他受访者都看过iframe(跨域)问题,而忽略了该问题。

另一个很棒的JSFiddle用户Jennifer Perrin在她的帖子“用jQuery获取当前页面URL和标题”中回答了您一半以上的问题。

剩下要做的就是在返回的URL上应用一些逻辑,并将其设置为http://jsfiddle.net/[userid]/[postid]/embedded/result/锚点中的功能链接,以更改其href来切换全屏。


这个问题与没有iframe的情况下运行jsfiddle无关。这是关于JavaScript / HTML全屏API在jsfiddle中不起作用的情况
gman
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.