如何获取iframe中轮播组件当前活跃Slide的数值？

问题背景 #

我不是专业开发者，能修改现成代码但没法独立编写。现在用一套轮播代码做餐厅菜单，嵌入静态页面的iframe里，需要获取当前显示的Slide序号，用来在父页面做对应修改。已经掌握修改父页面div文本、实现轮播自动播放的方法，但始终拿不到当前Slide的数值或序号。

解决步骤 #

第一步：修改iframe里的轮播代码，添加序号发送逻辑 #

找到轮播的JavaScript代码（原项目里的JS部分），添加以下代码：

1. 页面加载时发送初始序号：

window.addEventListener('load', () => {
  // 找到当前显示的Slide
  const currentSlide = document.querySelector('.slider li.visible');
  // 计算序号（从1开始计数）
  const slideIndex = Array.from(currentSlide.parentElement.children).indexOf(currentSlide) + 1;
  // 把序号发送给父页面
  window.parent.postMessage({
    type: 'slideChanged',
    slideNumber: slideIndex
  }, '*'); // 如果父页面有固定域名，把*换成父页面域名更安全
});

2. Slide切换时发送更新后的序号：
   找到轮播中切换Slide的逻辑（比如处理切换按钮点击、自动播放的代码块），封装一个重复调用的函数，在切换完成后执行：

// 封装发送序号的函数
function sendCurrentSlideNumber() {
  const currentSlide = document.querySelector('.slider li.visible');
  const slideIndex = Array.from(currentSlide.parentElement.children).indexOf(currentSlide) + 1;
  window.parent.postMessage({
    type: 'slideChanged',
    slideNumber: slideIndex
  }, '*');
}

// 在原轮播切换逻辑执行完后，调用这个函数
// 比如点击下一页按钮、自动播放切换完成后，添加：
sendCurrentSlideNumber();

第二步：父页面添加接收序号的逻辑 #

在父页面的JavaScript里添加监听消息的代码，接收iframe发来的Slide序号：

window.addEventListener('message', (event) => {
  // 可选：验证消息来源，确保是你的iframe页面
  // if (event.origin !== '你的iframe页面域名') return;

  if (event.data.type === 'slideChanged') {
    // 获取当前Slide序号
    const currentSlideNum = event.data.slideNumber;
    // 这里写你需要的逻辑，比如更新父页面的文本
    // 示例：修改id为slide-status的div内容
    document.getElementById('slide-status').textContent = `当前菜单：第${currentSlideNum}页`;
  }
});

注意事项 #

• 如果iframe和父页面不在同一个域名下，要确保postMessage里的目标域名正确，同时父页面验证event.origin，避免安全问题。
• 原轮播的当前Slide通过visible类标识，控制栏的当前项通过slider-controls li.selected标识，两种方式都可用来获取序号，上面用的是Slide的visible类。

内容的提问来源于stack exchange，提问作者Stephen