问题 Javascript包含以后不在页面中加载


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

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

然后在单个页面上,我们在页面底部有一个脚本标记 analytics

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

这通常很好,但偶尔我们会看到错误 analytics is not defined,最近在Chrome 43上。由于所有内容都应该同步加载,这似乎应该是开箱即用,但我将脚本更改为:

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

而现在我们偶尔会看到 $ is not defined 代替。我们没有看到来自同一IP的任何其他错误,否则我会怀疑出现了问题 application.js。任何其他想法为什么它可能会破裂?您可以看到示例页面 这里

满满的 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 然后在以下内容中引用它:

javascript_include_tag 'mathjs'
javascript_include_tag 'application'

我们经常看到一个 math is not defined 错误。我想知道在加载过程中是否发生错误 mathjs 或者其他脚本阻止它被加载,但事实上它发生在很多不同的库上,并且很少发生,这使它看起来不太可能。我们确实进行了一些调试检查以确定是否我们的 application.js 是完全加载的,它通常似乎不是,即使在页面后面访问像Jquery这样的东西。

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


12285
now


起源

我从未遇到过这样的问题,但我能想到的最简单的解决方案是添加一个do {} while;在$(文件).ready之前。根据那个小提琴: jsfiddle.net/295v5p8j (现在只测试它)在jQuery被定义之前,这将什么也不做,也许以这种方式可以防止它,尽管它应该同步加载所有内容? - briosheje
您是否拥有加载脚本的非缩小源 analytics? - light
@briosheje问题是如果此时没有加载jquery / analytics,它可能永远不会加载。然后我们的用户将无法在页面上执行任何操作。 - lobati
@light执行所有需求的脚本是一个rails application.js。我会在问题中添加完整的内容。 - lobati
当'$ is undefined'时,加载脚本标记时不会加载jQuery。这似乎很清楚。那么,您是否看过应用程序所服务的JavaScript的状态?是否包含jQuery?这是在生产中编译资产还是在开发中使用未编译资产? - hightempo


答案:


如果您不等待脚本加载该定义,则会发生这种情况 analytics 或者如果您没有定义加载javascript文件的顺序。确保定义的脚本 analytics 在尝试调用其方法之前始终加载 track。根据您的设置,脚本可能会以随机顺序加载,从而导致这种不可预测的行为。

你试图确保一切都已加载,但是听众 $(document).ready(function () {}); 只是确保DOM准备就绪,而不是分析可用。在这里你有同样的问题。 $ 只是jQuery所以 $ is not defined 意味着尚未加载jQuery。所以可能你的脚本在加载jQuery之前出现并试图调用尚未定义的内容。


7
2018-06-23 19:22



但我们正在加载 analytics/jQuery 在html头中同步依赖,所以在点击这个脚本标记之前不应该完全加载它们吗? - lobati
这取决于你如何加载它。但是没有理由没有任何事情发生,而且有时候没有定义$表示$尚未加载。我只能推测原因可能是什么,这取决于您的设置和代码。 - Ole Spaarmann
你能告诉我有关我的具体设置吗?是否有我没有给你的细节会有所帮助? - lobati
这个问题就此而言 可能会帮助你。您必须查看RoR文档,尤其是require_tree。这可能会解决您的问题。如果在发生错误之前没有加载页面,然后检查包含js文件的订单的HTML源代码,如果所有文件都加载没有任何错误,还要检查Chrome开发工具中的网络选项卡。 - Ole Spaarmann
我们没有 require_tree . 在我们的 application.js,即使我们这样做了,它仍然应该在文档正文中的脚本标记之前加载。 - lobati


你的问题的基础可能在于你的假设:

热门问题

不使用eval / new函数的JavaScript模板库 当涉及内部类时,Java继承如何工作 .NET Windows服务的奇怪问题 在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3(javascript)更新文件内容 Bootstrap 3.0 - 将元素推到底部 受密码保护的.NET ClickOnce部署? 如何用postgresql安装wordpress coq Set或Type如何成为命题 硒滚动元素进入(中心)视图 在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略 如何在FOS_PICKFOLDER中使用IFileDialog,同时仍在对话框中显示文件名 在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能 从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池? DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia()使用了哪些相机通信标准? 选择命名空间名称时应该知道什么? cout Swagger Codegen CLI Java客户端 - 如何正确使用它 一个很好的哈希函数用于采访整数,字符串? Maven 3 ciManagement配置的目的是什么? 如何通过语言文化获取代码页?