使 offline.js 与 turbolinks 一起工作答案

【问题标题】：Making offline.js work with turbolinks使 offline.js 与 turbolinks 一起工作
【发布时间】：2017-03-06 04:04:03
【问题描述】：

我正在使用 offline.js 和 turbolinks，并且在初始页面加载时它工作正常。但是，如果我单击另一个链接，那么在我刷新页面之前这将不起作用。我可以看到Offline.state 已关闭，但视图仍未显示。有什么办法可以manually触发popup窗口？

更新

除了offline.js文件，我唯一的js就是这个

var
    $online = $('.online'),
    $offline = $('.offline');

Offline.on('confirmed-down', function () {
    $online.fadeOut(function () {
        $offline.fadeIn();
    });
});

Offline.on('confirmed-up', function () {
    $offline.fadeOut(function () {
        $online.fadeIn();
    });
});

【问题讨论】：

你在用document.ready()吗？
不使用 document.ready()..我也找不到手动触发的选项..更新的问题有我使用的代码（在主脚本文件后加载）
嗯，我猜你遇到了 turbolinks 问题。我会发布一个答案..一秒

标签： ruby-on-rails turbolinks turbolinks-5 offline.js

【解决方案1】：

这是一个老问题，但我遇到了同样的问题，也许它可以帮助某人。 offline.js 在正文 HTML 内的页面加载时创建这些 dom 元素

<div class="offline-ui offline-ui-up">
   <div class="offline-ui-content"></div>
   <a href="" class="offline-ui-retry"></a>
</div>

offline.js 在页面更改后无法正常工作的原因是页面更改了正文 HTML 替换为服务器返回的新内容并删除了上面的代码。这就是 Turbolinks 的工作原理，因此不会触发页面加载，也不会创建 offline.js dom 元素。一种解决方案是在函数内扭曲offline.js并在每次页面更改时调用它，但最终会导致内存泄漏（因为“离线”和“在线”事件监听器将在每次更改时添加到“窗口”）

其他解决方案是在新页面加载之前保存“offline-ui”HTML，并在加载后将其恢复：

# will fire before page change and save offline.js UI
document.addEventListener("turbolinks:before-render", function() {
    if (!document.offlineHtml) { 
        document.offlineHtml = $('.offline-ui'); 
    }
});

# will fire afterload and will check if there is a UI to append to the body
document.addEventListener("turbolinks:load", function() {
    if (document.offlineHtml) {
        $(document.body).append(document.offlineHtml);
    }
});

目前这是我能找到的最好的解决方法。

【讨论】：

【解决方案2】：

这可能是 turbolinks 问题。在app/assets/javascripts/application.js 中，将您的 javascript 代码包装在：

$(document).on('turbolinks:load', function() {
  // your code
});

【讨论】：