Question

我的页面布局（带Primefaces）有一个西，北和中心布局面板，其中包含所有内容。中心布局包括一个iframe，每次选择菜单选项时（在西面板上），只更新中心内容（使用Ajax）。

在页面渲染/加载时，我想在其他一个面板上显示“加载gif”。我使用了以下代码：

xhtml段

 <p:ajaxStatus style="width:32px; height:32px;" id="ajaxStatusPanel">
            <f:facet name="start">
                <p:graphicImage value="/resources/img/progress.gif" />
            </f:facet>

            <f:facet name="complete">
                <h:outputText value="" />
            </f:facet>
    </p:ajaxStatus>

但是这会在ajax请求结束后立即显示加载器。但是页面加载/渲染可能需要更长的时间。有没有办法提供“页面呈现”回调？

Answer 1

当您在iframe内实际加载内容时，可以通过在页面中添加一些javascript来解决此问题，尤其是onload事件处理程序。

例如：

<iframe id="navigation" src="#{layout.navigation}" onload="hideDialog()"
style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 100%; height: 100%; border: none; margin: 0; padding: 0; overflow: hidden; z-index: 999999;">
</iframe>

当hideDialog()内的内容加载完毕后，上面的代码将导致iframe函数被执行。

您调用的函数（例如hideDialog()）可以包含对JSF / primefaces生成的对话框的引用并隐藏它。

<script>
function hideDialog()
{
if(statusDialog != undefined)
statusDialog.hide();
}
</script>

您可能需要在生成的html + javascript中进行一些搜索，以找到要使用的确切名称/ ID（以获取对话框的引用）。

JSF / Primefaces AJAX页面呈现回调

1 个答案: