Rails 4 turbolinks 导致 html 画布在 ipad 上消失答案

【问题标题】：Rails 4 turbolinks cause html canvas to disappear on ipadRails 4 turbolinks 导致 html 画布在 ipad 上消失
【发布时间】：2013-10-19 18:05:34
【问题描述】：

我正在使用 Ruby on Rails 4。 -- app/views/layouts/application.html.erb 包含：

<!DOCTYPE html>
<html>
  <head>
    <%= javascript_include_tag "application" %>
  </head>
  <body>
    <canvas id="can"></canvas>
    <%= link_to "link to here", "#" %> 
    <button onclick="task()" >make square</button>
  </body>
  <script>
    function task(){
      var c = document.getElementById("can");
      var ctx = c.getContext("2d");
      ctx.fillStyle="#FF0000";
      ctx.fillRect(0,0,c.width,c.height);
    }
  </script>
</html>

--app/assets/javascripts/application.js 包含：

//= require turbolinks

这个程序在我的 Chrome 和 Firefox 工作站上运行良好。但是，在 Safari 中的 ipad 上，当我单击链接时，我无法再通过单击按钮使画布重新出现。当我重新加载页面时，该按钮起作用。如果我删除 application.html.erb 的第 4 行，那么 Safari 的行为就像 Chrome，并且该按钮始终有效。但是，如果没有第 4 行，链接将不再导致框消失。

这是我的第一个 Rails 项目。我在这里完全不知所措，我们将不胜感激任何帮助、见解、线索或建议。先感谢您。 --laertiades

【问题讨论】：

标签： javascript ruby-on-rails ipad canvas turbolinks

【解决方案1】：

我认为 turbolinks 有一些错误。

我试图在我的网站上实现 skrollr，

并且 turbolinks 导致了某种阻止 skrollr 的错误

在重新加载/返回命令时正常工作。

你可能遇到和我一样的问题。

添加一些 console.log 语句，看看你的页面是否会立即被加载两次。

第二次加载时会显示日志，但不显示行号。

我还没有弄清楚这一点，所以我只是从我的应用程序中删除了 turbolinks。

Turbolinks “使您的应用程序中的以下链接更快”，

所以这不是您必须在应用程序中保留的必要功能。

您可以简单地删除该行

//=require turbolinks

【讨论】：

感谢您的回复。我的控制台为两种设备显示相同的消息：codeStarted GET "/people" for 127.0.0.1 at 2013-10-19 11:16:53 -0700 由 CompanyInfoController#people 处理为 HTML 呈现的 company_info/people.html。布局/应用程序中的 erb (0.1ms) 在 3ms 内完成 200 次 OK (Views: 2.8ms | ActiveRecord: 0.0ms)code
turbolinks 不是必需的。如果您找不到解决方案，我建议您删除该行。
感谢您的建议。现在，我想尝试解决这个问题，而不是仅仅避免它。感谢您的贡献。
毕竟同意了你的建议。再次感谢

【解决方案2】：

经过数小时的摆弄，我终于弄清楚了如何让 skrollr 与 turbolinks 或任何其他 pushstate 方法一起工作。

像往常一样嵌入和调用 skrollr 函数：

$(window).ready(function() {
var s = skrollr.init(); 
});

然后在新页面上使用skrollr.init().refresh(); 或为您的 pushstate 插件加载页面功能。所以使用 turbolinks 使用这个：

$(document).on('page:load', function () {
skrollr.init().refresh(); 
});

希望这会为某人节省大量时间，应该在 skrollr 文档中引用它，尤其是因为它有一个宝石。

【讨论】：