Question

我正在尝试在我的Web应用程序中使用bootstrap tour。前5分钟一切正常，我看到了弹出的步骤，第一次也是唯一的一次。然后弹出窗口就消失了。我尝试了很多方法甚至重新启动了电脑，事实证明，每次我清除浏览器缓存，它都可以工作一次。然后我需要再次清除缓存。

代码如下所示：

    helpButton.click(function() {
    if (window.steps === undefined)
        return;
    alert("element: " + window.steps[0].element + ", title: " + window.steps[0].title + ", content: " + window.steps[0].content + ", val: " + $(window.steps[0].element).val());
    var tour = new Tour({
        steps: window.steps
    });
    tour.init();
    tour.start();
    alert("finished.");
});

步骤如下：

<script type="text/javascript">
var steps = [
    { element: "#choose-team", title: "快速编辑", content: "可以在这里直接编辑标题，自动保存", position: "n" },
    { element: ".hidden-editor:first", title: "快速编辑2", content: "可以在这里直接编辑标题，自动保存2", position: "n" }
];

所有alert（）都没问题，步骤中的数据都没问题（这就是为什么它至少可以运行一次）。
所有官方的例子都在他们的网站上很好。
IE和Chrome在我的电脑上都存在同样的问题。
Tour js和css完好无损（从Bootstraptour.com下载）。

有什么想法吗？感谢。

Answer 1

该问题与库配置有关，因为它默认将数据存储到DOM存储接口。

DOCS

选项：storage

默认值：window.localStorage

说明

您要使用的存储系统。可以是对象window.localStorage，window.sessionStorage或您自己的对象。您可以将此选项设置为false以禁用存储持久性（每次加载页面时，游览从头开始）。

<强> FIX

var tour = new Tour({
    steps: window.steps,
    storage: false
});

Answer 2

如果存储是必须的，我只是找到另一种解决问题的方法。使用restart（）而不是start（）也可以解决问题。并且有一个开始（true）而不是restart（），但它会直接跳到最后一步。

听起来这个游览是默认的，旨在作为一次性游览。例如，当您网站上的某些内容更新时，导览应自动运行一次以显示更新，并且永远不会再打扰用户。

要使其成为可重复的游览，请通过＆＃34; storage：false＆＃34;禁用存储。在选项中，或使用restart（）而不是start（）。

Answer 3

如果你想连续跑步。像这样创建实例

    var tour = new Tour({
    storage: false,
    steps: [],
});

然后点击一下按钮调用这些功能。

$(document).ready(function(){
        $('#tour').click(function(){
            tour.init();
            tour.restart();
        });
    });

Answer 4

如果（像我一样）你想在你的帮助或个人资料应用程序中添加一个按钮来重新启用游览，你可以删除存储

function reset_tour() {      
      window.localStorage.removeItem('tour_current_step');
      window.localStorage.removeItem('tour_end');
}

当用户重新加载页面一次时，这将重新启动游览。

Bootstrap tour需要清除缓存再次工作

4 个答案: