使offline.js与turbolinks一起工作

Question

我使用的是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();
    });
});

Answer 1

这是个老问题，但我遇到了同样的问题，也许它能帮助到某人。offline.js在body 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并在每次更改页面时调用它，但它最终会导致内存泄漏(因为“脱机”和“联机”事件侦听器将添加到每次更改的“窗口”中)。

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