Question

我有一个函数在我的index.html页面上运行一个随机单词生成器，它工作正常，但是当您在任何其他页面上时也可以继续运行（由于windows.onload）。

我不确定如何编写JavaScript说“仅在index.html上运行此功能，没有其他页面”或“仅在此类上运行”

window.onload = function refreshWord()
  setInterval(function randomWord() {
    const words = ['Engineer', 'Developer', 'Illustrator', 'Cyclist', 'Artist'];
    const randomGenerator = Math.floor(Math.random() * words.length);
    document.getElementById('textswap').innerHTML = words[randomGenerator];
  }, 2000);

        <div class="col">
          <h4>These are the words, a <span class="front-page-text-swap" id="textswap"> person </span>.</h4>
        </div>

我的最终目标是让功能refreshWord()仅在index.html页面上执行，而没有其他功能，但是我对此如何操作一无所知（我想使用普通js，不是jQuery）

Answer 1

检查pathname是否为index.html，如果是，则创建时间间隔：

if (window.location.pathname === '/index.html') {
  setInterval( ...
}

最好只选择textswap 一次，而不是每次间隔运行一次，并且只创建一个 words数组，而不是每次都声明一个新数组：

if (window.location.pathname === '/index.html') {
  const words = ['Engineer', 'Developer', 'Illustrator', 'Cyclist', 'Artist'];
  const getRandomWord = () => words[Math.floor(Math.random() * words.length)];
  const textswap = document.getElementById('textswap');
  setInterval(() => {
    textswap.textContent = getRandomWord();
  });
}

Answer 2

您可以在index.html中获取只想要的代码，然后将其从所有页面共享的共享Javascript页面中删除，并将其放入仅包含在HTML中的<script>标签中index.html页，而不是其他任何页面：

<script>
// insert this script only in the index.html page and 
// directly inserted, not via a separate script file
window.onload = function refreshWord()
  setInterval(function randomWord() {
    const words = ['Engineer', 'Developer', 'Illustrator', 'Cyclist', 'Artist'];
    const randomGenerator = Math.floor(Math.random() * words.length);
    document.getElementById('textswap').innerHTML = words[randomGenerator];
  }, 2000);
</script>

您还可以测试仅存在于index.html上的页面元素。因此，如果textswap元素仅存在于index.html上，那么您可以这样做：

window.onload = function refreshWord()
  var textswap = document.getElementById('textswap');
  // see if the textswap element exists in this page
  if (textswap) {
      setInterval(function randomWord() {
        const words = ['Engineer', 'Developer', 'Illustrator', 'Cyclist', 'Artist'];
        const randomGenerator = Math.floor(Math.random() * words.length);
        textswap.innerHTML = words[randomGenerator];
      }, 2000);
  }

因此，setInterval()仅在确实存在目标页面唯一的某个元素时才被调用。

这种“内容检测”有时比URL测试更安全，因为它可以跟踪所需的实际页面，而不是URL（可以在某些时候更改）。

仅在index.html页面上运行函数（Javascript）

2 个答案: