Iframe

Employment/Purpose

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

The content included by the includecomponent 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 includecomponent. The inclusion is done at the server, and the browser knows nothing about it. It means the URL specified by the srcproperty could be any internal resource.

The content of the iframecomponent 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.

The embeddingis 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 imageand audiocomponents, you could specify the dynamically generated content. A typical example is you could use JasperReport to generate a PDF report in a binary array or stream, and then pass the report to an iframecomponent by wrapping the result with the org.zkoss.util.media.AMediaclass.

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

Example

<window id="win" title="This is an Iframe Demo!">
    <iframe style="width:99%; height:400px;border:3px inset;" src="iframe-target-url-here" />
</window>

Live iframe demo is available in the zk demo.

The onURIChange Event

When the user navigates the iframe component to another URL (or bookmark), an object of org.zkoss.zk.ui.event.URIEvent is sent to the iframe component. This event is usually used to bookmark the status of the iframe component, such that the right content can be restored later.

Integrate with Other Technologies

The onURIChange event won’t be sent if the iframe component contains a non-ZK page. For example, it won’t be sent if it contains a PDF page.

On the other hand, if you use other technologies to put a ZK page in an iframe, you can monitor the URL by writing a JavaScript method called

\_global\_.\_global\_

as follows.

 //Part of your, say, PHP page
 <script type="text/script">
 function onIframeURLChange(uuid, url) {
     do_whatever_you_need_in_the_technology_you_use(uuid, url);
 }
 </script>

where uuid is the ID of the element that you can retrieve by document.getElementById, and urlis the new URL that the iframe is navigated to. Notice that url includes the context path, while

org.zkoss.zk.ui.event.URIEvent

does not.

Retrieving Component inside Iframe

When using iframe, the page is actually loaded into another browser window, aka., another desktop if a ZUML document is included.

It is illegal to access components attached to other desktops1. If you want to retrieve component, you may use org.zkoss.zul.Include instead of org.zkoss.zul.Iframe. Or, you could use Event Queues with the group scope. Of course, you could handle it manually by deliberately passing the information through session.

Communication among iFrames without Server Push

since 5.0

CE
PE
EE

If your application contains multiple desktops due to iframes in a portal layout it is now possible to communicate between these instances without the need for server push or timer. It thus minimizes the network traffic.

Since ZK 5.0.4, the concept of group has been introduced to enable the use of a group-scope event queue which facilitates easy communication between the instances. The code below demonstrates some examples:

EventQueue que = EventQueues.lookup("groupTest", EventQueues.GROUP, true);

que.subscribe(new EventListener() {
   public void onEvent(Event evt) {
      o.setValue(o.getValue() + evt.getData() + "\n");
   }
});

void publish() {
   String text = i.getValue();

   if (text.length() > 0) {
      i.setValue("");
      que.publish(new Event("onGroupTest", null, text));
   }
}

For more information please take a look at ZK Developer’s Reference: Event Queues.

onload

If you’d like to do something when iframe’s content has been loaded, you could listen to the onload event. However, unlike onChange and others, you could not listen the widget-level event (zk.Event and listened by use of Client-side Event Listening), because the onload event might be fired before the widget has been bound to DOM.

Rather, you shall use the client-attribute namespace to register a DOM-level listener as follows.

<iframe src="https://www.google.com"  height="300px"
  xmlns:ca="client/attribute"
  ca:onload="do_whater_you_want()"/>

Notice that the registration of onload with the client-attribute namespace is DOM-level, so the this variable references to the DOM element (rather than the widget).

Supported Events

Name

Event Type

onURIChange

Event: [org.zkoss.zk.ui.event.URIEvent](https://www.zkoss.org/javadoc/latest/zk/org/zkoss/zk/ui/event/URIEvent.html)

Denotes the associated URI (src) has been changed by user.

Use getURI() to retrieve the URI being changed to.

Supported Children

*NONE

Use Cases

Version Description Example Location
3.6 or later Print Iframe Content http://www.zkoss.org/forum/listComment/6599

Version History

Version Date Content
     

  1. For more information please refer to the Component-based UI section ↩