引导旅游，我如何强制停止自动启动？

Question

我真的可以使用帮助关闭“自动启动”功能的引导旅游插件的网页，我正在建设。巡演本身就很棒。它按预期从一步跳到一步。但是，当用户第一次查看页面时，浏览就开始了。用户可以按下“结束旅游”，旅游将不再自动启动。但是，我想一起防止自动启动。

我需要你的帮助，以找到一个方法(或设置)，以防止旅游的自动启动，从它自己。我不想让用户按“结束巡回演出”.他们只应该按“开始巡回赛”，当他们想要旅游开始！

请参阅下面的代码。注意，我忽略了页面的大部分代码，因为我不想压倒您。

，请帮忙，我怎样才能阻止旅游自动启动？

<!-- Bootrap CSS  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Tour CSS  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/css/bootstrap-tour.css">


<a id="MSL-initialize-tour">
    START TOUR <span class="glyphicon glyphicon-play"></span>
</a>

<!-------- JQuery JS -------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-------- Bootsrap JS -------->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-------- Bootsrap Tour JS -------->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.11.0/js/bootstrap-tour.js"></script>

<!-------- Bootsrap Tour Steps -------->
<script>
// Instance the tour
var tour = new Tour({
  steps: [ 
  {
    element: "#MSL-initialize-tour",
    placement: "bottom",
    title: "<span class='glyphicon glyphicon-star'></span> Welcome to MSL!",
    content: "Press 'next' to see page features."
  }
]});

tour.init();
tour.start();

$('#MSL-initialize-tour').click(function(){
 tour.restart();
});
</script>

Answer 1

你得走了

tour.init();
tour.start();

一个函数的内部。现在，一旦加载Javascript，就会调用它们。

下面是一个JSFiddle示例

您可以看到init、start和restart都在同一个函数中，当用户单击“开始巡回赛”按钮时就调用了这个函数。

Answer 2

不知道我是否理解你的问题，但我认为你应该删除：

tour.start();

Answer 3

一个常见的问题是，当一个最终用户结束这个巡演时，如果我对巡演做了一个修改，他们就无法再看到它，但是如果他们已经看过这个版本，就会隐藏它。我能够通过在tour.init()和tour.start()之间添加下面的代码来修复这个问题。通过更新“传输”，它有效地增加了版本控制，并强制重新启动，以便最终用户能够再次看到巡演。参数"tourversion_layout“将是旅游的唯一参数，或者在我的例子中是旅游所在的页面。

​

// Instance the tour
var tour = new Tour({
steps: [ ... ]
});

// Initialize the tour
tour.init();

//check page tour version
var tourpageversion = "2018-03-30";
if (localStorage.getItem("tourversion_layout") !== tourpageversion) {
    localStorage.setItem("tourversion_layout", tourpageversion);
    tour.restart();
}

// Start the tour
tour.start();

​