UserReport 和 Turbolinks - 如何使 JS turbolinks 兼容？答案

【问题标题】：UserReport and Turbolinks - How to make JS turbolinks compatible?UserReport 和 Turbolinks - 如何使 JS turbolinks 兼容？
【发布时间】：2015-01-15 22:13:07
【问题描述】：

我正在运行 rails，并且在我的 body 标签末尾有这段代码。

:javascript
  var _urq = _urq || [];
  _urq.push(['initSite', 'mySiteId']);
  (function() {
  var ur = document.createElement('script'); ur.type = 'text/javascript'; ur.async = true;
  ur.src = ('https:' == document.location.protocol ? 'https://cdn.userreport.com/userreport.js' : 'http://cdn.userreport.com/userreport.js');
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ur, s);
  })();

无论我做什么，单击任何和所有启用 turbolink 的链接都会破坏此代码。按钮消失。

我尝试将代码封装在一个名为 userReport 的函数中，然后执行以下操作：

$(document).ready(userReport);
$(document).on('page:load', userReport);

这不起作用。

非常欢迎提出建议:)

【问题讨论】：

应该可以，你确定你的userReport 函数有效吗？
remove //require turbolinks in app.js 并安装 jquery turblinks

标签： javascript ruby-on-rails turbolinks

【解决方案1】：

您的脚本位于正文部分的末尾，每次重新加载body 时，只需将script 元素插入html 的head 部分。我想知道，为什么你需要这样做？因为，每次单击链接时，您都会在文档的 head 部分中获得重复的 script 元素（感谢 turbolink 的魔力）。这可能是您的问题的原因。

如果你真的需要用 javascript 来做这件事，试着在 app/assets/javascript/application.js 的末尾添加你的代码（不推荐，我知道，只是为了测试这个想法）。希望对您有所帮助。

更新根据UserReport's docs，javascript sn-p 应该属于head 部分。以同样的方式进行操作，如他们的示例所示，您可以将脚本放在“userreport”部分中，并在应用程序的布局模板中使用该部分：

<head>
  …
  <%= render 'layots/userreport' %>
</head>

【讨论】：

好点！正如您所说，仅重新插入将不起作用并插入重复的脚本。他应该找到一种方法从 userreport.com 重新触发脚本。我会说：向 userreport 寻求支持，或者禁用 turbolinks ;)
尽管我还没有找到同时让 UserReport 和 Turbolinks 工作的方法，但我要为你的努力提供奖励 =/ 可惜我不得不转向在 Turbolinks 上只是为了启用 UserReport。

【解决方案2】：

很遗憾，userreport.js 脚本无法“重新加载”小部件，因此这是不可能的。

我从 CDN 中提取了代码，对其进行了修改并在我的资产中使用它，以便我可以在想要显示小部件时调用 reset_user_report();，（请参阅此 repo：https://github.com/nicolasmlv/userreport-turbolinks）

使用风险自负，因为它将不再使用 userreport cdn（功能更新/错误修复）

【讨论】：