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

本文介绍如何利用 window.matchMedia() 配合 resize 事件，实现在浏览器窗口尺寸变化时实时动态更新 iframe 的加载内容，避免手动刷新才能生效的问题。

本文介绍如何利用 `window.matchmedia()` 配合 `resize` 事件，实现在浏览器窗口尺寸变化时实时动态更新 iframe 的加载内容，避免手动刷新才能生效的问题。

在响应式网页开发中，有时需要根据视口宽度动态加载不同的 HTML 页面到

根本原因在于：window.matchMedia().matches 是一个静态快照值，不会自动响应视口变化；必须显式监听媒体查询状态变更或窗口尺寸变化。

✅ 正确做法是：将逻辑封装为函数，并在页面加载完成时执行一次，再通过 resize 事件持续监听窗口尺寸变化：

document.addEventListener("DOMContentLoaded", function () {   function updateIframeSrc() {     const mediaQuery = window.matchMedia("(max-width: 1224px)");     const iframe = document.querySelector("main > iframe");      if (!iframe) {       console.warn("未找到 main > iframe 元素，请检查 DOM 结构");       return;     }      if (mediaQuery.matches) {       iframe.src = "/HTML/card.html";     } else {       iframe.src = "/HTML/about.html";     }   }    // 初始加载时立即应用   updateIframeSrc();    // 监听窗口尺寸变化（注意：resize 触发频繁，此处无需防抖，因逻辑轻量）   window.addEventListener("resize", updateIframeSrc); });

⚠️ 注意事项：

• 优先使用 matchMedia().addEventListener()（现代推荐）：上述示例使用 resize 是兼容性最广的方案；若只需支持现代浏览器（chrome 99+、firefox 97+、safari 16.4+），更优写法是直接监听媒体查询变更，避免高频 resize 事件：

  const mediaQuery = window.matchMedia("(max-width: 1224px)"); mediaQuery.addEventListener("change", updateIframeSrc); // 替代 resize

• 确保 iframe 元素已存在：务必在 DOMContentLoaded 或更稳妥的 document.querySelector 后校验元素是否存在，防止脚本报错中断。
• 避免重复绑定：若代码可能被多次执行（如 SPA 中组件反复挂载），建议在绑定前清理旧监听器（例如保存 resize 回调引用并调用 removeEventListener）。
• 性能考量：resize 事件触发密集，但本例中仅做简单条件判断与属性赋值，开销极低；若后续逻辑复杂，应引入防抖（如 lodash.debounce）。

? 小结：动态响应媒体查询的关键，在于将状态判断逻辑解耦为可复用函数，并通过合适的事件机制（resize 或 matchMedia.change）实现被动响应。这不仅适用于 iframe，也可拓展至字体切换、布局重排、图片源替换等响应式场景。