Include page with specific anchor - html

Question

I'am a beginner in jsf and I want to open an html page in a p:dialog.
When I use the <ui: include> to display the page like this:
<p:dialog header="Dialog"
widgetVar="dlg"
resizable="false"
dynamic="true"
fitViewport="true">
<ui:include src="/resources/md.html" />
</p:dialog>
it works with no problem, but when I want to open the page in a specific anchor like this:
<p:dialog header="Dialog"
widgetVar="dlg"
resizable="false"
dynamic="true"
fitViewport="true">
<ui:include src="/resources/md.html#anchor" />
</p:dialog>
it doesn't work.
Can somebody help please.

Answer 1

Your attempt fails because your md.html is statically included inside 'parent' jsf page. Therefore only parent jsf page can be used to achieve 'go to anchor' functionality.
To achieve what you want with an included page inside p:dialog, I would use simple java script.
JS
Add this JS function to your parent jsf page (page where dialog is defined)
function gotoAnchor(anchorID) {
document.getElementById(anchorID).scrollIntoView();
}
XHTML
Add onShow attribute on p:dialog like this
<p:dialog ... onShow="gotoAnchor('anchorID')" ...>
<ui:include src="/resources/md.html" />
</p:dialog>
where anchorID is id of your anchor element inside md.html (in your example, its value is 'anchor').
On this way, when your p:dialog is shown, function gotoAnchor will be executed forcing page to scroll on required element.

Answer 2

This is another solution using iframe tag, it works perfectly:
<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>
No js need.