Javascript error: Window.CP undefined on codepen.io

Question

我在 codepen.io 上的笔上遇到 JavaScript 错误。

TypeError: window.CP is undefined

查了下才知道是死循环保护连接的问题，但是找不到解决问题的办法

这是 CodePen (where it doesn't work) and to a JSFiddle 上的笔的 link（它工作的地方）。

这是代码片段中的代码（它也适用）。

（滚动时绿色块应该会改变颜色）

<script>
function scrollFunction() {
  var content = document.getElementById('content').querySelectorAll('p')
  var contentY = []

  for (i = 0; i < content.length; i++) {
    contentY[i] = content[i].offsetTop
  }

  var html = document.documentElement
  var y = html.scrollTop

  var windowY = window.innerHeight

  var phone = document.getElementById('phone')

  for (i = 0; i < content.length; i++) {
    if (y > contentY[i] - windowY * 0.4) {
      phone.classList.add('color' + (i + 1))
      phone.classList.remove('color' + i)
    } else {
      phone.classList.remove('color' + (i + 1))
    }
  }
}

window.onscroll = function () {
  scrollFunction()
}
</script>

body {
  background: white;
  color: #323232;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  font-family: Helvetica neue, roboto;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  -webkit-box-shadow: 0px -6px 25px 20px rgba(0, 0, 0, 0.44);
  -moz-box-shadow: 0px -6px 25px 20px rgba(0, 0, 0, 0.44);
  box-shadow: 0px -6px 25px 20px rgba(0, 0, 0, 0.44);
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

nav ul li {
  padding: 0 1rem;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#content {
  width: 50%;
}

/* The first paragraph has a margin-top = the size of the screen*/
#content p:first-child {
  margin-top: 100vh;
}

#content p {
  margin: 0;
  margin-bottom: 100vh;
}

/* Same margin-top as the 1st paragraph + sticky at 40% from the top*/
#phone {
  margin-top: 100vh;
  width: 8rem;
  height: 13rem;
  max-height: 70vh;
  position: sticky;
  top: 40%;
  background: lightgreen;
  transition: background 0.2s;
}

#phone.color1 {
  background: palevioletred;
}

#phone.color2 {
  background: purple;
}

#phone.color3 {
  background: royalblue;
}

#phone.color4 {
  background: rgb(30, 150, 104);
}

<nav class="menu">
  <ul>
    <li>Menu</li>
    <li>Bar</li>
    <li>Scrolling</li>
    <li>Effect</li>

  </ul>
</nav>
<main>
<div id="content" class="content">
    <p>
      One advanced diverted domestic sex repeated bringing you old. Possible procured her trifling laughter thoughts property she met way.
    </p>
    <p>
      Finished her are its honoured drawings nor. Pretty see mutual thrown all not edward ten. Particular an boisterous up he reasonably frequently.
    </p>
    <p>
      May musical arrival beloved luckily adapted him. Shyness mention married son she his started now. Rose if as past near were. To graceful he elegance oh moderate attended entrance pleasur
    </p>
    <p>
      Out believe has request not how comfort evident. Up delight cousins we feeling minutes.
    </p>
  </div>
  <div id="phone">
  </div>
</main

Answer 1

CodePen 与正常的 loops 有问题，但与 Array 方法一起工作良好，例如：forEach, map, or reduce。 Chrome 控制台输出：

Uncaught TypeError: Cannot read property ‘shouldStopExecution’ of undefined

为了解决这个问题，我不得不将正常的 loop 更改为 forEach instead. Example

Javascript error: Window.CP undefined on codepen.io

Javascript error: Window.CP undefined on codepen.io

javascript

css

codepen