如何在媒体查询更改时自动更改 iframe src 值？

Question

document.addEventListener("DOMContentLoaded", function () {

let query = window.matchMedia("(max-width:1224px)");
let iframe = document.querySelector("main>iframe");

if (query.matches) {
iframe.setAttribute("src", "/HTML/card.html");
} else {
iframe.setAttribute("src", "/HTML/about.html");
}
});

我希望在媒体查询处于最大宽度时加载不同的 html 页面：1224px。当我调整浏览器大小时，它仅在刷新或重新加载时切换到目标页面。我们如何让它在媒体大小改变时立即切换内容？

Answer 1

您需要在视口调整大小时添加一个事件侦听器，因此基本上在页面加载时运行一次您的逻辑（DOMContentLoaded）然后在每次调整大小时再次运行：

document.addEventListener("DOMContentLoaded", function () {

  function changeIFrameContent() {
    let query = window.matchMedia("(max-width:1224px)");
    let iframe = document.querySelector("main>iframe");
    if (query.matches) {
      iframe.setAttribute("src", "/HTML/card.html");
    } else {
      iframe.setAttribute("src", "/HTML/about.html");
    }
  }

  changeIFrameContent();
  window.addEventListener('resize', changeIFrameContent);
});