如何避免在加载外部 JS 文件之前丢失对它的调用

发布于 2024-10-11 11:29:11 字数 517 浏览 3 评论 0原文

我的问题是，多个网站将包含我的 JS 文件，并且在调用类似这样的内容时：

<script src="..."></script>

hello.say("yay");

将会出现竞争问题，因此有时可能会出现这种情况，有时则不会。我知道我可以通过将每个函数放入 window.onload 中来轻松解决这个问题，但这并不干净，因为我已经看到其他网站神奇地解决了这个问题，例如谷歌分析：

.. Calling google analytics JS..

<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");     <-- this an object !
pageTracker._trackPageview();
} catch(err) {}
</script>

如何做到这一点？

原文

My issue is that multiple websites are going to include my JS file and when calling something like this:

<script src="..."></script>

hello.say("yay");

there going to be a race issue so sometimes it could make it sometimes not. i know that i can solve that easily by putting every function in a window.onload but that wouldn't be clean as i've seen other websites magically solve that like google analytics:

.. Calling google analytics JS..

<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");     <-- this an object !
pageTracker._trackPageview();
} catch(err) {}
</script>

How to do that?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

相对绾红妆 2024-10-18 11:29:11

Google Analytics 使用的技巧是只能用鸭子类型语言完成的完美示例。如果 GA 脚本尚未加载，则主对象是一个数组，但如果加载了，它的行为就会改变。让我们看看我能否解释一下。

我从 stackoverflow 的源代码中提取了这篇文章：

var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-5620270-1']);
_gaq.push(['_trackPageview']);

它看起来像一个数组，其中有一些值被推送到其中。事实上，如果 _gaq 是 falsy 当此代码运行时（就像尚未运行其他分析 JavaScript 一样），它作为一个数组。然后，当主分析脚本（包含在页面上任何位置的脚本标签中）加载时，它会检查该数组并根据该数组的内容执行某些任务。

因此，如果这种情况以相反的顺序发生（首先加载主脚本，然后加载上面的代码片段），则主脚本将 _gaq 设置为具有推送方法的对象，该对象可以执行 google 希望它执行的任何操作。稍后，当上面的代码运行时，_gaq.push 不只是将值添加到数组中；而是将值添加到数组中。它实际上执行任意代码（并且根本不推送到数组）。

因此，无论哪个脚本先运行，当两个脚本都完成时，最终结果将是相同的。

Google Analytics uses a trick that's a perfect example of something that can only be done in duck typed languages. The main object is an array if the GA-script hasn't loaded, but if it has it changes behaviour. Let's see if I can explain it.

I pulled this piece from the source here at stackoverflow:

var _gaq = _gaq || [];
_gaq.push(['_setAccount','UA-5620270-1']);
_gaq.push(['_trackPageview']);

It looks like an array with some values being pushed to it. In fact, if _gaq is falsy when this code is run (as it is if no other analytics-JavaScript has run yet), it as an array. Then, when the main analytics script (included with a script-tag anywhere on the page) loads it examines this array and performs some task based on the contents of the array.

So, if this happens in opposite order (the main script is loaded first, and then the snippet above) the main script set _gaq to an object with a push-method that does whatever google wants it to do. Later, when the code above runs, _gaq.push doesn't just add values to an array; it actually executes arbitrary code (and doesn't push to an array at all).

Hence, regardless of which script runs first, the end result will be the same when both have finished.

回复收藏 0 原文

滿滿的愛 2024-10-18 11:29:11

如果您将文件包含在 html 页面的标头部分中，则该文件将在页面中运行任何其他 javascript 之前加载。

UPD：另外，我认为甚至 thml 文本中包含的文件也会在处理其余 javascript 之前下载。您确定这首先是您的问题吗？

回复收藏 0 原文

盗心人 2024-10-18 11:29:11

您需要延迟执行任何依赖于外部 javascript 的 javascript 代码，直到页面完全加载之后，您可以通过将执行附加到 window.onload 事件来做到这一点。

window.onload = function() {
  hello.say('yay');
}

但这的缺点是仅适用于一个函数，并且会覆盖最初附加到该事件的任何函数。您可能需要阅读 Simon Wilson 的帖子和评论，以获取有关如何处理这种情况的解决方案。

http://simonwillison.net/2004/May/26/addLoadEvent/

You will need to delay the execution of any javascript code that depends on the external javascript until after the page has been fully loaded and you can do that by attaching the execution to the window.onload event.

window.onload = function() {
  hello.say('yay');
}

But this has the disadvantage of only working for one function and will override any functions that have been initially attached to that event. You would want to read Simon Wilson's post and the comments for solutions on how to handle this situation.

http://simonwillison.net/2004/May/26/addLoadEvent/

回复收藏 0 原文