如何使用Javascript实现点击div后在新标签页打开其完整内容

该需求完全可以实现，以下是两种常用的原生前端实现方案：

方案1：动态生成新标签页（无需额外新建页面） #

直接在点击事件里克隆目标div的内容，写入新开的空白标签页，同时配置全屏样式即可，示例代码如下：

<!-- 原页面的目标div -->
<div id="targetDiv" style="width: 300px; height: 200px; background: url('你的背景图地址') center/cover no-repeat; border: 1px solid #eee; cursor: pointer;">
  <!-- div内部的其他内容 -->
  <p>这里是div里的其他展示内容</p>
</div>

<script>
const targetDiv = document.getElementById('targetDiv');
targetDiv.addEventListener('click', () => {
  // 打开新空白标签页
  const newTab = window.open('', '_blank');
  if (!newTab) {
    alert('请允许浏览器弹出窗口后重试');
    return;
  }
  // 克隆原div的完整节点（deep为true代表克隆所有子节点）
  const divContent = targetDiv.cloneNode(true);
  // 写入新页面基础结构和全屏适配样式
  newTab.document.write(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>全屏展示内容</title>
      <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { width: 100vw; height: 100vh; }
        #targetDiv { width: 100%; height: 100%; }
      </style>
    </head>
    <body></body>
    </html>
  `);
  // 把克隆的div插入新页面
  newTab.document.body.appendChild(divContent);
  newTab.document.close();
})
</script>

方案2：独立页面实现（适合复杂内容场景） #

如果你的div内容逻辑复杂、依赖很多全局样式，你可以提前开发一个专门的全屏展示页面，点击div时把需要的参数（比如背景图地址、内部内容参数）通过URL query携带，新标签页打开这个展示页后读取参数渲染内容即可，适配更复杂的场景。

注意事项 #

• window.open是在用户主动点击的交互事件中触发的，属于浏览器允许的弹出场景，绝大多数情况不会被拦截，若用户手动禁用了弹窗权限可以提示用户开启后重试
• 如果div内存在跨域资源（如跨域图片、字体），需要保证资源允许跨域访问，否则新标签页可能出现资源加载失败的问题

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