The iframe Component

The iframe component uses the HTML IFRAME tag to delegate a portion of the display to another URL. Though the appearance looks similar to the include component. The concept and meaning of the iframe component is different.

The content included by the include component is a fragment of the whole HTML page. Because the content is part of the HTML page, the content is part of the desktop and you could access any components, if any, inside of the include component. The inclusion is done at the server, and the browser knows nothing about it. It means the URL specified by the src property could be any internal resource.

The content of the iframe component is loaded by the browser as a separate page. Because it is loaded as a separate page, the format of the content could be different from HTML. For example, you could embed an PDF file.

<iframe src="/my.pdf"/>
...other HTML content

Tip: By default, there is no border. To enable it, use the style attribute to specify it. For example,<iframe style="border:1px inset" src="http://www.zkoss.org"/>

The embedding is done by the browser, when it interprets the HTML page containing the IFRAME tag. It also implies that the URL must be a resource that you can access from the browser.

Like the image and audio components[47], you could specify the dynamically generated content. A typical example is you could use JasperReport[48] to generate a PDF report in a binary array or stream, and then pass the report to an iframe component by wrapping the result with the org.zkoss.util.media.AMedia class.

In the following example, we illustrate that you could embed any content by use of iframe, as long as the client supports its format.

<window title="iframe demo" border="normal">
    <iframe id="iframe" width="95%"/>    
    <separator bar="true"/>    
    <button label="Upload">    
        <attribute name="onClick">{        
            Object media = Fileupload.get();            
            if (media != null)            
                iframe.setContent(media);                
        }</attribute>        
    </button>    
</window>

This picture depicted the appearance after user uploaded an Microsoft PowerPoint file.



[47] In many ways, iframe is much similar to image and audio. You might consider it as a component for arbitrary content.

[48] http://jasperreports.sourceforge.net