包含具有特定锚点的页面

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页面来实现'go to anchor'功能。

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

JS

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

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

XHTML

像这样在 p:dialog 上添加 onShow 属性

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

其中 anchorID 是 md.html 内锚元素的 id（在您的示例中，它的值为 '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。

包含具有特定锚点的页面

Include page with specific anchor

html

user-interface

jsf

primefaces

xhtml