Question

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

更新

除offline.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

这是一个古老的问题，但我遇到了同样的问题，也许它可以帮助某人。 offline.js在HTML正文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扭曲并在每次页面更改时调用它，但最终会导致内存泄漏（因为每次更改时都会在“ window”中添加“ offline”和“ online”事件监听器）

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

目前，这是我发现的最佳解决方案。

Answer 2

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

中

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

使offline.js与turbolinks一起工作

2 个答案: