Question

我使用yii2作为后端框架，我想浏览我的应用程序，但是第二页上没有显示bootstrap tour popover，我为bootstrap tour创建了一个资产包并在布局中注册它，bootstrap tour正常工作在第一页上，但是当转到另一个页面时，它会产生问题并在下一页的调试中显示：
Bootstrap Tour'tour'|重定向到纸张/上传
Bootstrap Tour'tour'|错误重定向循环到纸张/上传

我已经在chrome的开发人员工具中检查了窗口本地存储，并且在进入第二页窗口本地存储时显示正确的步骤： tour_current_step值2，

另一个问题，我应该如何为yii2路由器的bootstrap tour设置路径选项的值，我的路径是否正确？例如，第一步是在网站的主页上是：“”，是否正确，我想如果有人点击前一个按钮弹出窗口返回上一步。
这是我的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");
    });
  });

Answer 1

我在代码上做了很多工作，最后找到了答案，问题出在路径上，我在URL管理器中使用了漂亮的URL，而bootstrap tour需要关系路径，如果当前页面中的路径不相同作为bootstrap tour步骤中的路径，它将进入重定向循环，这是因为bootstrap tour无法找到，是否需要重定向或不需要，这是bootstrap的短代码游览哪里去重定向循环

      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等框架中）解决此问题，引导浏览建议在步骤中使用onNext属性并重定向到地址。 /> 但在我的情况下，我更改了bootstrap tour的源代码，以更好的形式找到我的答案，并用以下代码替换上面的代码：

    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;
        }
      }
    };

并在options，domainAddress中定义一个全局变量，但我认为这不是改变bootstrap tour源代码的好方法，但它适用于我的情况。

多页自举游览，第二页中未显示弹出窗口

1 个答案: