Javascript包含以后不在页面中加载 [英] Javascript includes not loading for later in the page

问题描述

我们有一个Rails应用程序，我们将应用程序依赖项包含在 application.js 中的html头中：

We have a Rails application where we are including our application dependencies in the html head within application.js:

//= require jquery
//= require analytics
// other stuff...

然后在单个页面上，我们在页面底部有一个脚本标签 analytics ：

Then on individual pages we have a script tag at the bottom of the page for analytics:

<script>
  analytics.track('on that awesome page');
</script>

这通常可以正常工作，但偶尔我们会看到错误分析不是已定义，最近一次是在Chrome 43上。由于所有内容都应该同步加载，这似乎应该是开箱即用的，但我将脚本更改为：

This normally works fine, but very occasionally we see the error analytics is not defined, most recently on Chrome 43. Because everything should be loaded synchronously, this seems like it ought to work out of the box, but I changed the script to:

<script>
  $(document).ready(function () {
    analytics.track('on that awesome page');
  });
</script>

而现在每隔一段时间我们就会看到 $未定义而不是。我们没有看到来自同一IP的任何其他错误，否则我会怀疑 application.js 中出现了问题。任何其他想法为什么它可能会破裂？您可以在此处查看示例页面。

And now instead every once in a while we see $ is not defined instead. We don't see any other errors from the same IP, otherwise I would suspect something went wrong in application.js. Any other ideas why it might break? You can see an example page here.

完整的 application.js ：

// Polyfills
//= require es5-shim/es5-shim
//= require es5-shim/es5-sham
//= require polyfills
//
// Third party plugins
//= require isMobile/isMobile
//= require jquery
//
//= require jquery.ui.autocomplete
//= require jquery.ui.dialog
//= require jquery.ui.draggable
//= require jquery.ui.droppable
//= require jquery.ui.effect-fade
//= require jquery.ui.effect-slide
//= require jquery.ui.resizable
//= require jquery.ui.tooltip
//
//= require jquery_ujs
//= require underscore
//= require backbone
//= require backbone-sortable-collection
//= require bootstrap
//= require load-image
//= require react
//= require react_ujs
//= require classnames
//= require routie
//= require mathjs
//= require moment
//= require stink-bomb
//= require analytics
//
// Our code
//= require_self
//= require extensions
//= require extend
//= require models
//= require collections
//= require constants
//= require templates
//= require mixins
//= require helpers
//= require singletons
//= require actions
//
//= require object
//= require components
//= require form_filler
//= require campaigns
//= require form_requests
//= require group_wizard
//= require step_adder

Chalk = {};
underscore = _;

_.templateSettings = {
  evaluate:    /\{\{(.+?)\}\}/g,
  interpolate: /\{\{=(.+?)\}\}/g,
  escape:      /\{\{-(.+?)\}\}/g
};

moment.locale('en', {
  calendar: {
    lastDay: '[Yesterday at] LT',
    sameDay: '[Today at] LT',
    nextDay: '[Tomorrow at] LT',
    lastWeek: 'dddd [at] LT',
    nextWeek: '[Next] dddd [at] LT',
    sameElse: 'L LT'
  }
});

更新：

我们偶尔会看到这种情况。我们也看到过这种情况，我们在 application.js 之前加载一个脚本，然后在其中引用它：

We're still seeing this on production occasionally. We've also seen it in a case where we load a script before application.js and then reference it within:

javascript_include_tag 'mathjs'
javascript_include_tag 'application'

我们经常看到数学未定义错误。我想知道在加载 mathjs 或其他脚本阻止它被加载时是否发生了错误，但事实是它发生在很多不同的库上，所以很少发生，使它看起来不太可能。我们确实进行了一些调试检查以查看我们的 application.js 是否已完全加载，而且通常似乎不是，即使稍后在页面中访问类似Jquery的内容。

Every so often we see a math is not defined error. I'm wondering if an error happens during the loading of mathjs or other scripts preventing it from being loaded, but the fact that it happens on so many different libraries, and so infrequently, makes it seem less likely. We did put in some debug checks to see whether our application.js is fully loaded and it often doesn't seem to be, even if accessing something like Jquery later in the page.

这样做的一个动机是避免关于脚本运行时间过长的旧浏览器通知，但我们可能会放弃并将其全部拉入应用程序.js 以避免错误。

One motivation in this was to avoid old browser notifications about scripts running too long, but we may just give up and pull it all into application.js to avoid the errors.

推荐答案

我们仍然会看到这个错误几次一天，并没有得到任何结论性的答案导致它。我最好的猜测是，较早的脚本超时下载，或者用户在链接之间快速导航，阻止页面完全加载。他们也可能只是使用后退按钮在页面上的脚本中导致奇怪的行为。

We're still seeing this error a few times a day and haven't reached any conclusive answer to what is causing it. My best guess is that either the earlier scripts time out downloading, or a user is quickly navigating between links, preventing the page from loading completely. They might also just be using the back button causing weird behavior in scripts on the page.

这篇关于Javascript包含以后不在页面中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！