如何在 <head> 中存储 data-* 属性答案

【问题标题】：How to store data-* attributes in <head>如何在 <head> 中存储 data-* 属性
【发布时间】：2018-03-03 21:32:04
【问题描述】：

我有一些 javascript 加载到我的脑海中。而且我想引用一些数据属性。

  <meta id="pendo_data" data-user-id="<%= current_user&.id %>"
       data-user-email="<%= current_user&.email %>"
       data-account-id="<%= current_account&.id %>"
       data-account-name="<%= current_account&.name %>"
  />

然后在javascript中我可以做到：

$(#'pendo_data').data('user-id')

<meta> 似乎是错误的标签。 <div>s 不允许出现在 <head> 中。

这里的最佳做法是什么？

谢谢！

【问题讨论】：

你不见了#$('#pendo_data')，不是吗？
如果你不知道把它放在什么地方，那是因为它没有在那里被使用。应在需要该信息的元素上设置数据属性。我会采用这种方法。还要检查 jQuery data() 函数，因为有时您最好将 jQuery attr() 用于相同目的

标签： javascript jquery html ruby-on-rails

【解决方案1】：

如果您需要它们，可以将它们放在 <html> 元素上。这样一来，它们就会立即出现在您的脚本中，而您无需在其预期用途之外使用元素。

<html> 元素通过document.documentElement 访问。

<!doctype html>
<html data-user-id="<%= current_user&.id %>"
      data-user-email="<%= current_user&.email %>"
      data-account-id="<%= current_account&.id %>"
      data-account-name="<%= current_account&.name %>" >
  <head>
    <script>
    for (const p in document.documentElement.dataset) {
      console.log(`${p} = ${document.documentElement.dataset[p]}`)
    }
    </script>
  </head>
  <body></body>
</html>

【讨论】：

这似乎是一个很好的解决方案。您对将其放在头部或封闭脚本标签上有何想法？
@Jonathan：起初我想到了头部，但我认为有一些旧版浏览器直到关闭后才提供该元素。同样为了遗产，您需要按标签名称选择，因为 document.head 并不总是得到支持。至于script 元素，我认为这会起作用，但这又是一个按标签名称选择并获取最后一个匹配项的问题，应该是当前正在执行的匹配项。我自己更喜欢<html>。
注意：现在我把它放在<script> 标签上。有用。我喜欢让它更接近实现。更容易将它放在部分 / 组件中。
@Jonathan：听起来不错，尤其是在您需要为不同脚本提供不同数据的情况下。还要注意胡安上面写的内容。使用 .data() 通常不是最好的，因为它只是复制 jQuery 缓存中的数据，通常是无缘无故的。