JavaScript实现点击关闭按钮恢复任意iframe至初始状态的问题

API 探路者

2026-7-24

实现适配所有iframe的通用关闭按钮

现有代码的问题

拼写错误：document.getElementByClassName应为getElementsByClassName（注意复数形式）
节点集合操作错误：querySelectorAll返回的是节点列表，不能直接设置style.display，必须遍历每个元素
范围错误：直接操作所有.games元素会影响未打开的游戏，应该只针对处于「打开状态」的项

通用解决方案

通过标记打开状态的类+遍历处理实现通用关闭逻辑：

1. 修改HTML按钮

将内联点击事件改为调用独立函数：

<span id="close-button" onClick="closeAllGames()">×</span>

2. 编写通用关闭函数

function closeAllGames() {
  // 隐藏加载提示和关闭按钮
  document.getElementById('loading').style.display = 'none';
  document.getElementById('close-button').style.display = 'none';
  
  // 精准获取所有处于打开状态的游戏项（带play类的.games元素）
  const openGames = document.querySelectorAll('.games.play');
  
  // 遍历每个打开的游戏，逐一恢复状态
  openGames.forEach(gameItem => {
    // 移除打开状态标记类
    gameItem.classList.remove('play');
    
    // 隐藏iframe
    const iframe = gameItem.querySelector('.iframe');
    if (iframe) iframe.style.display = 'none';
    
    // 恢复缩略图、播放按钮、名称
    const thumbnail = gameItem.querySelector('.thumbnail');
    if (thumbnail) thumbnail.style.display = 'initial';
    
    const playButton = gameItem.querySelector('.play-button');
    if (playButton) playButton.style.display = 'initial';
    
    const name = gameItem.querySelector('.name');
    if (name) name.style.display = 'initial';
  });
}