多页 bootstrap 导览,第二页未显示弹出窗口

Multi-page bootstrap tour, not shown popover in the second page

我使用 yii2 作为后端框架,我想为我的应用制作游览,但是 bootstrap 游览弹出窗口没有显示在第二页上,我为 bootstrap 游览创建了一个资产包并且在布局中注册它,bootstrap 游览在第一页上正常工作,但是当转到另一页时它会出现问题并在下一页的调试中显示:
Bootstrap 游览 'tour' |重定向到 paper/upload
Bootstrap 游览 'tour' |错误重定向循环到 paper/upload

我已经在 chrome 的开发者工具中检查了 window 本地存储,并在转到第二页 window 本地存储时看到它处于正确的步骤: tour_current_step 值 2,

另一个问题,我应该如何在 yii2 路由器的 bootstrap 游览中设置路径选项的值,我的路径是否正确?例如,网站主页上的第一步是:“”,是否正确,我想如果有人单击弹出窗口的上一个按钮 return 返回上一步。
这是我的 javascript 代码,我在布局文件中注册了这个 javascript 代码:

 $(function() {
    var $demo, duration, remaining, tour;
    $demo = $("#demo");
    duration = 5000;
    remaining = duration;
    tour = new Tour({
      onStart: function() {
        return $demo.addClass("disabled", true);
      },
      onEnd: function() {
        return $demo.removeClass("disabled", true);
      },
      debug: true,
      steps: [
        {
          path: "",
          element: "#demo",
          placement: "bottom",
          title: "Welcome to Bootstrap Tour!",
          content: "Introduce new users to your product by walking them through it step by step."
        }, {
          path: "",
          element: "#Wordcounter",
          placement: "bottom",
          title: "Step One",
          content: "For translation click on word counter menu item"
        }, {
          path: "paper/upload",
          element: "#myDropzone",
          placement: "top",
          title: "Step two",
          content: "Drag and Drop your file here or click to upload plz wate to complete upload"
        }
        ,
        {
          path: "paper/upload",
          element: "#next",
          placement: "bottom",
          title: "Step three",
          content: "then Click on the Next Bottom",
          reflex: true
        }, {
          path: "paper/show",
          element: "#save",
          placement: "top",
          title: "Step four",
          content: "click on save and continue and choose language plan",
          duration: 5000
        }
      ]
    }).init();
    if (tour.ended()) {
      $('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert();
    }
    $(document).on("click", "[data-demo]", function(e) {
      e.preventDefault();
      if ($(this).hasClass("disabled")) {
        return;
      }
      tour.restart();
      return $(".alert").alert("close");
    });
  });

我在代码上做了很多工作,终于找到了答案,问题出在路径上,我在 URL 管理器中使用了漂亮的 URL,而 bootstrap tour需要关联路径,如果当前页面中的路径与bootstrap tour步骤中的路径不一致,则会进入重定向循环,这是因为bootstrap tour没有办法可以查到,是否需要重定向,这个是bootstrap tour where go to redirect loop

的短代码
      if (step.redirect && this._isRedirect(step.host, path, document.location)) {
        this._redirect(step, i, path);
        if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
          return;
        }
      }

当路径应该从路由器获取时解决这个问题(例如在像 Yii、Laravel、Symfony 和...这样的框架中)bootstrap 游览建议在中使用 onNext 属性步骤并重定向到地址。
但就我而言,我更改了 bootstrap 游览的源代码以找到更好形式的答案,并将上面的代码替换为以下代码:

    var current_url = document.URL;
    var result = current_url.includes(path);        
    if(!result){
        this._redirect(step, i, path);
        if (!this._isJustPathHashDifferent(step.host, path, document.location)) {
          return;
        }            
    }

并将重定向代码更改为:

    Tour.prototype._redirect = function(step, i, path) {
      var href;
      if ($.isFunction(step.redirect)) {
        return step.redirect.call(this, path);
      } else {
          href = this._options.domainAddress + path;
//        href = {}.toString.call(step.host) === '[object String]' ? "" + step.host + path : path;
        this._debug("Redirect to: " + href);
        if (this._getState('redirect_to') === ("" + i)) {
          this._debug("Error redirection loop to " + path);
          this._removeState('redirect_to');
          if (step.onRedirectError != null) {
            return step.onRedirectError(this);
          }
        } else {
          this._setState('redirect_to', "" + i);
          return document.location.href = href;
        }
      }
    };

并在选项中定义一个全局变量,domainAddress, 但我认为这不是更改 bootstrap 游览的源代码的好方法,但它适用于我的情况。