如何在不改变页面宽度时模拟600px宽获取页面高度

要在不改变当前页面可见状态的前提下，获取600px宽度下的页面高度，核心思路是创建一个完全隐藏的独立模拟环境，还原当前页面的内容与样式，设置固定宽度后计算高度。以下是两种可行的修改方案：

方案一：克隆页面内容到隐藏容器（轻量型） #

这种方式直接克隆当前页面的HTML结构，无需额外加载资源，执行效率更高：

$(window).on('load', function(){
  // 创建绝对定位到视野外的隐藏容器，确保不影响页面显示
  const mockContainer = $('<div>').css({
    position: 'absolute',
    left: '-9999px',
    top: '-9999px',
    width: '600px',
    visibility: 'hidden',
    overflow: 'hidden'
  }).appendTo('body');

  // 克隆当前页面的完整HTML结构
  const clonedHtml = $('html').clone();
  // 移除克隆内容中的脚本，避免重复执行原页面逻辑
  clonedHtml.find('script').remove();
  // 将克隆内容放入隐藏容器
  mockContainer.append(clonedHtml);

  // 等待容器内的图片、样式等资源加载完成，保证高度计算准确
  mockContainer.find('img, link').on('load', function(){
    const mockPageHeight = mockContainer.find('html').height();
    console.log("600px宽度下的页面高度: " + mockPageHeight + "px");
    
    // 计算完成后清理容器，释放资源
    mockContainer.remove();
  });
});

方案二：使用iframe创建独立模拟环境（更接近真实渲染） #

iframe会创建一个完全独立的浏览器环境，渲染逻辑和真实窗口一致，适合依赖复杂浏览器特性的场景：

$(window).on('load', function(){
  // 创建隐藏的iframe容器
  const mockIframe = $('<iframe>').css({
    position: 'absolute',
    left: '-9999px',
    top: '-9999px',
    width: '600px',
    border: 'none',
    visibility: 'hidden'
  }).appendTo('body');

  // 等待iframe初始化完成后写入页面内容
  mockIframe.on('load', function(){
    const iframeDoc = mockIframe.contents();
    // 将当前页面的HTML内容写入iframe
    iframeDoc.find('html').html($('html').html());
    
    // 等待iframe内的资源加载完成后计算高度
    iframeDoc.find('img, link').on('load', function(){
      const mockPageHeight = iframeDoc.find('html').height();
      console.log("600px宽度下的页面高度: " + mockPageHeight + "px");
      // 清理iframe
      mockIframe.remove();
    });
  });
});

关键注意点 #

• 必须等待资源加载完成后再计算高度：图片、字体等资源会影响页面布局，和原脚本的window.onload逻辑保持一致才能得到准确结果。
• 清理模拟容器：计算完成后及时移除隐藏容器，避免占用不必要的DOM资源。
• 移除克隆内容中的脚本：防止原页面的JS逻辑在模拟环境中重复执行，引发冲突。

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