Include Seite mit spezifischen Anker

Question

Ich bin ein Anfänger in JSF und ich möchte eine HTML-Seite in einer p:dialog öffnen.
Wenn ich die <ui: include> die Seite wie folgt angezeigt:

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

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

</p:dialog> 

es ohne Probleme funktioniert, aber was ich will, ist zu tun, um die Seite in einem bestimmten Anker zu öffnen. Ich habe das versucht:

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

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

</p:dialog> 

und es funktioniert nicht.

Kann jemand bitte helfen.

Answer 1

Diese andere Lösung ist iframe tag verwenden, es funktioniert perfekt:

<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> 

Keine js Notwendigkeit.

Answer 2

Ihr Versuch schlägt fehl, weil Ihre md.html statisch in 'Eltern' Jsf-Seite enthalten ist. Daher kann nur die übergeordnete jsf-Seite verwendet werden, um 'go to anchor' Funktionalität zu erreichen.

Um zu erreichen, was Sie wollen mit einer enthaltenen Seite innerhalb p:dialog, würde ich einfache Java-Skript verwenden.

JS

Fügen Sie diese Funktion, um Ihre Mutter JSF Seite JS (Seite wo Dialog definiert ist)

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

XHTML

hinzufügen onShow Attribut auf p:dialog wie diese

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

wo AnchorID ist id von Ihrem Ankerelement innerhalb md.html (in Ihrem Beispiel ist der Wert "Anker").

Auf diese Weise, wenn Ihr p:dialog angezeigt wird, wird die Funktion gotoAnchor ausgeführt, die Seite zum Blättern auf dem erforderlichen Element erzwingt.