React组件中Iframe将换行符\n渲染为单个空格的问题求解

方案1：修改iframe内部文档样式（推荐） #

iframe是独立的文档上下文，父页面定义的iframe元素样式无法作用到iframe内部的内容，需要直接在iframe内部声明样式规则，示例代码如下：

import { useRef } from 'react';

const CodeOutput = () => {
  const iframeRef = useRef(null);

  const renderCompileOutput = (outputStr) => {
    const iframe = iframeRef.current;
    // 获取iframe内部文档对象
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    // 清空iframe原有内容
    iframeDoc.open();
    // 写入样式和输出内容
    iframeDoc.write(`
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body {
          padding: 10px;
          font-family: monospace;
          /* 保留换行和空格，同时自动换行 */
          white-space: pre-wrap;
          word-break: break-all;
        }
      </style>
    `);
    // 直接写入原始输出内容即可保留换行
    iframeDoc.write(outputStr);
    iframeDoc.close();
  };

  return <iframe ref={iframeRef} className="iFrame" title="code-output" />
};

方案2：预处理输出字符串 #

如果不想修改iframe内部样式，也可以直接把输出内容中的换行符转换为HTML可识别的<br>标签：

// JDoodle返回的\n是实际的换行控制字符，直接匹配即可，不需要转义反斜杠
const formattedOutput = outputStr.replaceAll('\n', '<br>');
// 后续直接将formattedOutput写入iframe的body即可

之前方案失效原因说明 #

• 给iframe元素添加white-space: pre-wrap无效：父页面的CSS无法穿透到iframe内部的DOM节点，样式规则必须写在iframe内部的<style>标签中才能生效。
• 替换\n为\\n无效：该操作会把换行控制符转换为\+n的字面量字符串，HTML不会识别为换行，反而会直接展示\n字符。

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