PrimeFaces Extensions Showcase

MarkText - Iframes

Demonstrates iframe-aware highlighting. The MarkText component can search inside same-origin iframe documents when iframes is enabled. Use iframesTimeout to control how long the search waits for frame content before continuing.

Search term:

Search iframes:

Timeout (ms):

Operational Guide with Embedded Policy Frame

This example searches both the parent document and a same-origin iframe. Enable iframes to include embedded frame content in the highlight result.

Parent Document Content

The compliance team reviews policy updates every sprint and tracks mandatory training tasks. A professional rollout plan should include communication, compliance checkpoints, and audit readiness.

Use the controls above to test search behavior when iframe scanning is enabled or disabled.

Embedded Policy Frame (Same Origin)

Source

XHTML page
Managed bean


                <h:panelGrid columns="7" cellpadding="6" style="margin-bottom: 12px;">
        <h:outputText value="Search term:"/>
        <p:inputText id="searchTerm" value="#{iframeMarkTextController.searchTerm}" placeholder="e.g. compliance">
            <p:ajax event="keyup" delay="500" update="searchArea markTextIframe"/>
        </p:inputText>

        <h:outputText value="Search iframes:"/>
        <p:selectBooleanCheckbox value="#{iframeMarkTextController.iframes}">
            <p:ajax update="searchArea markTextIframe"/>
        </p:selectBooleanCheckbox>

        <h:outputText value="Timeout (ms):"/>
        <p:inputNumber id="iframeTimeout" value="#{iframeMarkTextController.iframesTimeout}" minValue="0" decimalPlaces="0">
            <p:ajax event="blur" update="searchArea markTextIframe"/>
        </p:inputNumber>

        <p:commandButton value="Highlight" icon="pi pi-search" update="searchArea markTextIframe"/>
    </h:panelGrid>

    <p:panel id="searchArea" header="Operational Guide with Embedded Policy Frame">
        <p:messages id="iframeInfo" closable="true">
            <p:autoUpdate/>
        </p:messages>

        <p style="margin-top: 0;">
            This example searches both the parent document and a same-origin iframe.
            Enable <code>iframes</code> to include embedded frame content in the highlight result.
        </p>

        <h:panelGroup id="searchContent" layout="block">
            <h3>Parent Document Content</h3>
            <p>
                The compliance team reviews policy updates every sprint and tracks mandatory training tasks.
                A professional rollout plan should include communication, compliance checkpoints, and audit readiness.
            </p>
            <p>
                Use the controls above to test search behavior when iframe scanning is enabled or disabled.
            </p>

            <h3 style="margin-top: 18px;">Embedded Policy Frame (Same Origin)</h3>
            <iframe title="Policy Frame"
                    src="#{request.contextPath}/sections/marktext/iframe-policy-content.html"
                    style="width: 100%; height: 210px; border: 1px solid var(--surface-border, #d1d5db); border-radius: 4px;"></iframe>
        </h:panelGroup>
    </p:panel>

    <pe:markText id="markTextIframe"
                 for="searchContent"
                 value="#{iframeMarkTextController.searchTerm}"
                 styleClass="marktext-highlight"
                 iframes="#{iframeMarkTextController.iframes}"
                 iframesTimeout="#{iframeMarkTextController.iframesTimeout}"/>


                @Named
@ViewScoped
public class IframeMarkTextController implements Serializable {

    private static final long serialVersionUID = 1L;

    private String searchTerm = "compliance";

    private boolean iframes = true;

    private int iframesTimeout = 5000;

    public String getSearchTerm() {
        return searchTerm;
    }

    public void setSearchTerm(String searchTerm) {
        this.searchTerm = searchTerm;
    }

    public boolean isIframes() {
        return iframes;
    }

    public void setIframes(boolean iframes) {
        this.iframes = iframes;
    }

    public int getIframesTimeout() {
        return iframesTimeout;
    }

    public void setIframesTimeout(int iframesTimeout) {
        this.iframesTimeout = iframesTimeout;
    }
}

Use Cases

Documentation pe:markText

Attributes (move mouse over the names to see data types)

Name	Description
accuracy	Search accuracy level: 'partially', 'complementarily', or 'exactly'.Default is partially.
acrossElements	Search across element boundaries.Default is false.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
caseSensitive	Whether the search should be case sensitive.Default is false.
diacritics	Whether accented and unaccented letters are treated as the same during matching.Default is true.
exclude	Array of exclusion selectors. Matches inside these elements will be ignored.
for	Search expression to resolve the target component to search within.
id	Unique identifier of the component in a namingContainer.Default is generated.
iframes	Whether matching should include same-origin iframe documents.Default is false.
iframesTimeout	Maximum wait time in milliseconds for iframe loading.Default is 5000.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
separateWordSearch	Whether to match each word separately.Default is true.
style	Inline style of the component.
styleClass	Style class of the component.
synonyms	Map of synonyms for term matching.
value	Search terms to highlight. Can be a string or array of strings.
widgetVar	Name of the client-side widget.
wildcards	Wildcard matching mode: 'disabled'\|'enabled'\|'withSpaces'.Default is disabled.