如何加载外部文件并确保它首先在 JSFiddle 中运行？
我有一个 JsFiddle 此处，并添加了要通过外部 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);
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?
Seems that the AJAX does not load either. :(
Here is the code in the 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);
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
jsFiddle 的外部资源选项卡目前使用起来有些棘手且不稳定。
此处定义的资源通常未正确包含在代码中。 JS和CSS资源的自动识别似乎有问题。如果发生这种情况，外部资源就不会添加到结果代码的头部。您可以通过查看 jsFiddle 的结果框架的源代码来检查这一点。您会发现生成的 HTML 代码中根本没有提及您的 MS AJAX 资源。
实际上可以通过向资源的 URL 添加虚拟值来强制正确识别，如下所示（请参阅 –>jsFiddle 文档 了解更多信息）：
以下示例展示了如何将外部 Google Maps API 资源添加到 jsFiddle（注意 dummy 参数）非常结束！）：
不幸的是，这对您不起作用，因为附加附加参数时 MS AJAX URL 将失败。
一个解决方案（也是目前加载外部资源最安全的方法）是完全避免使用“外部资源”选项卡，并在 jsFiddle 的 HTML 窗口的第一行中手动加载外部代码，如下所示：
这是修改为使用该方法的 jsFiddle： http://jsfiddle.net/rEzW5/12/
它实际上并没有做很多事情（我没有检查其余代码有什么问题），但至少它不会再抛出 JavaScript 错误。
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.
The correct recognition can actually be forced by adding a dummy value to the resource's URL like this (see –>jsFiddle docs for more info):
Here is an example that shows how to add the external Google Maps API resource to a jsFiddle (mind the dummy parameter at the very end!):
Unfortunately this won't work for you as the MS AJAX URL will fail when additional parameters are appended.
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:
Here is your jsFiddle modified to use that method: 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.
打开“添加资源”部分并添加外部脚本的 url...
Open "Add Resources" section and add the url of your external script...
@Jpsy 的方法似乎不再有效（请参阅他的答案下的我的评论）。
对我来说，在外部资源下添加资源也不起作用。 （根据 Firefox 调试器，它找不到该资源）。
我能够获得外部 JavaScript 代码（在我的例子中为 jquery.backstretch.js）工作的唯一方法是使用 Google 找到一个使用此资源（并且有效）的 Fiddle，然后 Fork 这个 Fiddle 并复制/将我的所有代码粘贴到 HTML、CSS 和 JavaScript 面板中。啊!
@Jpsy's approach no longer seems to work (see my comment under his answer).
For me, adding the resource under External Resources also didn't work. (According to the Firefox Debugger, it couldn't find the resource).
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!
@clayRay，你绝对经历了代码手术。刚刚通过在纯 html 中提及外部源来解决这个问题，在我的例子中是
“使用外部资源”选项卡没有一点帮助......
@clayRay, You absolutely went thru a code surgery. Just resolved that by mentioning external source in plain html which in my case is
Using External Resources tab didn't help a bit...