问题及说明
首先，您必须确保您storage: window.localStorage使用的是Storage API。这是默认的游览选项，因此您所要做的就是不要像您所做的那样将其覆盖为 false。这样做是允许 Bootstrap Tour 将当前步骤信息保存在同一域内的多个页面中。
想要证明？- 打开您的开发工具并查看：
其次，如果您path为任何步骤指定选项，则应为所有步骤指定它。当单页导览开始时，它不需要担心导航到不同的页面，但是一旦你移动到一个新的页面，如果你没有为前面的步骤指定路径，引导导览是没有办法的知道导航回哪里。
此外，您需要通过在 url 前加上一个斜杠来使用绝对路径引用，以便它相对于根目录。如果您使用相对路径，则路径将在您浏览页面/步骤时更改。 有关更多信息，请参阅我在无限页面刷新问题底部的部分
第三，只要你定义了tour对象并init初始化它，游览就会自动在一个新的页面上拾取。
让我们看一下做什么init()的简化版本：
Tour.prototype.init = function(force) {
// other code omitted for brevity
if (this._current !== null) {
this.showStep(this._current);
}
};
所以一旦你初始化了巡视，只要它注意到巡视已经开始并且还没有结束（即它有一个当前步骤），它就会自动启动那个步骤。因此，您无需通过onNext在第二步中点击事件来进行初始化。
多页游概念证明
可编辑的 Plunk |
可运行演示
脚本.js
$(function() {
// define tour
var tour = new Tour({
steps: [{
path: "/index.html",
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
}, {
path: "/newPage.html",
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step"
}]
});
// init tour
tour.init();
// start tour
$('#start-tour').click(function() {
tour.restart();
});
});
索引.html：
<!DOCTYPE html>
<html>
<head>
<title>Multipage Bootstrap Tour - Page 1</title>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="bootstrap-tour.min.css">
</head>
<body>
<div class="container">
<h1>First Page</h1>
<button class="btn btn-lg btn-primary" id="start-tour">
Start Tour
</button><br/><br/>
<span id="my-element">
My First Element
</span>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tour.min.js"></script>
<script src="script.js"></script>
</body>
</html>
新页面.html
<!DOCTYPE html>
<html>
<head>
<title>Multipage Bootstrap Tour - Page 2</title>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="bootstrap-tour.min.css">
</head>
<body>
<div class="container">
<h1>New Page</h1>
<span id="my-other-element">
My Second Elemennt
</span>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tour.min.js"></script>
<script src="script.js"></script>
</body>
</html>
您在哪里引入了以下库：
无限页面刷新问题
在很多配置中，您会进入一个循环，页面无限刷新，不断尝试解析到当前步骤的路径。以下是为什么会出现此问题以及如何解决此问题。
Bootstrap Tour 如何进行下一步？
当您按下Next按钮时，游览将调用下一步showStep(i)
这是一个简化版本showStep：
Tour.prototype.showStep = function (i) {
// other code omitted for brevity
// get step path
path = tour._options.basePath + step.path;
// get current path - join location and hash
current_path = [document.location.pathname, document.location.hash].join('');
// determine if we need to redirect and do so
if (_this._isRedirect(path, current_path)) {
_this._redirect(step, path);
return;
}
};
因此，如果文档中的当前路径与下一步的路径不同，则 tour 将自动重定向到下一步。
这是仅考虑字符串值的重定向的简化形式：
尽管 Bootstrap Tour 也支持它们，但我省略了基于正则表达式的路径
Tour.prototype._isRedirect = function(path, currentPath) {
var checkPath = path.replace(/\?.*$/, '').replace(/\/?$/, '');
var checkCurrent = currentPath.replace(/\/?$/, '');
return (checkPath !== checkCurrent);
};
Tour.prototype._redirect = function(step, path) {
this._debug("Redirect to " + path);
return document.location.href = path;
};
注意：正则表达式只是用于删除查询参数 ( /\?.*$/) 和尾部正斜杠 ( //?$/` )
当任何页面加载时，不确定 Bootstrap Tour 是否已将其重定向，或者您只是回来并尝试从您离开的地方继续浏览。
因此，在您初始化游览时的任何页面上：
- 它将根据本地存储中的值启动当前步骤。
- 当前步骤加载时，将确认该步骤的路径与当前 url 相同
- 如果没有，它将重定向到步骤路径并从步骤 1 重新开始
换句话说，它知道如何到达下一个需要去的地方，但是一旦到达那里就无法确认是否是这种情况。以这种情况为例，其步骤如下所示：
var step = {
path: "index.html",
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
}
它可以很好地重定向到相对引用，但是当页面再次加载并检查它是否已加载到正确的地址时，会发生这种情况：
“KyleMit”，你可能会抗议，“它就不能弄清楚我想要什么吗？ ”
-不！
如果您依赖相对路径进行重定向，当它加载一个步骤时，它不能保证您实际上已经到达该步骤，它会尝试再次重定向您。
这是因为，在网址中，"index.html" !== "\index.html". 他们是两条不同的路！一个保证在域根，而另一个可以在任何地方。想象一下，你有一些这样的嵌套视图：
在页面之间导航时，如果您只告诉它正确的页面名称，引导程序如何知道它是否到达了正确的目的地。
这使我们解决了这个问题：
绝对使用绝对 URL
提示debug:true：通过在创建游览时传递来更好地了解正在发生的事情，这将记录每个重定向：
