javascript - 页面转换错误 : "failed push state attempt" 的 Barba.js

Question

我正在试验 Barba.js 的页面转换。当我尝试运行此代码时，我收到“已阻止尝试使用 history.pushState() 更改 session 历史记录 URL”的错误消息。我相信这与 DOM 有关。我是 JS 新手，任何帮助将不胜感激。下面我附上了代码。谢谢!

HTML:

  <div id="barba-wrapper">
    <div class="barba-container">

  <div class="page1">
    <h1>Welcome to Homepage</h1>
    <a href="about/index.html">About</a>
  </div>
 </div>
</div>

HTML:

  <div id="barba-wrapper">
    <div class="barba-container">

  <div class="page2">
    <h1>Welcome to About</h1>
    <a href="../index.html">Home</a>
  </div>
  </div>
 </div>

JS:

Barba.Pjax.start();


var FadeTransition = Barba.BaseTransition.extend({
  start: function() {

Promise
  .all([this.newContainerLoading, this.fadeOut()])
  .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {

  },

  fadeIn: function() {
this.newContainer.classList.add("slide-in"); //ABOUT

var that = this;

this.newContainer.addEventListener("animationend", function(){
  that.newContainer.classList.remove("slide-in");
  that.done();
    });
  }
});



Barba.Pjax.getTransition = function() {

  return FadeTransition;
};

CSS:

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body
{
  font-family: sans-serif;
  overflow: hidden;
}
.page1,
.page2
 {
 height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  width: 100%;
  flex-direction: column;
  position: absolute;
}
a{
  color: white;
  text-decoration: none;
  margin-top: 50px;
  border: 1px solid white;
  padding: 10px 30px;
}
.page1
{
  background-color: rgb(129, 60, 146);
}
.page2
{
  background-color: rgb(73, 60, 146);
}

.slide-in
{
  animation: slide-in 0.5s ease forwards;
}

@keyframes  slide-in
{
  from
  {
    transform: translateX(100%);
    visibility: visible;
  }
  to
  {
    transform: translateX(0%);
  }
}

Answer 1

确保使用网络服务器运行代码，否则无法使用推送状态。