iframe with GWT

CSchulz

unread,

Oct 5, 2011, 1:05:44 AM10/5/11

to Google Web Toolkit

I'm wondering how I can create and iframe with GWT and inject some
"<style type="text/css"> body{background-color: red;} </style>" type
of stuff into the head and then inject a bunch of divs into the body.
I don't need to be able to link to them at all or apply any handlers,
so I would think this would be pretty easy, but I haven't found any
good ways to do this yet. I tried using an HTML object and injecting
<iframe> code into but it wasn't taking it for some reason. Any advice
is appreciated.

Thanks!

Cory

Jim Douglas

unread,

Oct 5, 2011, 1:11:45 AM10/5/11

to Google Web Toolkit

http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/user/client/ui/Frame.html

CSchulz

unread,

Oct 5, 2011, 5:39:53 AM10/5/11

to google-we...@googlegroups.com

Yeah, I know about the Frame element but I don't know how to edit the head and body areas inside of it or pass it HTML to fill itself with.

CSchulz

unread,

Oct 5, 2011, 6:44:02 AM10/5/11

to google-we...@googlegroups.com

So I found this link http://bealetech.com/blogs/sean/2010/01/embedding-html-document-iframe-gwt and I got it to work using these functions:

final IFrameElement iframe = Document.get().createIFrameElement();
FlowPanel innerBox = new FlowPanel() {
    @Override
    protected void onLoad() {
        super.onLoad();
 
        // Fill the IFrame with the content html
        fillIframe(iframe, contentHtml);
 
        // Add a HEAD element to the IFrame with the appropriate CSS
        addHeadElement(iframe, cssUrl);
    }
};
innerBox.getElement().appendChild(iframe);

and

private final native void fillIframe(IFrameElement iframe, String content) /*-{
  var doc = iframe.document;
 
  if(iframe.contentDocument)
    doc = iframe.contentDocument; // For NS6
  else if(iframe.contentWindow)
    doc = iframe.contentWindow.document; // For IE5.5 and IE6
 
   // Put the content in the iframe
  doc.open();
  doc.writeln(content);
  doc.close();
}-*/;

I tried to get the head function on that page to work, but wasn't sure how to pass in the HTML and write it to the head element. Right now I'm just using <div style="background-color:red; font-size: 18px;">Hello World</div> to get the styles to work with the divs I need them to.

I end up with this in the dom:

<div><iframe><html><head></head><body><div style="position:fixed;top:0px;left:0px;color:red;background-color: blue; font-size:44px;">Hello World</div></body></html></iframe></div>

It works but I would imagine there's a better way.

Tomasz Gawel

unread,

Oct 5, 2011, 2:50:42 PM10/5/11

to Google Web Toolkit

and the example without a line of JSNI :)
but be aware of same-domain restriction when retrieving reference
iframe's content.

public class IframeStyleExample implements EntryPoint {

public static StyleElement addStyleSheet(FrameElement frameElement,
String cssText) {

Document contentDocument = frameElement.getContentDocument();
Element targetElement = contentDocument.getElementsByTagName("head")
.getItem(0);

if(targetElement == null){
targetElement = contentDocument.getDocumentElement()
.getFirstChildElement();

if(targetElement == null){
contentDocument.insertFirst(targetElement = contentDocument
.createElement("head"));
}
}

StyleElement styleElement = contentDocument.createStyleElement();
styleElement.setType("text/css");
styleElement.setCssText(cssText);

targetElement.insertFirst(styleElement);

return styleElement;
}

@Override
public void onModuleLoad() {

final Frame frame = new Frame();

frame.addLoadHandler(new LoadHandler() {

@Override
public void onLoad(LoadEvent event) {
FrameElement frameElement = frame.getElement().cast();
addStyleSheet(frameElement,
"div {background: #ff0000;}");

}
});

}

}

CSchulz

unread,

Oct 5, 2011, 4:35:42 PM10/5/11

to google-we...@googlegroups.com

Thanks! This looks awesome! I'll give it a try. I never would've understood enough on how GWT interacts with the DOM to do this myself, but this'll be a very educational exercise for me. Thanks again!

Reply all

Reply to author

Forward