如何将HTML内容复制到新标签页？输入框内容同步方案求助

你遇到的核心问题是：输入框的用户输入属于DOM的动态状态，不会被innerHTML捕获（innerHTML只返回元素初始的HTML结构）。下面提供两种可行的解决思路：

方案一：手动同步输入值到元素属性后生成HTML #

先遍历目标div内的所有输入元素，将用户输入的动态值同步到对应的HTML属性中，再生成完整的HTML内容创建Blob打开新标签页。

function copyDivToNewTab(divId) {
  const targetDiv = document.getElementById(divId);
  
  // 同步输入元素的动态值到属性
  const inputs = targetDiv.querySelectorAll('input, textarea, select');
  inputs.forEach(el => {
    switch(el.tagName) {
      case 'INPUT':
      case 'SELECT':
        el.setAttribute('value', el.value);
        break;
      case 'TEXTAREA':
        el.textContent = el.value;
        break;
    }
  });

  // 构建完整的HTML文档
  const fullHtml = `
<!DOCTYPE html>
<html>
<head>
  <title>复制内容</title>
  <!-- 引入原页面的内联样式 -->
  <style>${document.querySelector('style')?.textContent || ''}</style>
</head>
<body>
  ${targetDiv.innerHTML}
</body>
</html>
  `;

  // 创建Blob并打开新标签页
  const blob = new Blob([fullHtml], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  window.open(url);
  
  // 延迟释放URL，避免内存泄漏
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

方案二：克隆完整DOM节点（推荐） #

直接克隆目标div的整个DOM节点（深克隆），这种方式会自动保留所有元素的当前状态（包括输入值、选中状态等），无需手动同步属性，更健壮。

function copyDivToNewTab(divId) {
  const targetDiv = document.getElementById(divId);
  // 深克隆目标div，保留所有状态
  const clonedDiv = targetDiv.cloneNode(true);

  // 创建新的HTML文档
  const newDoc = document.implementation.createHTMLDocument('复制内容');
  
  // 复制原页面的样式到新文档（内联样式+外部样式表）
  Array.from(document.querySelectorAll('style, link[rel="stylesheet"]')).forEach(style => {
    newDoc.head.appendChild(style.cloneNode(true));
  });

  // 将克隆的div添加到新文档
  newDoc.body.appendChild(clonedDiv);

  // 转换为HTML字符串并创建Blob
  const fullHtml = newDoc.documentElement.outerHTML;
  const blob = new Blob([fullHtml], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  
  window.open(url);
  setTimeout(() => URL.revokeObjectURL(url), 1000);
}

方案对比 #

• 方案一：代码简洁，适合简单场景，但需要手动处理各类输入元素，可能遗漏特殊元素（如contenteditable）。
• 方案二：自动保留所有DOM状态，无需额外处理元素类型，兼容性更好，推荐用于复杂场景。

注意事项 #

• 如果原页面依赖外部样式表，方案二中的link标签会被克隆，新标签页会自动加载这些样式，确保显示效果一致。
• 对于contenteditable元素，方案二的克隆节点也会保留其编辑后的内容，无需额外处理。
• 务必调用URL.revokeObjectURL释放创建的URL，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Armando Arias Castro