如何清除iframe缓存或强制重载以解决切换视频时旧画面残留问题？

针对你遇到的iframe切换视频时短暂显示旧内容的问题，以下是几种无需销毁重建iframe的优雅解决方案：

方案一：先重置iframe为空白再加载新视频 #

通过先将iframe的src设置为about:blank，强制清空当前内容，再加载新视频地址。浏览器会优先处理空白页面的加载，避免旧内容残留：

const iframe = document.getElementById("iframe_id");

// 切换视频时执行
function switchVideo(newVideoUrl) {
  // 先清空iframe内容
  iframe.src = "about:blank";
  // 直接设置新地址（无需延迟，浏览器会按顺序处理）
  iframe.src = newVideoUrl;
}

如果遇到部分浏览器延迟生效的情况，可以加10-50ms的短暂延迟确保空白页面加载完成后再设置新地址。

方案二：利用加载完成事件控制显示时机 #

通过监听iframe的onload事件，确认新视频加载完成后，再在用户点击播放时显示iframe，从根源上避免旧内容暴露：

const iframe = document.getElementById("iframe_id");
const overlay = document.getElementById("overlay_id");
let newVideoReady = false;

// 用户选择新视频时触发
function loadNewVideo(newUrl) {
  newVideoReady = false;
  iframe.src = newUrl;
  // 监听新视频加载完成
  iframe.onload = () => {
    newVideoReady = true;
  };
}

// 播放按钮点击事件
function onPlayClick() {
  if (newVideoReady) {
    overlay.style.display = "none";
    iframe.style.display = "block";
    // 若需自动播放，可调用视频平台API（如YouTube iframe API）触发播放
  } else {
    // 加载未完成时，可显示加载提示或重试
    setTimeout(onPlayClick, 100);
  }
}

注意：如果使用第三方视频平台（如YouTube、B站），建议使用官方提供的iframe API来监听加载状态，避免跨域限制导致onload事件不准确。

方案三：清空iframe内容（仅同域视频有效） #

如果视频资源属于同域，可以直接操作iframe的文档内容清空旧内容，再加载新地址：

const iframe = document.getElementById("iframe_id");

function switchVideo(newVideoUrl) {
  // 清空iframe内部内容
  iframe.contentDocument.body.innerHTML = "";
  // 加载新视频
  iframe.src = newVideoUrl;
}

此方法不适用于跨域场景，会因浏览器同源策略限制报错。

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