如何根据用户点击的不同按钮打开对应差异化样式的页面？

核心思路是通过window.open返回的新窗口对象，监听它的load事件，触发后直接操作新窗口的DOM或者注入样式/脚本，完全不需要多份静态HTML文件。

完整可运行示例代码 #

主页面代码 #

<button id="btn-style1">打开样式1页面</button>
<button id="btn-style2">打开样式2页面</button>

<script>
// 公共的新页面基础内容，可根据需求调整模板内容
const basePageContent = `
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>动态生成页面</title>
</head>
<body>
  <div class="container">
    <h1>公共页面内容</h1>
    <p>这段内容在两个打开的页面里完全相同，只有样式不同</p>
  </div>
</body>
</html>
`

// 按钮1点击逻辑
document.getElementById('btn-style1').addEventListener('click', () => {
  // 打开空白新窗口
  const newWin = window.open('', '_blank')
  // 写入基础HTML内容
  newWin.document.write(basePageContent)
  newWin.document.close()
  
  // 监听新窗口加载完成事件
  newWin.addEventListener('load', () => {
    // 直接修改元素样式
    newWin.document.body.style.backgroundColor = '#f0f9ff'
    newWin.document.querySelector('h1').style.color = '#1e40af'
    // 批量注入样式表
    const style = newWin.document.createElement('style')
    style.textContent = `
      .container {
        max-width: 800px;
        margin: 2rem auto;
        padding: 2rem;
        border: 2px solid #3b82f6;
        border-radius: 8px;
      }
    `
    newWin.document.head.appendChild(style)
  })
})

// 按钮2点击逻辑，仅修改样式部分即可
document.getElementById('btn-style2').addEventListener('click', () => {
  const newWin = window.open('', '_blank')
  newWin.document.write(basePageContent)
  newWin.document.close()
  
  newWin.addEventListener('load', () => {
    newWin.document.body.style.backgroundColor = '#fef2f2'
    newWin.document.querySelector('h1').style.color = '#991b1b'
    const style = newWin.document.createElement('style')
    style.textContent = `
      .container {
        max-width: 800px;
        margin: 2rem auto;
        padding: 2rem;
        border: 2px solid #ef4444;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }
    `
    newWin.document.head.appendChild(style)
  })
})
</script>

注意事项 #

• 如果你的新页面是加载的同域下现有HTML文件，不需要用document.write，直接监听load事件操作DOM即可，只要满足同域政策就不会有跨域限制
• 如果需要在新页面执行复杂逻辑，也可以直接注入script标签到新窗口的DOM中，调用提前定义好的函数
• 不要在document.close之前操作DOM，确保基础内容已经写入完成再修改样式

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