Embed HTML and make calls to/from.

There are a few ways to embed one HTML into another; frames, iframe, etc. Using GWT, I ran into problems with some of these and indeed 'frames' are to be deprecated in HTML5.

I found the following method successful;

<object data=embedded.html width="100%" height="600" id="embeddedFrame" name="embeddedFrame"> <embed src=embedded.html width="100%" height="600"> </embed> Error: Embedded data could not be displayed. </object>

 

embeds a page called embedded.html into the current page.

 

But how do we make calls between these two pages?

 

To make a call from the embedded page to the current one is very easy. For example, if you wanted to pass a message to the element in the main page with an id of 'example';

 

parent.document.getElementById('concepts').innerHTML = selected[0];

To make a call to the embedded page (call functionA() in the embedded page from the main page), we require the following operation;

document.getElementById('embeddedFrame').contentDocument.defaultView.functionA();

Using these two methods we can pass data back and forth between embedded objects.