如何用if/else语句判断Iframe是否为空，切换显示视频或图片？

嘿，我来帮你搞定这个视频/图片切换的需求！核心思路就是先把视频iframe和备用图片放在同一个容器里，然后通过JavaScript判断iframe的src是否为空，来控制两者的显示状态。下面是具体实现步骤：

1. 调整HTML结构 #

先把备用图片添加到你的product-video-section容器里，给它一个专属ID方便后续控制，同时默认设置为隐藏状态：

<div class="col-sm-8 product-video-section">
  <!-- YouTube 视频 iframe -->
  <iframe id="ytplayer" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  <!-- 备用占位图片，默认隐藏 -->
  <img 
    id="product-placeholder" 
    src="你的图片URL地址" 
    alt="产品展示图" 
    style="display: none; width: 560px; height: 315px;" 
  />
</div>

2. 编写JavaScript判断逻辑 #

接下来写一段简单的JS代码，获取动态的视频链接后，判断是否为空，再切换元素的显示状态：

// 获取页面元素
const ytIframe = document.getElementById('ytplayer');
const placeholderImg = document.getElementById('product-placeholder');

// 这里替换成你实际动态获取src的方式（比如后端返回、用户选择等）
const dynamicVideoSrc = "你动态拿到的YouTube视频链接"; // 可能为空字符串

// 给iframe设置src
ytIframe.src = dynamicVideoSrc;

// 判断并切换显示
if (!dynamicVideoSrc || dynamicVideoSrc.trim() === '') {
  // 如果src为空，隐藏视频，显示图片
  ytIframe.style.display = 'none';
  placeholderImg.style.display = 'block';
} else {
  // 如果有有效视频链接，显示视频，隐藏图片
  ytIframe.style.display = 'block';
  placeholderImg.style.display = 'none';
}

3. 优化：处理动态更新场景 #

如果你的视频链接是在页面加载后动态变化的（比如用户切换产品时更新），可以把判断逻辑封装成一个函数，方便随时调用：

function toggleVideoOrImage(videoSrc) {
  const ytIframe = document.getElementById('ytplayer');
  const placeholderImg = document.getElementById('product-placeholder');
  
  ytIframe.src = videoSrc;
  
  if (!videoSrc || videoSrc.trim() === '') {
    ytIframe.style.display = 'none';
    placeholderImg.style.display = 'block';
  } else {
    ytIframe.style.display = 'block';
    placeholderImg.style.display = 'none';
  }
}

// 调用示例：更新为新视频
toggleVideoOrImage("https://www.youtube.com/embed/xxx");
// 调用示例：切换为显示图片
toggleVideoOrImage("");

可选：用CSS类控制显示（更优雅） #

如果不想直接操作元素的style属性，可以定义CSS类来控制显示隐藏，这样更符合前端最佳实践：

/* 全局定义隐藏类 */
.hidden {
  display: none !important;
}

然后在JS里切换类即可：

if (!dynamicVideoSrc || dynamicVideoSrc.trim() === '') {
  ytIframe.classList.add('hidden');
  placeholderImg.classList.remove('hidden');
} else {
  ytIframe.classList.remove('hidden');
  placeholderImg.classList.add('hidden');
}

这样就能完美实现用户自主选择显示视频或图片的需求啦！

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