Implement own CSS in htmlpanel inside Iframe in Google Web Toolkit (GWT)

Many times it happen we want to load external html file in iframe of GWT.

When we try to incorporate html file inside IFrame it become difficult to implement html file specific css. Reason parent GWT frame override the html css. To overcome it we can use following code of line.

Here we are using two static native method one is used to load iframe and another is to add our specific css to the html inside iframe.

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();

  }-*/;

private final native void addHeadElement(IFrameElement iframe, String cssUrl) /*-{

         setTimeout(function() {

           var body;

           if ( iframe.contentDocument ) {

             // FF

             iframe.contentDocument.designMode= "On";

             iframe.contentDocument.execCommand('styleWithCSS',false,'false');

             body= iframe.contentDocument.body;

           }

           else if ( iframe.contentWindow ) {

             // IE

             body = iframe.contentWindow.document.body;

           }

           if (body == null) {

             return;

           }

           body.className = "custom-body-classname";

           var head = body.previousSibling;

           if(head == null) {

             head = iframe.contentWindow.document.createElement("head");

             iframe.contentWindow.document.childNodes[0].insertBefore(head, body);

           }

           var fileref = iframe.contentWindow.document.createElement("link");

           fileref.setAttribute("rel", "stylesheet");

           fileref.setAttribute("type", "text/css");

           fileref.setAttribute("href", cssUrl);

           head.appendChild(fileref);

         }, 50);

       }-*/;

Make sure that we need to  call this above two static native method before using iframe concept.

This is the code which we use to insert html code in our IFrame.

final HTML htmlPanel = new HTML("

This is siddharatha

");

      

       FlowPanel innerBox = new FlowPanel() {

           @Override

           protected void onLoad() {

               super.onLoad();

        

               // Fill the IFrame with the content html

               

               fillIframe(iframe, htmlPanel.getHTML());

        

               // Add a HEAD element to the IFrame with the appropriate CSS

               

               addHeadElement(iframe, "siddhu.css");

           }

       };

       innerBox.getElement().appendChild(iframe);

       RootPanel.get().add(innerBox);