如何加载外部文件并确保它首先在 JSFiddle 中运行？答案

【问题标题】：How do I load an external file and make sure that it runs first in JSFiddle?如何加载外部文件并确保它首先在 JSFiddle 中运行？
【发布时间】：2012-02-06 03:16:57
【问题描述】：

我有一个 JsFiddle here，并添加了要通过外部 JS/资源部分加载的 Microsoft AJAX。在 AJAX 文件加载完成后如何判断我的 JS 代码是否运行？

似乎 AJAX 也没有加载。 :(

这是JSFiddle中的代码：

Type.registerNamespace("Tutorial.Chapter1");
Tutorial.Chapter1.Person = function(firstName, lastName) {
    this._firstName = firstName;
    this._lastName = lastName;
};
Tutorial.Chapter1.Person.prototype = {
        set_firstName: function(value) {
            this._firstName = value;
        },
        get_firstName: function() {
            return this._firstName;
        },
        set_lastName: function(value) {
            this._lastName = value;
        },
        get_lastName: function() {
            return this._lastName;
        },
        _firstName: "",
        _lastName: "",
        displayName: function() {
            alert("Hi! " + this._firstName + " " + this._lastName);
        }
    };
Tutorial.Chapter1.Person.registerClass("Tutorial.Chapter1.Person", null);

【问题讨论】：

你不能直接粘贴 MS 代码而不是使用“添加资源”选项吗？
为什么还需要这样做？

标签： javascript asp.net-ajax jsfiddle

【解决方案1】：

打开“添加资源”部分并添加外部脚本的 url...

【讨论】：

也适用于外部 css 链接

【解决方案2】：

jsFiddle 的外部资源选项卡目前使用起来有些棘手且不稳定。此处定义的资源通常未正确包含在代码中。 JS和CSS资源的自动识别似乎有问题。如果发生这种情况，外部资源根本不会添加到结果代码的头部。您可以通过查看 jsFiddle 的 Result 框架的源代码来检查这一点。您会发现生成的 HTML 代码中根本没有提及您的 MS AJAX 资源。

实际上可以通过向资源的 URL 添加一个虚拟值来强制正确识别，如下所示（请参阅 –>jsFiddle docs 了解更多信息）：

...&dummy=.js

这是一个示例，展示了如何将外部 Google Maps API 资源添加到 jsFiddle（请注意最后的 dummy 参数！）：

https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js

很遗憾，这对您不起作用，因为附加其他参数时 MS AJAX URL 将失败。

一种解决方案（也是目前加载外部资源最安全的方法）是完全避免使用外部资源选项卡，并在 jsFiddle 的 HTML 窗口的第一行手动加载外部代码，如下所示：

<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>

这是您的 jsFiddle 修改为使用该方法：http://jsfiddle.net/rEzW5/12/

它实际上并没有做很多事情（我没有检查你的其余代码有什么问题），但至少它不会再抛出 JavaScript 错误了。

【讨论】：

我相信在 url 的末尾加上 #.js 就足够了，至少在当前版本的 JSFiddle 中是这样。也许不喜欢额外查询参数的资产会玩得更好。
不幸的是，如今这种方法似乎不再有效。如果您手动尝试加载 JavaScript 代码，它将不起作用，而是显示消息“对于 JavaScript，请使用下面的面板或外部文件的资源面板。”

【解决方案3】：

@Jpsy 的方法似乎不再有效（请参阅我在他的回答下的评论）。

对我来说，在外部资源下添加资源也不起作用。（根据 Firefox 调试器，它找不到资源）。

我能够让外部 JavaScript 代码（在我的情况下为 jquery.backstretch.js）工作的唯一方法是使用 Google 找到一个使用该资源（并且工作）的 Fiddle，然后 Fork 这个将我所有的代码复制/粘贴到 HTML、CSS 和 JavaScript 面板中。啊！

【讨论】：

【解决方案4】：

@clayRay，你绝对通过了代码手术。刚刚通过在纯 html 中提及外部源解决了这个问题，在我的情况下是

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

使用外部资源选项卡没有帮助...

【讨论】：