包含具有特定锚点的页面

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

这是使用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。

Answer 2

您的尝试失败了，因为您的md.html被静态地包含在‘父’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是md.html中锚元素的id (在您的示例中，它的值是‘锚’)。

这样，当显示p:dialog时，函数gotoAnchor将被执行，迫使页面在必需的元素上滚动。