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

你的代码目前仅在页面首次加载时执行一次媒体查询判断，因此窗口尺寸变化后需要刷新页面才会切换iframe内容。要实现即时切换，需要监听媒体查询的状态变化事件，具体修改如下：

修改后的代码 #

document.addEventListener("DOMContentLoaded", function () {
  const query = window.matchMedia("(max-width:1224px)");
  const iframe = document.querySelector("main>iframe");

  // 封装判断逻辑为复用函数
  function updateIframeSrc() {
    if (query.matches) {
      iframe.setAttribute("src", "/HTML/card.html");
    } else {
      iframe.setAttribute("src", "/HTML/about.html");
    }
  }

  // 页面加载时初始化一次
  updateIframeSrc();

  // 监听媒体查询状态变化，即时更新iframe内容
  query.addEventListener("change", updateIframeSrc);
});

关键说明 #

• 将切换逻辑封装成updateIframeSrc函数，既可以在页面加载时初始化，也可以在尺寸变化时重复调用，避免代码冗余。
• 通过query.addEventListener("change", ...)监听媒体查询的状态变化：当窗口尺寸跨越1224px阈值时，会自动触发change事件，调用updateIframeSrc函数切换iframe的源地址。
• 这种方式比监听window.resize事件更高效，因为只有当媒体查询的匹配状态发生变化时才会触发，而不是每次窗口尺寸变动都执行判断。

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