1

我在初始页面加载时使用了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();
    });
});
4

2 回答 2

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);
    }
});

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

于 2019-12-12T01:31:09.327 回答
0

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

$(document).on('turbolinks:load', function() {
  // your code
});
于 2017-03-06T04:18:52.203 回答