Bootstrap-tour onNext回调异常：跳转后重复显示同一步骤

嘿，我来帮你捋捋这个问题哈！你现在遇到的核心问题是：跨页面跳转后，新页面的Tour实例不知道该从下一个步骤（步骤19）开始，还是默认加载了原来的步骤（步骤18）。

问题根源 #

当你通过document.location.href跳转到新页面时，原页面的Tour实例就被销毁了。新页面会重新初始化Bootstrap-Tour，但它没有收到任何“从步骤19开始”的指令，所以要么从头开始，要么因为步骤18是orphan: true，又默认显示了步骤18，导致看起来没切换到下一个步骤。

另外，你在onNext里返回了(new jQuery.Deferred()).promise()，这其实没必要——因为页面跳转后，原页面的Tour生命周期已经结束了，这个promise不会有任何作用，反而可能干扰Tour的状态判断。

修复方案 #

我们需要在跳转时把“要执行的下一个步骤编号”通过URL参数传递给新页面，然后在新页面初始化Tour时，读取这个参数直接跳转到对应步骤。

1. 修改步骤18的onNext回调

把跳转的URL加上步骤参数，同时去掉多余的Deferred返回：

onNext: function () {
  var commissionId = $('.tour-commission-detail').first().data('id');
  if( ! commissionId ) {
    alert('Nejdříve musíte založit aspoň jednu zakázku');
    tour.prev();
    return;
  }
  // 把下一个步骤编号（19）作为URL参数传递
  document.location.href = basePath + '/commission/overview/' + commissionId + '?tourStep=19';
  // 不需要返回Deferred，因为页面即将跳转
}

2. 在新页面初始化Tour时读取参数并跳转

当你在/commission/overview/[commissionId]页面初始化Tour的时候，先读取URL里的tourStep参数，如果存在，就让Tour直接从该步骤开始：

// 初始化Tour的代码
var tour = new Tour({
  // 你的其他配置项
});

// 读取URL参数
function getUrlParam(name) {
  var urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

var targetStep = getUrlParam('tourStep');
if (targetStep) {
  // 跳转到指定步骤（注意：如果你的步骤数组索引是从0开始，需要把参数转成数字后减1，比如 parseInt(targetStep) - 1）
  tour.show(targetStep);
} else {
  // 正常启动Tour
  tour.start();
}

额外注意点 #

• 确认你的步骤编号和Bootstrap-Tour内部的索引是否对应：如果你的步骤数组里步骤18是第18个元素（索引17），步骤19是索引18，那传递参数的时候需要调整成索引值。不过看你代码里给步骤加了注释{ // 18，应该是你自己标记的步骤序号，只要Tour的steps数组顺序和这个序号对应，直接用即可。
• 确保新页面的Tour配置里包含步骤19的定义，不然即使传递了参数，Tour也找不到对应的步骤。

这样修改后，跳转后的页面就能直接加载步骤19，而不是停留在步骤18啦！

内容的提问来源于stack exchange，提问作者Čamo