点击主页图片在子页面加载对应YouTube视频的EventHandler问题

数据老陈

2026-7-24

解决点击图片跳转后iframe内容不更新的问题

核心问题是跳转时没把选中的视频信息传递给子页面，下面是具体的实现步骤：

1. 主页传递视频ID到子页面

给两张图片添加自定义属性存储对应YouTube视频ID，点击时把ID作为URL参数拼到跳转链接里：

主页HTML修改

给图片加上data-video-id属性，填入对应的YouTube视频ID（比如YouTube视频链接https://www.youtube.com/watch?v=abc123里的abc123就是视频ID）：

<img src="你的film1图片路径" alt="Film 1" data-video-id="abc123" />
<img src="你的film2图片路径" alt="Film 2" data-video-id="def456" />

主页JS修改

监听图片点击事件，获取视频ID并跳转：

document.addEventListener('DOMContentLoaded', function() {
  // 选中所有带视频ID属性的图片
  const filmImgs = document.querySelectorAll('[data-video-id]');
  
  filmImgs.forEach(img => {
    img.addEventListener('click', function() {
      const videoId = this.dataset.videoId;
      // 跳转到子页面，携带视频ID参数
      window.location.href = `visningsside.html?video=${videoId}`;
    });
  });
});

2. 子页面接收参数并更新iframe

在子页面中读取URL里的视频ID，动态设置iframe的src属性：

子页面HTML确保有iframe容器

给iframe设置唯一ID方便选中：

<iframe id="youtube-frame" width="560" height="315" frameborder="0" allowfullscreen></iframe>

子页面JS修改

获取URL参数并更新iframe：

document.addEventListener('DOMContentLoaded', function() {
  // 解析URL参数
  const params = new URLSearchParams(window.location.search);
  const targetVideoId = params.get('video');
  
  if (targetVideoId) {
    // 找到iframe并设置YouTube嵌入链接
    const iframe = document.getElementById('youtube-frame');
    iframe.src = `https://www.youtube.com/embed/${targetVideoId}`;
  }
});