如何修复：当 javascript 更改 DOM 时，iOS 会丢弃 CSS 文件答案

【问题标题】：How to Fix: iOS drops CSS files when javascript changes DOM如何修复：当 javascript 更改 DOM 时，iOS 会丢弃 CSS 文件
【发布时间】：2012-09-06 23:28:20
【问题描述】：

当我使用 innerHTML、appendChild 和 removeChild 更改文档时，我在 iOS 中遇到了一个持续存在的问题，我的 CSS 声明被完全剥离，我得到了页面的无样式版本。

经过几个小时的谷歌搜索后，我无法找到任何东西，甚至远程接近这个。尽管我只在 Android Galaxy s2 和 iPad 2 上进行了测试，但我无法在其他移动设备上重现该问题。

我知道这不是专门的 safari，因为我已经在 PC 上测试了所有主要浏览器，并且 CSS 加载完全正常。这似乎与 iOS 的 javascript 实现有关。

这是我录制的关于该问题的视频（2 分钟长）：
http://www.facebook.com/photo.php?v=4573014247189

编辑：我已经能够使用最低限度的行为在实时站点上复制它。
http://mlkart.com/ios_bug

编辑：发现问题，目前正在寻找替代方案，将在找到解决方案后发布，但这是 iOS 中出现问题的原因：

document.documentElement.innerHTML = document.documentElement.innerHTML.replace(oldStuff, newStuff);

最终发生的事情是身体标签之外的所有内容都被错误地剥离了。这可能是一个 iOS javascript 错误或只是一个怪癖，但据我所知，这应该是一个有效的选择器！

【问题讨论】：

我之前在 iOS 上做过类似的工作，但在 UIWebView 中，而不是移动 safari。在我的例子中，CSS 嵌入在页面中。
我正在使用典型的方法将我的外部 CSS 包含到页面中，尽管该代码在页面之间永远不会更改，因此它停止在这些页面上工作的原因超出了我。
@John Conde：这与移动 Safari 无关，因为我也在 iPad 2 的 Mercury 浏览器上进行了测试，问题也存在。

标签： javascript css ios dom innerhtml

【解决方案1】：

你为什么不在 w3c http://validator.w3.org/#validate_by_input 中验证你的 html 有时当 html 出现错误时，一些浏览器会更正错误而其他浏览器不会。

根据浏览器的不同，javascript 也可以以不同的方式工作。一旦我有一个完美的 jQuery 代码在 fireFox 而不是在 IE 中。错误是我取了一个元素的宽度，但最初这个元素没有宽度，所以对于 IE 它是 0，对于 fireFox 它取决于这个里面的元素。

尝试在您 PC 的 safari 中对其进行测试。

【讨论】：

感谢您的回复，但正如我在原始帖子中所说，我已经在我的 PC 上的所有主要浏览器中进行了测试，包括 Safari。

【解决方案2】：

在 iOS 中，关于“documentElement”的 javascript 函数实现存在问题。在 iOS 环境中使用此代码会破坏您的网站，但我不知道这个问题是在 Oracle 方面还是在 Apple 方面。

document.documentElement.innerHTML = document.documentElement.innerHTML.replace(oldStuff, newStuff);

这已经删除了我在 iOS 中的 HTML 文档中的 body 标签之外的所有内容。

我接受的解决方案是替换所有出现的

document.documentElement.innerHTML

与

document.body.innerHTML

解决方案已经过测试，并且在我可以访问的所有现代可用测试途径中都有效。

【讨论】：