get iframe content as string

Question

I use a jquery plugin for generating rich text editor. That editor generates an structure like this:

<div id="editor" ... >
   ...
   <iframe>
      <!DOCTYPE html>
      <html>
         <head>...</head>
         <body>
            //some important content here and I need to get them
         </body>
      </html>
   </iframe>
</div>

Now, I want to get everything inside iframe's body as an String. I tested $("#editor").contents().find("body"), but this return me an object, not string. Also tried $("#editor").contents().find("body").outerHTML, but this return me undefined. How can I do this? Please help me. Thank you for your time.

Edit:

I use SCEditor plugin. As Ramesh said, I used val() method, but still return me (an empty string) in the firebug console. Here is my code:

var instance = $("textarea").sceditor({
        plugins: "bbcode",
        style: "../../editor/minified/jquery.sceditor.default.min.css",
        //some othe options
    });
    $("#save").click(function(){
        console.log(instance.val());
    });

As Ramesh suggests, I used $('textarea').sceditor('instance').val() and it worked.

What is the plugin you are using. Most likely, it would expose a method to fetch the content of the Rich text box. I would advice not to read the iframe content directly. — Ramesh, May 08 '15 at 05:31
I use [SCeditor](http://www.sceditor.com/). I checked api but nothing useful found. — hamed, May 08 '15 at 05:55
You may have to update your question to clearly capture that you need content of you SCeditor rich text box and not that of iframe. As the title is misleading and the answers you have got so far are for fetching contents of iframe. — Ramesh, May 08 '15 at 06:43

score 1 · Answer 1 · answered May 08 '15 at 05:30

1

jQuery objects are array like objects, and you can access the innerHTML property by index (take a look at the console output):

console.log($('iframe')[0].innerHTML);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editor">
   <iframe>
      <!DOCTYPE html>
      <html>
         <head></head>
         <body>
            some important content here and I need to get them
         </body>
      </html>
   </iframe>
</div>

answered May 08 '15 at 05:30

jdphenix

15,022
3
41
74

Thank you for your answer. I tested, but show `an empty string` in the console. – hamed May 08 '15 at 05:42
I'll admit I'm not sure why, I just checked in Firefox, Chrome, and Spartan and they all show. – jdphenix May 08 '15 at 05:45

score 1 · Answer 2 · answered May 08 '15 at 05:36

1

Try :

var contain = document.getElementById('iframe').contentWindow.document.body.innerHTML ;
// Use contain where need .

Note : Work only if the iframe source is in the same domain.

answered May 08 '15 at 05:36

4b0

21,981
30
95
142

Thank you for your answer. But the iframe does not have ID, so I can't use `getElementById`. – hamed May 08 '15 at 05:44

score 1 · Accepted Answer · answered May 08 '15 at 06:41

1

In SCEditor to fetch the value of the rich text box, you have to use the .val method

val() Since: 1.3.5

Gets the current value of the editor.

This will return the filtered HTML from the WYSIWYG editor or the unfiltered contents of the source editor.

If using a plugin that filters the HTML like the BBCode plugin, this will return the filtered HTML or BBCode in the case of the BBCode plugin.

Syntax

var val = instance.val();

Return Type: String

The filtered value of the editor

answered May 08 '15 at 06:41

Ramesh

13,043
3
52
88

Thank you for your answer. But what is `instance` in your code? – hamed May 08 '15 at 08:14
@hamed try `$('textarea').sceditor('instance').val()` – Ramesh May 08 '15 at 08:21

score 0 · Answer 4 · answered May 08 '15 at 06:03

0

I hope this helps:

// Gives you the DOM element without the outside wrapper you want
$('.classSelector').html()

// Gives you the inside wrapper as well
$('.classSelector')[0].innerHTML

answered May 08 '15 at 06:03

Jonas Libbrecht

768
1
8
17

get iframe content as string

4 Answers4

Linked