to return the value of iframe inside the body using jquery

Question

I'm using the wysihat-engine on my jsp. It works well, but when I tried to add a preview feature that is suppose to read from the on-fly created iFrame and put it's value inside the hidden preview div, it couldn't read the iframe's included html. Any work-around for this? Thanks! In this example i want to return the value inside the body using jquery

the following iFrame is not written inside my jsp, but it is attached to a div by WYSihat.js file:

<iframe id="iframeId" class="abc">
   <html>
      <head></head>
      <body>
        <br>
        some text here 
        </br>
    </body>
  </html>
</iframe>

How to return "some text here" and pass it to the following function: Hint, this iFrame has been created on fly by the WYSiHat.js file, as it is not hard written inside my jsp page

function preview() {
    alert("hi"+$('iframe.editor').contents().find('body').text());
}

Your iframe doesn't seem to have the class `editor`... – lonesomeday Jan 10 '11 at 09:43 — lonesomeday, Jan 10 '11 at 09:43

score 5 · Accepted Answer · answered Jan 10 '11 at 08:43

5

Your description is certainly confusing, however to access the contents of an iframe you must use the contents() method on a jQuery object:

$('iframe.abc').contents().find('body').text();

Here we have selected the iframe itself, then got its contents. From there we can search the iframe's DOM normally using find().

For more information on the contents method see the jQuery docs.

answered Jan 10 '11 at 08:43

Marcus Whybrow

19,578
9
70
90

I re-edited my question, would you please take a look on it. The code you provided didn't work for me :( – Ali Taha Ali Mahboub Jan 10 '11 at 09:14
@Ali You've accepted the answer does this mean your problem is resolved? My only comment would be the one @lonesomeday gave n your question. – Marcus Whybrow Jan 10 '11 at 11:39
+1 Just to added to this answer. This only works if the contents of the iframe are in the same domain. – citadelgrad Feb 20 '11 at 21:43

score 2 · Answer 2 · answered Jan 10 '11 at 08:41

2

To find an element inside an iframe, you can use the jQuery function .contents(), which returns the document object of the iframe:

$('iframe.abc').contents().find('body').html();

answered Jan 10 '11 at 08:41

lonesomeday

233,373
50
316
318

to return the value of iframe inside the body using jquery

2 Answers2