当我到达第二页时，我在多页游览中启动 Bootstrap Tour 时遇到问题。
我以点击事件开始游览localStorage被设定为false。游览从单击事件开始正常，但是当我转到游览的第二步并加载新页面时，游览不会从中断处继续。
如何在这个新页面上从第二步恢复游览？我知道我需要重新初始化游览，但显然我没有正确执行此操作。
$(document).ready(function () {
// Instance the tour
var tour = new Tour({
name: "CiteTour",
steps: [{
element: "",
title: "#1",
content: "You can find help with formatting citations on the Guide page. Click 'Next' to go there now.",
placement: ""
}, {
element: "#CiteTour2",
title: "#2 - Citation Resources",
content: "There are several options for getting help with formatting citations. Once on the Guide page, look for the box labeled 'Citation Help.'",
placement: "right",
path: "/newpath",
onNext: function (tour) {
tour.init();
tour.restart();
}
}, {
element: "#CiteTour3",
title: "#3",
content: "This site can help format your research paper and references in APA, MLA, and the other major citation formats.",
placement: "right",
}, {
element: "#AskTour1",
title: "#4 - Ask-a-Librarian",
content: "If you still have questions about citations or citation format, feel free to contact the librarians. Good luck!",
placement: "left",
}],
storage: false,
});
// Initialize the tour
tour.init();
$('#CiteTour-go').on('click', function () {
// Start the tour
tour.start();
});
});
First, you must确保您正在使用storage: window.localStorage，它使用存储API。这是默认的游览选项，因此您所要做的就是not正如您所做的那样，将其覆盖为 false。这样做的目的是允许 Bootstrap Tour 在同一域内的多个页面上保留当前步骤信息。
Want Proof? - Open up your dev tools and see:
Second，如果您指定path任何步骤的选项，您应该指定它所有步骤。当单页游览开始时，它不需要担心导航到不同的页面，但是一旦移动到新页面，如果您没有为前面的步骤指定路径，引导游览就无法进行知道要导航回哪里。
Furthermore, you need to use an absolute-path reference by prefxing the url with a single slash so it is relative to the root directory. If you use relative paths, the path will be changed as you move through pages/steps. For more info, see my section at the bottom on the Infinite Page Refreshing Issue
Third，只要您定义tour对象和init拨号后，游览将自动在新页面上进行。
让我们看一个简化版本what init() does:
Tour.prototype.init = function(force) {
// other code omitted for brevity
if (this._current !== null) {
this.showStep(this._current);
}
};
因此，一旦您初始化了游览，只要它注意到游览已经开始并且尚未结束（即它有当前步骤），它就会自动启动该步骤。所以你不需要通过点击来初始化onNext事件在你的第二步。
可编辑的普朗克 | 可运行的演示
$(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();
});
});
<!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>
<!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 下一步如何进行？
When you hit the Next Button, the tour will call showStep(i) for the next step
这是一个简化版本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;
}
};
因此，如果文档中的当前路径与下一步的路径不同，则游览将自动重定向到下一步。
Here's a simplified form of the redirection that just takes into account string values:
I've omitted regex based paths although Bootstrap Tour also supports them
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;
};
Note：正则表达式只是用来删除查询参数（/\?.*$/) 和尾随正斜杠 (//?$/`)
当任何页面加载时，不确定 Bootstrap Tour 是否已重定向它，或者您只是回来并尝试从上次中断的地方继续浏览。
因此，在初始化游览时的任何页面上：
换句话说，它知道如何到达下一步需要去的地方，但一旦到达那里就无法确认情况是否如此。以这种情况为例，步骤如下：
var step = {
path: "index.html",
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
}
它可以很好地重定向到相对引用，但是当页面再次加载并检查它是否已加载到正确的地址时，会发生这种情况：
“KyleMit”，你可能会抗议，“难道它不能弄清楚我想要什么吗？"
如果您依赖相对路径进行重定向，则当它加载步骤时，它无法保证您实际上已到达该步骤，并且它会尝试再次重定向您。
这是因为，在网址中，"index.html" !== "\index.html"。这是两条不同的路！一个保证位于域根，而另一个可以位于任何地方。想象一下您有一些像这样的嵌套视图：
在页面之间导航时，如果您只告诉引导程序正确的页面名称，引导程序如何知道它是否到达了正确的目的地。
这给我们带来了这个问题的解决方案：
Tip: Get a better sense of what's going on by passing in
debug:truewhen creating your tour, which will log every redirect:
