使 offline.js 与 turbolinks 一起工作

Question

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

更新

除了 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();
    });
});

Answer 1

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

中

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

Answer 2

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

<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" 和 "online" 事件侦听器将添加到 'window' 每次更改)

其他解决方案是在加载新页面之前保存 '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);
    }
});

目前这是我能找到的解决该问题的最佳方法。

使 offline.js 与 turbolinks 一起工作

Making offline.js work with turbolinks

ruby-on-rails

turbolinks

turbolinks-5

offline.js