本文介绍如何利用 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 的声明式状态监听。这一模式简洁、可靠、性能优异，是现代前端响应式开发的标准实践之一。
