外部资源仅适用于 JSFiddle - Bootbox / jQuery

Question

当 'Frameworks & Extensions' 设置为 jQuery 2.0.2 时提示有效但是当我添加...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

...替换 JSFiddle 的 jQuery 2.0.2，我将 'Frameworks & Extensions' 设置回 'No-Library (pure JS)' 提示不再起作用。

尝试了数十种变体后，提示仍然失败运行。是什么导致了这种行为差异？

Answer 1

因为当你这样做时，JS 文件的加载顺序是不同的。 bootstrap 和其他文件在 jQuery 文件之前加载。因此，当它查找文件时，它不存在并引发错误。看看控制台。

Answer 2

问题是你在加载 jQuery 之前加载了 bootstrap 外部库（如果你不希望它被 JSfiddle 接口加载并且在您的 HTML 页面上），并且 bootstrap 需要 jQuery 已经加载才能初始化。

ie：如果你bootstrap工作

，这不能在HTML部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js"></script>

我已经用正确的顺序更新了你的fiddle：

http://jsfiddle.net/gjkooofv/13/

关于外部库的通知，jquery 是第一个，然后是所有其他库。

Answer 3

发生这种情况是由于 JSFiddle "inserts" 输出页面中代码的方式。

您的 fiddle 使用 4 种方式输入代码：

HTML 框（左上角），
CSS 框（右上角），
JavaScript 框（左下角）和
"External Resources"（左侧菜单）。

输出部分（右下角）将打印您在上面的框上放置的内容，如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo by Birdlaw</title>

    <!-- Here goes the selected JS lib (jQuery 2.0.2 in your example) -->

    <!-- Selected Extensions are here (in your case, bootstrap, then bootbox) -->

    <style type="text/css">
    <!-- Content of the CSS (top right) box goes here -->
    </style>

    <script type="text/javascript">//<![CDATA[
    $(window).load(function(){

    //<!-- Content of the JavaScript (bottom left) box goes here -->
    //<!-- Actually, this can be configured (the second combo at left menu - "onLoad") -->

    });//]]> 
    </script>
</head>
<body>
    <!-- Content of the HTML box goes here -->
</body>
</html>

如您所见，将 jQuery 从所选框架中取出并放入 HTML 框中会产生不同的结果。

选择它作为框架将它放置在扩展（bootstrap 和 bootbox）文件之前。当它在 HTML 框中时，它被放置在 扩展文件 之后，从而产生错误（因为这些文件需要 jQuery）。

如何让它工作？如果你想把jQuery放在HTML框里"manually"，然后把所有的扩展文件也在那里，顺序正确。这将使它按预期工作。

这是上面的updated fiddle, containing the fix。

外部资源仅适用于 JSFiddle - Bootbox / jQuery

External Resources only working in JSFiddle - Bootbox / jQuery

javascript

jquery

jsfiddle

twitter-bootstrap

bootbox