Javascript 如何加载外部文件并确保它首先在 JSFiddle 中运行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8790943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I load an external file and make sure that it runs first in JSFiddle?
提问by Deeptechtons
I have a JsFiddle here, and added Microsoft AJAX to be loaded through external JS/resource section. How can I tell whether or not my JS code is run after the AJAX file has finished loading?
我在这里有一个 JsFiddle ，并添加了 Microsoft AJAX 以通过外部 JS/资源部分加载。在 AJAX 文件加载完成后，如何判断我的 JS 代码是否运行？
Seems that the AJAX does not load either. :(
似乎 AJAX 也没有加载。:(
Here is the code in the JSFiddle:
这是 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);
采纳答案by Nhaga
Open "Add Resources" section and add the url of your external script...
打开“添加资源”部分并添加外部脚本的网址...
回答by Jpsy
The External Resources tab of jsFiddle is currently somewhat tricky and unstable to use. The resources defined here are often not correctly included into the code. There seems to be an issue with the automatic recognition of JS and CSS resources. If this happens, the external resource is simply not added to the head section of the resulting code. You can check that by reviewing the source code of the Result frame of your jsFiddle. You will find that your MS AJAX resource is simply NOT mentioned in the resulting HTML code.
jsFiddle 的外部资源选项卡目前使用起来有些棘手且不稳定。此处定义的资源通常未正确包含在代码中。JS和CSS资源的自动识别似乎有问题。如果发生这种情况，外部资源不会直接添加到结果代码的 head 部分。您可以通过查看 jsFiddle 的结果框架的源代码来检查。您会发现在生成的 HTML 代码中根本没有提到您的 MS AJAX 资源。
The correct recognition can actually be forced by adding a dummy value to the resource's URL like this (see –>jsFiddle docsfor more info):
实际上可以通过向资源的 URL 添加一个虚拟值来强制正确识别，如下所示（有关更多信息，请参阅 –> jsFiddle 文档）：
...&dummy=.js
Here is an example that shows how to add the external Google Maps API resource to a jsFiddle (mind the dummyparameter at the very end!):
这是一个示例，展示了如何将外部 Google Maps API 资源添加到 jsFiddle（注意最后的虚拟参数！）：
https://maps.googleapis.com/maps/api/js?sensor=false&dummy=.js
Unfortunately this won't work for you as the MS AJAX URL will fail when additional parameters are appended.
不幸的是，这对您不起作用，因为附加其他参数时 MS AJAX URL 将失败。
A solution (and currently the safest way to load external resources) is to avoid the External Resources tab altogether and load external code manually in the first line(s) of jsFiddle's HTML window like this:
一个解决方案（也是目前加载外部资源最安全的方法）是完全避免使用外部资源选项卡，并在 jsFiddle 的 HTML 窗口的第一行手动加载外部代码，如下所示：
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/3.5/MicrosoftAjax.js"></script>
Here is your jsFiddle modified to use that method: http://jsfiddle.net/rEzW5/12/
这是您的 jsFiddle 修改后使用该方法：http: //jsfiddle.net/rEzW5/12/
It actually does not do a lot (I did not check what is wrong with the rest of your code), but at least it does not throw JavaScript errors anymore.
它实际上并没有做很多事情（我没有检查您的其余代码有什么问题），但至少它不再抛出 JavaScript 错误。
回答by clayRay
@Jpsy's approach no longer seems to work (see my comment under his answer).
@Jpsy 的方法似乎不再有效（请参阅我在他的回答下的评论）。
For me, adding the resource under External Resources also didn't work. (According to the Firefox Debugger, it couldn't find the resource).
对我来说，在外部资源下添加资源也不起作用。（根据 Firefox Debugger，它找不到资源）。
The only way I was able to get an external bit of JavaScript code (in my case jquery.backstretch.js) to work, was to use Google to find a Fiddle which used this resource (and worked), then Fork this Fiddle and copy/paste all my code into the HTML, CSS and JavaScript panels. Ugh!
我能够让外部的 JavaScript 代码（在我的例子中是 jquery.backstretch.js）工作的唯一方法是使用 Google 找到一个使用这个资源（并且工作）的 Fiddle，然后 Fork 这个 Fiddle 并复制/ 将我所有的代码粘贴到 HTML、CSS 和 JavaScript 面板中。啊!
回答by Sanje
@clayRay, You absolutely went thru a code surgery. Just resolved that by mentioning external source in plain html which in my case is
@clayRay，你绝对经历了一次代码手术。刚刚通过在纯 html 中提到外部源来解决这个问题，在我的情况下是
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Using External Resources tab didn't help a bit...
使用外部资源选项卡没有帮助...
