Foundation 5 升级：“层必须是文档节点”答案

【问题标题】：Foundation 5 Upgrade: "Layer must be a document node"Foundation 5 升级：“层必须是文档节点”
【发布时间】：2013-11-22 08:57:54
【问题描述】：

我正在尝试将我的 Ruby on Rails 应用程序从 Foundation 4 升级到新发布的 Foundation 5，并且 CSS 切换相对顺利。但是，我在切换 Javascript 文件时遇到了问题。

当我切换出 Foundation 4 版本的foundation.min.js 和modernizr.js 文件然后重新加载页面时，我在控制台中收到了这个奇怪的JS 错误：

Uncaught TypeError: Layer must be a document node foundation.js?body=1:35
  FastClick foundation.js?body=1:35
  FastClick.attach foundation.js?body=1:35
  (anonymous function) foundation.js?body=1:40
  (anonymous function)

我什至不知道 FastClick 是做什么的，但它似乎包含在 Foundation 5 中，它会阻止 Foundation 加载。反过来，这也导致我所有依赖于 Foundation 的 JS 也失败了。

任何帮助将不胜感激，谢谢！

【问题讨论】：

请注意，如果您将 JS 移动到文档 <body /> 中，您将无法获得 Rails Turbolinks 的好处。请参阅下面的答案以获得更好的解决方案。
好的，注意了——谢谢！一旦修复被合并到下一个 Foundation5 版本中，我会将它移回文档头。
已更新。 :)
Foundation v5.0.3 已发布，因此您现在可以毫无问题地使用 ̉Rails gem。

标签： ruby-on-rails ruby-on-rails-4 asset-pipeline zurb-foundation

【解决方案1】：

更新：v5.0.3 已经发布，解决了这个问题。请务必相应地更新您的 foundation-rails gem。

这是一个已在 a commit 中解决的错误，即 merged into v5.0.3。此修复只是将嵌入式库 FastClick 包装在 jQuery 的 #ready() 中。在 v5.0.3 发布之前，您可以通过手动包含该版本来解决此问题。

将脚本移至页面底部，即表示您放弃了Rails Turbolinks。 Turbolinks 要求 JavaScript 包含在 <head /> 中，因为它会在每个请求中擦除 <body />。

发生了什么

Foundation 不再等待 DOM 加载，而是立即执行。为了提高移动性能，Foundation 5 嵌入了 FastClick，这是一种 polyfill，可以消除带有触摸 UI 的浏览器上的点击延迟。执行后，Foundation 立即尝试将FastClick 附加到document.body。如果 Foundation 在 <head /> 中初始化，则主体尚未存在：document.body 将合理地返回 null 导致 FastClick to crap its pants。

【讨论】：

那么你建议我怎么做才能仍然能够使用 turbolinks？
将 foundation.js 替换为 the updated version，直到 foundation-rails gem 升级到 v5.0.3。您也可以选择在vendor/assets 中维护自己的更新版本
感谢您提供详细而全面的回答！

【解决方案2】：

确保两者都在 <body> 标记的末尾，而不是在 <head> 中。

这会抛出错误：

<html>
<head>
</head>
    <script src="/static/js/modernizr.js"></script>
    <script src="/static/js/foundation.min.js"></script>
<body>
</body>
</html>

但这会起作用：

<html>
<head>
</head>
<body>
    <script src="/static/js/modernizr.js"></script>
    <script src="/static/js/foundation.min.js"></script>
</body>
</html>

【讨论】：

@pistacchio。谢谢你。这有帮助！

【解决方案3】：

对于后代，如果尝试包含使用 Wordpress wp_enqueue_script 挂钩，请将 $in_footer 属性设置为 true。

wp_enqueue_script('foundation_js', get_bloginfo('template_url').'/js/foundation.min.js', '1.0.0', array(), true);

【讨论】：