如何在HTML的iframe中美化服务器返回的JSON内容？

没问题，我来帮你搞定这个JSON格式化的需求！首先得明确一个关键点：CSS没办法单独实现JSON的结构化格式化——它只能处理文本样式，没法解析JSON的层级结构来自动换行和缩进，所以咱们得靠JavaScript或者服务器端来解决。

前端JavaScript方案（同域场景） #

如果你的iframe和主页面是同域名的（同源策略允许访问iframe内容），可以通过监听iframe的加载事件，获取里面的原始JSON文本，再用JSON.stringify()来格式化，最后替换成带格式的内容。

具体实现步骤： #

1. 给iframe添加一个ID方便获取元素：

<iframe id="jsonResult" name="json_result" src="" onload="formatJsonInIframe()"></iframe>

2. 编写格式化函数：

function formatJsonInIframe() {
  const iframe = document.getElementById('jsonResult');
  // 获取iframe的文档对象
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  // 提取原始JSON文本
  let rawJson = iframeDoc.body.textContent.trim();

  try {
    // 解析JSON为对象，再重新格式化（第二个参数为null，第三个参数是缩进空格数）
    const jsonObj = JSON.parse(rawJson);
    const formattedJson = JSON.stringify(jsonObj, null, 2);
    
    // 替换iframe内容为带pre标签的格式化文本，添加基础样式提升可读性
    iframeDoc.body.innerHTML = `
      <pre style="white-space: pre-wrap; font-family: monospace; padding: 1.5rem; background: #f8f9fa; border-radius: 4px;">
        ${formattedJson}
      </pre>
    `;
  } catch (error) {
    // 处理JSON解析失败的情况，提示错误并保留原始内容
    iframeDoc.body.innerHTML = `
      <pre style="color: #dc3545; font-family: monospace; padding: 1.5rem; background: #fff5f5; border-radius: 4px;">
        无效JSON格式：${error.message}\n\n原始内容：\n${rawJson}
      </pre>
    `;
  }
}

这个方案的效果和Firefox新标签页的JSON格式化几乎一致——会自动根据层级缩进，换行显示每个键值对，同时通过pre标签保留所有格式。

可选：搭配语法高亮（比如google/code-prettify） #

如果你想在格式化的基础上添加语法高亮，可以结合code-prettify工具：

1. 先完成上面的格式化步骤，把内容放到<pre class="prettyprint"><code>${formattedJson}</code></pre>标签中
2. 引入code-prettify的脚本和样式后，调用prettyPrint()方法，就能实现类似浏览器的彩色高亮效果。

跨域场景的解决方案 #

如果你的iframe加载的是不同域名的JSON（同源策略限制无法读取iframe内容），那前端方案就失效了，这时候需要从服务器端处理：

• 修改服务器的响应逻辑，返回JSON时先进行格式化（比如后端语言自带的JSON格式化方法，比如Python的json.dumps(obj, indent=2)）
• 或者让服务器返回HTML格式的响应，把格式化后的JSON放到<pre>标签里，这样iframe直接就能显示带格式的内容。

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