PrimeFaces 页面在更新包含 JS“document.write”的元素时“挂起”答案

【问题标题】：PrimeFaces page "hangs" on update of element containing JS "document.write"PrimeFaces 页面在更新包含 JS“document.write”的元素时“挂起”
【发布时间】：2016-03-01 19:37:48
【问题描述】：

为什么 PrimeFaces 命令按钮不能更新包含 JavaScript <script>document.write("some text")</script> 元素的元素？浏览器在更新此类元素时“挂起”。

例如：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

    <h:head>
        <title>my page</title>
    </h:head>

    <h:body>
        <h:form>
            <p:commandButton
                id="pushMeButton"
                value="push me"
                update="testPanel"
                action="#{myManagedBean.doNothing()}">
            </p:commandButton>
        </h:form>

        <p:panel id="testPanel">
            <script>
                document.write("test text 1");
            </script>
            <script>
                document.write("test text 2");
            </script>

           <h:outputText value="#{myManagedBean.getSomeText()}" />
        </p:panel>
    </h:body>
</html>

按下“pushMeButton”后，浏览器只显示带有“test text 1”和“hangs”文本的空白页面（firefox 选项卡中的图标显示该页面仍在无限期加载，但 firebug 中没有活动请求）。

按下按钮后浏览器收到的部分响应看起来正确：

<partial-response id="j_id1">
    <changes>
        <update id="testPanel">
            <![CDATA[
            <div id="testPanel" class="ui-panel ui-widget ui-widget-content ui-corner-all" data-widget="widget_testPanel">
                <div id="testPanel_content" class="ui-panel-content ui-widget-content">
                    <script>
                        document.write("test text 1");
                    </script>
                    <script>
                        document.write("test text 2");
                    </script>
                    some text from managed bean method getSomeText()
                </div>
            </div>
            <script id="testPanel_s" type="text/javascript">
                PrimeFaces.cw("Panel","widget_testPanel",{id:"testPanel",widgetVar:"widget_testPanel"});
            </script>
            ]]>
        </update>
        <update id="j_id1:javax.faces.ViewState:0"><![CDATA[1747871418605077113:5684199653317714547]]></update>
    </changes>
</partial-response>

我正在使用 PrimeFaces：5.2.5 和 Mojarra：2.2.8

我可以在 Firefox v44.0.2 和 IE v11 上重现行为，但在 Chrome v48 上一切正常（显示相同的页面没有更改）。

上面介绍的 xhtml sniped 只是我正在解决的问题的简化版本。我使用“document.write”是因为我的 Web 应用程序从遗留系统“导入”了一些无法更改的 HTML 部分（我从 Liferay 门户导入菜单）。如果我将“document.write”更改为其他内容，例如document.getElementById('someExistingElementId').innerHTML = 'New text';，一切正常。

看起来像 BalusC 的评论 “我想我看到了根本原因。不幸的是，当使用 document.write() 替换 DOM 时，IE6/7/8 没有运行嵌入式脚本” em> (http://forum.primefaces.org/viewtopic.php?f=3&t=18937&start=20) 与我的问题有关，但我不明白为什么它不起作用以及是否可以使其在现代浏览器上运行。

【问题讨论】：

我不确定我是否理解您的问题。在您的示例中，脚本中没有要更新的内容。此外，commandButton 不会调用 bean 中的任何操作。如果您使代码更接近您实际拥有的内容，它可能会更有用。
我更新了我的示例：我添加了调用空托管 bean 方法的操作，并将 h:outputText 添加到我的面板并相应地更新了发布响应。

标签： javascript jsf primefaces jsf-2.2

【解决方案1】：

这个问题与 PrimeFaces 或 JSF 没有直接关系——它是 javascript 的工作原理。

"如果在HTML文档完全加载后使用，会删除所有现有的 HTML。” (http://www.w3schools.com/jsref/met_doc_write.asp)

我可以使用 HTML 和 JS 重现类似的情况：

<!DOCTYPE html>
<html>
    <body>    
        <p>Click the button to trigger a function</p>    
        <button onclick="myFunction()">Click me</button>
        <script>
            function myFunction() {
                document.write("test text 1");
            }
        </script>    
   </body>
</html>

部分更新更新已加载的文档 - 这就是单击按钮后仅显示“测试文本 1”的原因。因为在第一次执行<script>document.write("test text 1");<script> 之后，所有文档都会被覆盖。

Firefox“挂起”是因为“document.close”没有被调用（如果文档输出流没有打开“document.write”会打开它，所以需要关闭它）。

所以简历是：如果页面的那部分可以通过 ajax 调用进行更新，则不能在 JSF 页面中使用 document.write(...);。

在大多数情况下，应该在 JSF 页面中避免使用 document.write(...)，因为并不总是可以控制页面的哪一部分将被更新。例如 OmniFace FullAjaxExceptionHandler 会在异常后执行 update="@all"，所以错误页面不能有任何document.write(...) 语句。

【讨论】：