在 Chrome 中，innerHTML 不能与 xhtml 一起正常工作答案

【问题标题】：innerHTML doesn't work correctly with xhtml in Chrome在 Chrome 中，innerHTML 不能与 xhtml 一起正常工作
【发布时间】：2011-03-04 02:39:37
【问题描述】：

Chrome5.0.375.70 有问题，但 FF 3.6.3 和 Opera 10.53 都可以。下面是这行代码：

document.getElementById('content').innerHTML = data.documentElement.innerHTML;

代码中的 data 对象是一个文档 (typeof(data) == 'object')，我通过对 chapter01.xhtml 的 ajax 请求获得了它：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html [
<!ENTITY D "&#x2014;">
<!ENTITY o "&#x2018;">
<!ENTITY c "&#x2019;">
<!ENTITY O "&#x201C;">
<!ENTITY C "&#x201D;">
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Alice's Adventures in Wonderland by Lewis Carroll. Chapter I: Down the Rabbit-Hole</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="application/vnd.adobe-page-template+xml" href="page-template.xpgt"/>
</head>
<body>
<div class="title_box">
<h2 class="chapnum">Chapter I</h2>
<h2 class="chaptitle">Down the Rabbit-Hole</h2>
<hr/>
</div>

Chrome 剪切所有正文之前和结果链接到标题中的css是错过;用户看不到格式化的文本和图像。

如何修复或绕过？

附：我尝试将 chapter01.xhtml 放入 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

包含的 div 中

【问题讨论】：

您使用的是 HTML5 文档类型，但您说它是 XHTML。您是否真的想将完整的<html>...</html> 正文粘贴到另一个文档的中间？如果你检查你的 XHTML DTD，你会发现你不能这样做......
我尝试将 chapter01.xhtml 放入 ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">。我在哪里可以查看您指出的信息？（因为我不擅长）
您是否尝试像这样“嵌套”HTML 文档：<html><body><div><html><body></body></html></div></body></html>？因为那是不允许的
是的。问题是它可以在 FF 和 Opera 中运行。在哪里/如何检查限制？
这与其说是一种限制，不如说是能够从错误中恢复的不同级别。不要一开始就犯错误。

标签： javascript ajax xhtml innerhtml

【解决方案1】：

.innerHTHML 是非标准，是一种不好的做法，并且依赖于浏览器实现，不应使用。尤其是 XHTML，它不受支持。

【讨论】：

@lark - 该部分是特定于 HTML 的，它证明了@fuzzy 的观点。
正确，它是“标准化”的，无论在 HTML 上的 w3c 中意味着什么。我只是对为什么应该避免使用 innerHTML 感到困惑。您可能听说过的流行框架 jQuery 非常广泛地使用它。诚然，网络中的任何事情都有时间和地点，但不鼓励使用 innerHTML 对我来说是陌生的。
仅仅因为 jQuery 使用了一些东西并不会自动使它成为一个好主意。
你们是否愿意详细说明您的回复。蒂姆，当然不是一切 jQuery 所做的都是一个好主意，它显然有错误......但是你是否愿意扩展使用它可能导致的任何可能的错误？同样模糊，您声称它是一种短视的专有东西，但您没有任何证据支持您声称使用它是一个坏主意的说法。在大多数情况下，它是加载外部内容的唯一高效方式。

【解决方案2】：

我有类似的情况，我想过滤 DOM 元素，我发现最好的方法是混合使用 DOMParser 和 XmlSerializer，在这里找到：

http://www.hiteshagrawal.com/javascript/convert-xml-document-to-string-in-javascript

这是一种合理的跨浏览器方式。

编辑：更详细地说，您可以将 html 字符串加载到 DOMParser 并能够像往常一样使用 DOMDocument，然后您可以使用 XmlSerializer 或 IE 等效项来抽出新标记。

【讨论】：

其实我有两种数据对象：第一种是文档，第二种是字符串（如“
”）。我通过一个技巧（jQuery）处理的第二个： var hiddendiv = $('
'); hiddendiv.html(数据); $('#content').html(hiddendiv.html());这个技巧很好用，但是第一个（文档）有点不可控。
如果您将该内容设置在 div 中，您将一无所获。因为“大多数”浏览器实现会去掉、和标签。我建议像我建议的那样使用 DOMDocument。
感谢您的回答。这似乎有点复杂，但我会研究这个想法。