javascript - document.writeln() 破坏了我的 jQuery 部分更新。我该如何解决这个问题？

Question

在异步获取请求后，我无法将下面的 HTML 写入页面。 HTML 由第三方图表服务提供，因此我无法自己修改它，除非在 $.get() 之后收到响应。

我不久前问过以下问题:Why is this HTML causing the page to go blank 。答案是:

"document.write after the page has fully rendered ... will create a new document"

因此，我是否可以将 document.writeln() 函数替换为 jQuery 函数，该函数将在 thd DOM 中包含 HTML？如果是这样，我需要做什么？

这是查找和替换的情况吗？或者它会起作用吗？还有其他方法可以解决这个问题吗？

<!-- Chart by Corda Enterprise Server (PopChart, Highwire) Version 7.2.3.3177 (Jun 11, 2008) .NET Embedder 7.1.0.2116 -->

<script type="text/javascript">
    var put2087644907Props;
    var put1181439927Props;
    var put433403842Props;

    function getImageMap1325059360() {
        put2087644907Props = new PopUpProperties;
        put2087644907Props.width = 400;
        // lots more of these properties being set 


        // not sure exactly, but this has something to do with providing hover-over functionality
        document.writeln('<map name="imVB_2wFC_WSdl" id="imVB_2wFC_WSdl"><area shape="poly" coords="540,52,547,52,547,59,540,59,540,52" onmouseover="return showPopUp ? showPopUp(put2087644907Props, \'VB_2wFC_WSdl\', \'Schroder All Mats Idx Lnkd Bd I Acc 2.58%\', 543, 49) : false;"/> /* big long string */ onmouseover="return hidePopUp ? hidePopUp() : false;"/></map>');
    }
</script>
<script type="text/javascript">

    document.writeln('<script type="text/javascript" src="http://ie-sv-corda72:2001/?jsPopUp"></scr'+'ipt>');

    if(document.layers) getImageMap1325059360();

</script>
<img id="VB_2wFC_WSdl" name="VB_2wFC_WSdl" width="570" height="243" style="border: 0;"
    usemap="#imVB_2wFC_WSdl" src="http://ie-sv-corda72:2001/?@_CPRVB_2wFC_WSdl" />
<script type="text/javascript">
    if (!document.layers) getImageMap1325059360();
</script>
<noscript>
    <map name="imVB_2wFC_WSdl" id="imVB_2wFC_WSdl">
        <area shape="poly" coords="540,52,547,52,547,59,540,59,540,52" alt="Schroder All Mats Idx Lnkd Bd I Acc 2.58%" />
        <area shape="poly" coords="497,41,504,41,504,48,497,48,497,41" alt="Schroder All Mats Idx Lnkd Bd I Acc 3.27%" />
        <%--lots of these area elements which gives the chart hover-text functionality--%>
    </map>
</noscript>

<!-- Corda Enterprise Server (PopChart, Highwire) Version 7.2.3.3177 (Jun 11, 2008) .NET Embedder 7.1.0.2116 by corda.com -->

作为引用，这是执行 get 的代码:

$.get(url, {}, function (result) {

    $('#FactsheetTabs .tab_container').fadeOut(100, function () {
        $('#tabs')
            .append(result) // this fails in FireFox & chrome, but not IE... why?!
            .fadeIn(100);
    });
}, 'html');

如果我编辑响应以注释掉 document.writeln() 代码，如下所示，它会起作用:

$.get(url, {}, function (result) {

    $('#FactsheetTabs .tab_container').fadeOut(100, function () {
        result = result.replace("document.writeln", "//document.writeln");
        result = result.replace("document.writeln", "//document.writeln");
        $('#tabs')
            .append(result) // this works now...
            .fadeIn(100);
    });
}, 'html');

Answer 1

您可以使用自己的函数重写 document.writeln() 函数，这样可以安全地将 html 附加到 DOM，而不会破坏它。例如:

document.writeln = function (html) {
    $(document.body).append(html);
}

另一个选项与您的替换方法接近，但不是添加注释分隔符，而是用您自己的方法替换 document.write:

result = result.replace(/document\.writeln/g, "$(document.body).append");