使用 turbolinks 时如何清除窗口变量答案

【问题标题】：How to clear window variables when using turbolinks使用 turbolinks 时如何清除窗口变量
【发布时间】：2016-12-29 09:03:38
【问题描述】：

在 Rails 上使用 ruby，我的代码由以下咖啡脚本触发；

$ = jQuery
$(document).on "turbolinks:load", ->
  if window.progress?
    // execute code on a div with an id of ```target```

在要触发代码的页面上，我有一个 id 为 target 的 div 和一个加载 progress 参数的脚本标签例如

<%= javascript_tag id: "window_vars" do %>
  window.progress = <%= raw graph.data.to_json %>
<% end -%>

如果没有 turbolinks，那么这可以正常工作，代码会在预期的页面上触发，而不会在其他页面上触发。但是，如果我启用 turbolinks 5.0.1 并访问代码不触发的页面，然后访问代码触发的页面，然后返回代码不触发的页面，代码触发在最后一页有一个例外。 turbolinks 似乎没有在页面加载之间清除 window.progress 变量。

如何确保通过脚本加载的窗口变量在页面之间被清除？

【问题讨论】：

标签： jquery ruby-on-rails turbolinks-5

【解决方案1】：

我今天在做类似的事情时遇到了同样的问题。我推测的是全局变量在 turbolinks 访问之间持续存在。这实际上是有道理的，因为页面没有重新加载；内容只是被覆盖。我的解决方案是在 turbolinks 呈现新页面之前销毁数据。

document.addEventListener('turbolinks:before-render', () => {
  delete window.progress;
})

请注意，delete 方法不适用于使用 var 声明的 javascript 变量，但适用于分配给 window 的属性，如我的情况。如果使用var，你会想做var progress = null；

您有 a lot of options 在请求的生命周期中执行此操作的位置。我选择了 before-render 以确保只有在请求成功时才会“销毁”数据。

【讨论】：

【解决方案2】：

一种解决方法是不要依赖 window.progress 来检测图形是否存在，而是使用 id 例如

if $('#target').length > 0

【讨论】：