求助：iframe中如何让vh/vw基于屏幕尺寸而非自身尺寸

以下是几个可行的解决方案，覆盖同域和跨域场景：

方案1：同域场景下直接读取父窗口视口尺寸（最简单） #

如果iframe和父页面同域，直接在iframe页面中通过window.parent获取屏幕视口数据，定义自定义CSS变量替代原生vh/vw：

// iframe页面的JS代码
function updateScreenViewportVars() {
  const parentWidth = window.parent.innerWidth;
  const parentHeight = window.parent.innerHeight;
  // 1vw = 屏幕宽度的1%，1vh = 屏幕高度的1%
  document.documentElement.style.setProperty('--screen-vw', `${parentWidth / 100}px`);
  document.documentElement.style.setProperty('--screen-vh', `${parentHeight / 100}px`);
}

// 初始化执行
updateScreenViewportVars();
// 监听父窗口 resize 事件，实时更新
window.parent.addEventListener('resize', updateScreenViewportVars);

然后在iframe的CSS中替换原生单位：

/* 替代 width: 50vw; */
.element {
  width: calc(50 * var(--screen-vw));
  height: calc(80 * var(--screen-vh));
}

方案2：跨域场景下用postMessage通信 #

如果iframe和父页面跨域，无法直接访问window.parent的属性，通过postMessage传递视口数据：

父页面代码： #

const targetIframe = document.getElementById('your-iframe-id');

function sendViewportData() {
  const viewportInfo = {
    type: 'viewport-size',
    width: window.innerWidth,
    height: window.innerHeight
  };
  // 建议替换*为iframe的实际域名，提升安全性
  targetIframe.contentWindow.postMessage(viewportInfo, '*');
}

// 初始化发送
sendViewportData();
// 监听窗口 resize，防抖避免频繁触发
window.addEventListener('resize', debounce(sendViewportData, 200));

// 简单防抖函数
function debounce(func, delay) {
  let timer;
  return () => {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

iframe页面代码： #

window.addEventListener('message', (event) => {
  // 验证消息来源，替换为父页面实际域名
  if (event.origin !== 'https://your-parent-domain.com') return;
  if (event.data.type !== 'viewport-size') return;

  const { width, height } = event.data;
  document.documentElement.style.setProperty('--screen-vw', `${width / 100}px`);
  document.documentElement.style.setProperty('--screen-vh', `${height / 100}px`);
});

CSS使用方式和方案1一致。

方案3：强制iframe占满视口（适合业务允许的场景） #

如果业务允许iframe全屏显示，直接给iframe设置样式使其占满整个屏幕：

iframe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border: none;
}

这种情况下iframe的vh/vw会和屏幕视口一致，无需额外JS处理，但只适用于iframe需要全屏的场景。

注意事项 #

• 跨域场景下务必验证event.origin，避免接收恶意消息；
• resize事件建议添加防抖，减少性能损耗；
• 如果iframe页面有自己的resize逻辑，注意避免冲突。

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