9

Is it possible to add an iframe to a JSF component(RichFaces, PrimeFaces) from backing bean?

I need to embed externel webpages in my homepage. And user needs to set this url. I cannot use jQuery.

I am not able to find any iframe equivalent JSF component. Is there any particular reason for this?

Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
charishma
  • 91
  • 1
  • 1
  • 3

3 Answers3

18

Just use plain HTML.

<iframe src="#{bean.iframeUrl}"></iframe>

The most probable reason why a component doesn't exist is because there would be no extra advantages to offer when wrapping it in a JSF component. For example <p>, <br>, <hr>, etc have also no JSF equivalent.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • 4
    And I'm glad. For me the ability to mix components with plain old html is what makes facelets so lovable. – Dave Maple Jun 08 '11 at 00:22
5

Yes possible. We can use plain HTML with in xhtml file. I have tried it. It is working good. below i have given my code.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<f:view locale="#{facesContext.externalContext.requestLocale}">
<h:head>
    <title>
        <h:outputText value="your application title"></h:outputText>
    </title>
    <style type="text/css">
        #imagepgframe { 
            width: 100%;
            height: 100%;
            position: absolute;
        }
        #wrap { 
            width: 100%;
            position: absolute;
            top: 0px; 
            left: 0;
            bottom: 0;
            overflow-y: hidden;
            overflow-x: hidden;
        }
    </style>
</h:head>
<h:body>
    <h:form>
        <div id="wrap"> 
            <iframe id="imagepgframe" name="imagepgframe" frameborder="0" scrolling="auto" src="#{bean.iframeUrl}">
              <p>Your browser does not support iframes.</p>
            </iframe>
        </div>
    </h:form>
</h:body>

Thanks.

Ganesa Vijayakumar
  • 2,422
  • 5
  • 28
  • 41
  • 1
    Hi. Nice example. I am facing similar issue; Concerning the iframe src may it be a relative one like a "./myapppage.xhtml" for example? And how the url should look like in the backing bean? Comment please – user390525 Oct 05 '17 at 00:33
  • Thanks, Either you can use URLs as you said "./myapppage.xhtml" and also full-length URL like http://*****/myappage.xhtml. – Ganesa Vijayakumar Oct 05 '17 at 07:32
  • I just tried setting relative path src="./mypage.xhtml" which is in same folder as the iframe's page is; So I have exception as `: HTTP Status 500 - /test/iframetest/mypage.xhtml Not Found in ExternalContext as a Resource`. Please give me a tip – user390525 Oct 07 '17 at 20:08
  • try this src="mypage.xhtml" – Ganesa Vijayakumar Oct 10 '17 at 13:44
  • Nope :P I am not sure does the src support paths which have no `/` or `http`? – user390525 Oct 11 '17 at 17:38
2

You can add iframe navegation with hsk:panelFrame, this a simple sample, when the case navegation is ok and the commponent has target attribute, this case navegation toViewId is show in the iframe (into panelFrame), and until iframe page navegation to a parentViewId, this iframe close and return to parent page

source https://github.com/yracnet/hiska-HskFrame/

readme https://github.com/yracnet/hiska-HskFrame/blob/master/README.md

this sample with a css you can show iframe how popup style.

user2026736
  • 21
  • 6