如何在媒体查询变化时自动切换 iframe 的 src 属性

本文介绍如何利用 window.matchMedia() 结合事件监听，实现在浏览器窗口尺寸变化时动态更新 iframe 的 src，避免手动刷新，提升响应式体验。

本文介绍如何利用 `window.matchmedia()` 结合事件监听，实现在浏览器窗口尺寸变化时动态更新 iframe 的 `src`，避免手动刷新，提升响应式体验。

在构建响应式网页时，有时需要根据视口宽度加载不同内容——例如在桌面端显示「关于页面」（about.html），而在平板或小屏设备上切换为更紧凑的「卡片列表」（card.html）。虽然 matchMedia() 可以检测初始媒体查询状态，但其返回的 MediaQueryList 对象本身不会自动触发重载逻辑；若仅在 DOMContentLoaded 中执行一次判断，后续窗口缩放将无法触发更新。

解决的关键在于：将媒体查询判断逻辑封装为可复用函数，并同时绑定到页面加载和 resize 事件上。但需注意：resize 事件高频触发，直接监听可能影响性能。幸运的是，matchMedia 提供了更优雅、更高效的替代方案——使用其 addEventListener（现代浏览器支持）监听媒体查询状态变更，而非盲目监听 resize。

以下是推荐的高性能实现方式：

document.addEventListener("DOMContentLoaded", function () {   const iframe = document.querySelector("main > iframe");   if (!iframe) return; // 安全检查：确保 iframe 存在    const mediaQuery = window.matchMedia("(max-width: 1224px)");    function updateIframeSrc() {     if (mediaQuery.matches) {       iframe.src = "/HTML/card.html";     } else {       iframe.src = "/HTML/about.html";     }   }    // 立即执行一次，确保初始状态正确   updateIframeSrc();    // ✅ 推荐：监听媒体查询状态变化（非 resize），精准且高效   mediaQuery.addEventListener("change", updateIframeSrc);    // ⚠️ 兼容性备选（仅需支持旧版 safari ≤13.1 或 IE）：   // window.addEventListener("resize", updateIframeSrc); });

✅ 优势说明：

• mediaQuery.addEventListener(“change”, …) 仅在媒体查询匹配状态真正改变时触发（如从 false → true），避免 resize 的频繁抖动；
• 不依赖窗口尺寸计算，语义清晰，与 CSS 媒体查询逻辑完全对齐；
• 支持服务端渲染（SSR）友好，因不依赖 window.innerWidth 等易受渲染时机影响的属性。

⚠️ 注意事项：

• 请确保目标 HTML 文件路径（如 /HTML/card.html）存在且可跨域访问；若 iframe 加载同源资源，建议添加 loading=”lazy” 提升初始性能；
• 若需兼容 Safari ≤13.1，需降级使用 mediaQuery.addListener()（已废弃但仍可用），或回退至 resize + 防抖（不推荐，除非必须支持极旧环境）；
• 多个 iframe 或复杂条件时，建议将逻辑封装为可配置的工具函数，提升可维护性。

总结：响应式 iframe 切换不应依赖窗口尺寸轮询，而应依托 matchMedia 的声明式状态监听。这一模式简洁、可靠、性能优异，是现代前端响应式开发的标准实践之一。