为什么我的jQuery UI CSS在JSFiddle中无法正常工作？

Question

为了使用JavaScript输入回答问题，我经常在JSFiddle上使用演示文稿。这非常有用，但是当我回答这个工具提示问题时，我需要使用jQuery UI的用法。

这种用法的问题在于，您可以在框架选择中检查jQuery UI，但它仅加载js文件而不是css文件。

因此，我决定链接到jQuery UI官方演示中使用的http://jqueryui.com/themes/base/jquery.ui.all.css。=>问题解决了。

真的解决了吗？ 不？

因为如果用户之前没有打开过jQuery演示，则此链接只适用于已经打开了jQuery演示的用户，但是我在这里看到的情况是，如果我只打开演示而从未打开过任何演示，则此链接无效。

为什么？ 我该如何解决这个问题？ 我应该如何在jsFiddles中链接jQuery的CSS？ 此外，Google CDN仅包含JavaScript文件。

我不想为发布jsfiddle演示而托管自己的CSS文件…

PS：我提到此行为的JSFiddle是http://jsfiddle.net/neysor/r9yfw/。

- Neysor

---

我已经在隐私模式下打开了，一切似乎都正常？你是如何重现这种行为的？ - Rob Cooper

我打开jsFiddle演示，但它不起作用。我打开例如此jQuery UI演示，在jsFiddle中点击运行，它就可以工作了。我清除缓存后可以再次执行相同的操作。 - Neysor

色情模式 = 隐私模式 - Neysor

PS：在OSX和Windows上的FF、IE和Chrome的各种版本中尝试过。 - Rob Cooper

太棒了！搞定了！请查看下面的答案 - 感谢您提出这个好问题！让我卡了大约20分钟！:D - Rob Cooper

Answer 1

Neysor，我真诚地道歉 - 我当时很蠢。

我确实遇到了相同的问题，没有获取到CSS，并且我认为我已经找到了问题所在。

看起来jqueryui.com可能会对请求进行引用检查，并向域外人员返回403（这是有道理的）。这就是为什么在另一个窗口中查看UI元素时它能够工作，因为此时CSS会被缓存。

请让它工作！

如果您打开“管理资源”选项卡并删除'jquery.ui.all'，然后将其替换为http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css，那么所有东西都应该正常工作（或者至少更好一些）。对于所有CSS资源都要这样做。

我已经forked了您的jsFiddle，并看到了一些改进。

可以先查看一下jsFiddle文档，一旦您拥有完整的解决方案，就可以看看是否可以将其记录下来（或更好的是修复！）

希望这有所帮助！

- Rob Cooper

---

快速滚动，大大的粗体字写着“请阅读！”，然后我就像0.0..一样。---> 我笑了，然后点了个赞 :D - DJG22

Answer 2

jsfiddle文档在其“添加资源”部分包括以下内容：

警告：jsFiddle通过扩展名识别资源的类型。如果您想使用动态资源，请添加一个虚拟的GET变量，例如http://example.com/download/js/dynamically.js?somevar=somevalue&dummy=.js。这将欺骗jsFiddle将其识别为JavaScript资源。

虽然无法完全预测您的问题或解决方法，但值得一试（使用dummy=.css）。

- Beetroot-Beetroot

---

谢谢，但我不认为这与那个有关，因为jsFiddle将其添加为CSS：<link rel="stylesheet" type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css"> - Neysor

但它可能会因为另一个原因而起作用——即强制资源通过您公司不情愿的网络。 - Beetroot-Beetroot