如何在浏览器尺寸缩小或处于窗口模式时隐藏Iframe

问题原因 #

你编写的JS逻辑仅在页面首次加载时执行1次，浏览器窗口尺寸调整时没有触发重新判断，因此手动缩放窗口不会触发iframe隐藏效果。同时你原有iframe标签的style属性缺少引号包裹，可能存在解析异常。

修复方案 #

方案1：使用CSS媒体查询实现（更推荐，性能更高逻辑更简单） #

直接在样式表中添加如下规则，不需要额外JS代码：

/* 阈值可自行调整，你当前iframe左偏移700px+宽度550px，总占宽1250px，小于该宽度时iframe会超出视口 */
@media (max-width: 1250px) {
  .v-tour-object {
    display: none;
  }
}

同时修正iframe标签的style属性写法：

<iframe embed class="v-tour-object" style="position:absolute;left:700px;top:0px;" width="550" height="360"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

方案2：使用JS监听窗口缩放事件实现 #

如果需要保留JS控制逻辑，修改代码如下：

// 定义iframe显示状态判断逻辑
function toggleIframeDisplay() {
  const iframe = document.querySelector('.v-tour-object');
  if (!iframe) return;
  // 可根据需求调整判断条件
  if(window.innerWidth <= 1000 && window.innerHeight <= 800) {
    iframe.style.display = "none";
  } else {
    iframe.style.display = "block"; // 窗口放大到符合要求时恢复显示
  }
}
// 页面加载时先执行一次判断
toggleIframeDisplay();
// 监听窗口resize事件，添加防抖避免频繁触发影响性能
let resizeTimer = null;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(toggleIframeDisplay, 100);
});

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