如何在setInterval循环中定时修改iframe的src属性

原有代码的错误点 #

• 第一版代码逻辑完全不成立：JS函数内直接写<a>标签属于语法错误，<a>是HTML元素，无法通过JS函数直接输出实现跳转；iframe、button标签均未正确闭合；定时器绑定在按钮点击事件上，不符合自动触发的需求。
• 第二版代码存在3个核心问题导致循环失效：
  • url数组内的地址字符串缺少闭合引号，且未带https://协议头，会被浏览器识别为当前站点下的相对路径，无法正确加载目标地址
  • 用shift()方法取数组元素会直接修改原数组，所有地址取完后数组就为空，无法实现无限循环
  • setInterval(openNext(),5000)写法错误，加括号会让函数立刻执行，而非等待定时器触发；同时函数内部又套了setTimeout逻辑，两套计时规则冲突会导致执行混乱。

可直接运行的正确代码 #

<iframe id="autoSwitchIframe" height="100%" width="100%" title="自动切换iframe"></iframe>
<script>
  // 配置项：需要循环加载的地址列表，必须带完整https/http协议头
  const urlList = [
    'https://www.google.com',
    'https://stackoverflow.com'
  ]
  // 配置项：切换间隔，单位毫秒，此处为每5秒切换一次
  const interval = 5000
  // 记录当前加载的地址索引
  let currentIndex = 0

  // 初始化：加载第一个地址
  const iframe = document.getElementById('autoSwitchIframe')
  iframe.src = urlList[currentIndex]

  // 切换地址的方法
  function loadNextUrl() {
    // 索引自增，到数组末尾后自动回到0，实现无限循环
    currentIndex = (currentIndex + 1) % urlList.length
    iframe.src = urlList[currentIndex]
  }

  // 页面加载完成后自动启动定时器，无需按钮触发
  window.addEventListener('load', () => {
    setInterval(loadNextUrl, interval)
  })
</script>

注意事项 #

• 部分站点配置了X-Frame-Options响应头，禁止被第三方页面通过iframe嵌入，这种情况无论怎么写代码都无法加载，属于浏览器同源安全策略限制。
• 定时器传回调时只需要传函数名，不要加括号调用，否则会立刻执行函数，失去定时效果。
• 单套循环逻辑只用一种定时方法即可，不要混用setTimeout和setInterval，避免出现计时叠加、重复执行的问题。

内容的提问来源于stack exchange，提问作者João Mamprin