如何在同一HTML区块中同时展示预览界面与代码界面？

想要实现的效果 #

• 组件示例支持视觉渲染预览和完整代码查看两种状态，点击按钮可在同一窗口切换，而非展开下方div
• 代码区块需包含从<!DOCTYPE>到<footer>的全部页面代码

目前尝试 #

已实现简化版的切换逻辑，但仅支持局部代码；尝试iframe方案未得到满意结果，现有代码如下：

现有实现代码 #

JavaScript

var html = $('#code .frame').text();
$('#preview .frame').html(html);

$('#codeBtn').on('click',function(){
    $('#preview').hide();
    $('#code').show();
})

CSS

#code{
  display:none
}

HTML

<button id="codeBtn">grab the code</button>

<div id="preview">
 <div class="frame"></div>
</div>

<div id="code">
  <div class="frame">
    <p>hello world</p>
  </div>
</div>

核心思路 #

用iframe承载完整页面的视觉预览，同时准备带语法高亮的代码区块，通过切换CSS类控制两者的显示状态，既保证预览是完整页面效果，又能展示全部源码。

完整实现代码 #

HTML

<button id="toggleBtn">切换到代码</button>

<div class="container preview-active">
  <!-- 预览区域：加载完整组件页面 -->
  <iframe id="previewFrame" src="./component-full-page.html" frameborder="0"></iframe>
  <!-- 代码区域：预存完整页面源码 -->
  <pre id="codeBlock"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;组件完整页面&lt;/title&gt;
    &lt;link rel="stylesheet" href="./styles.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="demo-component"&gt;
        &lt;p&gt;这是组件的完整渲染内容&lt;/p&gt;
    &lt;/div&gt;
    &lt;footer&gt;页面底部内容&lt;/footer&gt;
    &lt;script src="./script.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>

CSS

.container {
  width: 100%;
  height: 500px;
  position: relative;
  border: 1px solid #eee;
}

#previewFrame, #codeBlock {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

#previewFrame {
  display: block;
}

#codeBlock {
  display: none;
  background: #f8f8f8;
  overflow: auto;
  padding: 1.5rem;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
}

/* 切换状态控制 */
.container.code-active #previewFrame {
  display: none;
}
.container.code-active #codeBlock {
  display: block;
}

JavaScript

const toggleBtn = document.getElementById('toggleBtn');
const container = document.querySelector('.container');

toggleBtn.addEventListener('click', () => {
  container.classList.toggle('preview-active');
  container.classList.toggle('code-active');
  toggleBtn.textContent = container.classList.contains('preview-active') ? '切换到代码' : '切换到预览';
});

优化补充 #

1. 语法高亮：可引入Prism.js等库优化代码可读性，只需添加对应语言类并引入库的CSS/JS文件
2. 源码复用：可通过JS动态读取iframe对应的页面源码，避免手动重复编写代码区块内容
3. 响应式适配：可根据窗口尺寸动态调整容器高度，保证不同设备下的展示效果

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