Question

我是jsf的初学者，我想在p:dialog打开一个html页面。
当我使用<ui: include>显示如下页面时：

<p:dialog  header="Dialog"  
           widgetVar="dlg"
           resizable="false" 
           dynamic="true"   
           fitViewport="true"> 

    <ui:include src="/resources/md.html" />

</p:dialog>

它没有问题，但是当我想在特定的锚点中打开页面时，这样：

<p:dialog header="Dialog"
          widgetVar="dlg" 
          resizable="false" 
          dynamic="true"   
          fitViewport="true">     

    <ui:include src="/resources/md.html#anchor" />

</p:dialog>

它没有用。

请有人帮忙。

Answer 1

您的尝试失败，因为您的md.html被静态包含在'parent'jsf页面中。因此，只有父jsf页面可用于实现'去锚'功能。

要使用p:dialog中包含的页面实现您想要的效果，我会使用简单的java脚本。

<强> JS

将此JS函数添加到父jsf页面（定义对话框的页面）

function gotoAnchor(anchorID) {
    document.getElementById(anchorID).scrollIntoView();
}

<强> XHTML

在onShow上添加p:dialog属性

<p:dialog ... onShow="gotoAnchor('anchorID')" ...> 
    <ui:include src="/resources/md.html" />
</p:dialog>

其中anchorID是id内锚元素的md.html（在您的示例中，其值为'anchor'）。

通过这种方式，当显示p:dialog时，将执行函数gotoAnchor，强制页面滚动所需的元素。

Answer 2

这是使用iframe tag的另一种解决方案，它完美无缺：

<p:commandLink value="iframe" onclick="PF('dlg').show()"   />


<p:dialog header="Dialog" widgetVar="dlg">         
<iframe height="500" width="800" src="/md.xhtml#anchor"></iframe>
</p:dialog>

没有js需要。

包含具有特定锚点的页面

2 个答案: