本文介绍如何利用 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，也可拓展至字体切换、布局重排、图片源替换等响应式场景。
