Search code examples
javagwtiframegwtquery

How to get content of iframe using GWT Query?


I trying to do like this:

$("iframe.cke_dialog_ui_input_file").contents()

but it returns:

< #document(gquery, error getting the element string representation: (TypeError) @com.google.gwt.dom.client.DOMImplMozilla::toString(Lcom/google/gwt/dom/client/Element;)([JavaScript object(8570)]): doc is null)/>

But document is not null!

Help me please to solve this problem :(

UPD. HTML CODE:

<iframe id="cke_107_fileInput" class="cke_dialog_ui_input_file" frameborder="0" src="javascript:void(0)" title="Upload Image" role="presentation" allowtransparency="0">
<html lang="en" dir="ltr">
<head>
<body style="margin: 0; overflow: hidden; background: transparent;">
<form lang="en" action="gui/ckeditor/FileUploadServlet?CKEditor=gwt-uid-7&CKEditorFuncNum=0&langCode=en" dir="ltr" method="POST" enctype="multipart/form-data">
<label id="cke_106_label" style="display:none" for="cke_107_fileInput_input">Upload Image</label>
<input id="cke_107_fileInput_input" type="file" size="38" name="upload" aria-labelledby="cke_106_label">
</form>
<script>
window.parent.CKEDITOR.tools.callFunction(90);window.onbeforeunload = function() {window.parent.CKEDITOR.tools.callFunction(91)}
</script>
</body>
</html>
</iframe>

Solution

  • The contents() method returns the HTMLDocument, so normally you have to find the <body> to manipulate it.

    $("iframe.cke_dialog_ui_input_file").contents().find("body");
    

    A common mistake is to query the iframe before it has been fully loaded, so code a delay using a Timer, Scheduler or GQuery.delay(). For instance:

    $("iframe.cke_dialog_ui_input_file")
      .delay(100, 
        lazy()
          .contents().find("body")
            .css("font-name", "verdana")
            .css("font-size", "x-small")
        .done());