替换 xhtml+xml 页面中的 document.write()

Question

我在一家编写软件的公司工作，该软件的客户端站点嵌入了 < script language="JavaScript" src=..... 等等。我们很大程度上依赖 document.write 将元素写入页面。我们的一位客户出于某种原因选择使用内容类型“application/xhtml+xml”，这使得 document.write() 在 Chrome 中无法使用。

我明白为什么会这样，并且符合 DOM 的代码应该创建每个元素，设置其属性，如果需要，用文本节点填充它，将文本节点附加到其父级，并将父级附加到某个页面元素......

但是什么是一个不需要所有这些垃圾的好解决方法？其中的 write() 包含如此多的元素，如果我们制作节点并将它们像 Knex 或乐高积木或其他什么东西一样固定在一起，那么生成的代码将非常丑陋。

编辑：尝试使用 CDATA，但即使是这一行也受到与我们的脚本嵌入相同的页面上的 xhtml 解析器的类似谴责：

<script language="text/javascript"><![CDATA[document.write('hi');]]></script>

Answer 1

var el = document.createElement('div');
el.innerHTML = 'What you used to document.write()';
document.body.appendChild(el);

请注意，您需要将 HTML 修复为有效的 XHTML，但这比将所有代码转换为使用 DOM 操作要少得多。

Answer 2

也许您可以创建一个 text/html 类型的 iframe，将内容写入其中，然后将节点导入回主页。

Answer 3

我们一直在使用 Jquery 并设置超时来重写与您的类似组织提供给我们的代码。以下是 Search Ignite 中的一个示例：

<script>
<!--
// once all the page has loaded
$(document).ready(function ()
    {
        // wait a bit so everything else that runs when the page has loaded loads, then...
        setTimeout(function ()
        {
            // ...load the tracking stuff
            var headerTag = document.getElementsByTagName('head')[0];
            var seo_tag = $.createElement(document.location.protocol + "//track.searchignite.com/si/CM/Tracking/ClickTracking.aspx?siclientid=123456&jscript=1", "script");
            headerTag.appendChild(seo_tag);

        }, 20);
    });
// -->
</script>

超时还有一个额外的好处，可以让我们的页面在用户浏览器加载外部代码之前响应用户，如果外部供应商的服务器出现故障，这非常有用。是的，我们丢失了一些跟踪统计数据，但用户体验并没有受到影响。

显然，您将无法依赖 JQuery，但您已经了解了总体思路。