将未解释的 HTML 代码显示到 html iframe 中答案

【问题标题】：Displaying uninterpreted HTML code into a html iframe将未解释的 HTML 代码显示到 html iframe 中
【发布时间】：2013-05-30 15:05:41
【问题描述】：

我想在 iframe 中显示带有 CR 和制表符的文本（假设代码位于 var shtml 中）而不丢失 ASCII 字符。

<!--var shtml-->
<HEAD>
</HEAD>
<BODY style="FONT-SIZE: 12.5pt">
   mmm
</BODY>

我的 iframe

<iframe rows="5" cols="60" id="tahtml">
</iframe >

我的 JS

document.getElementById('tahtml').textContent = shtml; //innerText = shtml;

如果我使用 .innerText，那么代码（shtml）会在 Firefox 中解释。如果我使用 .textContent ，则代码（shtml）将不显示 ASCII 字符。 jQuery .text() 与 .textContent 相同。

【问题讨论】：

标签： javascript html ascii

【解决方案1】：

就像<input> 一样，<textarea> 的 DOM 接口 (HTMLTextAreaElement) 有一个 value 属性，看来您想将此属性设置为 shtml。

document.getElementById('tahtml').value = shtml;

Demo

对于<iframe>，为其中加载的页面创建MIME text/plain。这可以通过例如获取一个空的.txt 或将src 设置为data:text/pain, 来完成。然后您可以执行以下操作

// don't collapse whitespace, only needed to be done once
ifrmDoc.documentElement.style.whiteSpace = 'pre';
// set text
ifrmDoc.documentElement.innerHTML = shtml;

在哪里

var ifrm = document.getElementById('tahtml'),
    ifrmDoc = ifrm.contentDocument || ifrm.contentWindow.document;

当然，你也可以这样做

将整个内容编写为 dataURI 并将其作为 src
ifrm.src = 'data:text/pain,' + window.encodeURIComponent(shtml);
使用 DOM 方法和文本节点附加文本
ifrmDoc.body.appendChild(ifrmDoc.createTextNode(shtml))
（这仍然需要whiteSpace: pre;）
在<iframe> 中创建<textarea> 或<pre>，将shtml 分别作为值或文本节点放入其中。

【讨论】：

对此很抱歉，但我认为使用 textarea 会更简单。我有一个 iframe。
请尝试提出您将来真正想回答的问题。