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

Question

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

看起来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);

- Deeptechtons

---

你可不可以直接将 MS 代码粘贴到你的代码之后，而不是使用添加资源选项呢？ - j08691

你为什么要这样做呢？ - j08691

Answer 1

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

实际上，可以通过向资源的URL添加一个虚拟值来强制正确识别，像这样（有关更多信息，请参见-> jsFiddle文档）：

...&dummy=.js

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

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

很遗憾，当添加额外参数时，MS AJAX URL将会失败，因此此方法对您不起作用。

解决方案（目前加载外部资源最安全的方式）是完全避开"External Resources"选项卡，并在jsFiddle HTML窗口的第一行（行）手动加载外部代码，如下所示：

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

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

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

- Jpsy

---

我相信在当前版本的JSFiddle中，在URL末尾加上“#.js”就足够了。也许那些不喜欢额外查询参数的资源会更好地处理它。 - diurnalist

不幸的是，现在这种方法似乎不再起作用。如果你手动尝试加载JavaScript代码，它将无法工作，而是显示消息“对于JavaScript，请使用下面的面板或外部文件的资源面板。” - clayRay

Answer 2

打开“添加资源”部分，添加您的外部脚本的URL地址...

- Nhaga

---

同样适用于外部CSS链接 - dsdsdsdsd

Answer 3

@Jpsy的方法似乎不再有效（请查看他回答下面的我的评论）。

对我而言，在“外部资源”下添加资源也没有起作用。（根据Firefox调试器，它找不到该资源）。

我唯一能够让一个外部的JavaScript代码（在我的情况下是jquery.backstretch.js）工作的方式，就是使用谷歌搜索一个使用这个资源并且可行的Fiddle，然后Fork这个Fiddle，并将所有的代码复制/粘贴到HTML、CSS和JavaScript面板中。噫！

- clayRay

Answer 4

@clayRay，你绝对经历了一次代码手术。只需在纯HTML中提及外部资源即可解决这个问题，就像我这种情况下的

一样。

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

使用外部资源选项卡一点用都没有...

- Sanje