iframe with designMode get generated html inside the iframe?

Question

Guys, I’m wearing a iframe together with Javascript to create a text editor as described below:

<iframe scrolling="auto" class="MINI_EDITOR" name="MINI_EDITOR">

And the Javascript code is this:

function MINI_EDITOR_DE_TEXTO(){
    this.frameEdit = window.frames['MINI_EDITOR'].document;
    this.frameEdit.designMode = 'on';
}

function ADD_NEGRITO(){
    this.frameEdit.execCommand('bold', false, null);
}

When the user selects a text and calls the function ADD_NEGRITO, text changes to bold and inside the iframe a tag is added <b>texto selecionado</b>.

My question is, I need to get all the html that is generated within the iframe and move to a variable. I tried it this way, but it didn’t work:

var IFRAME_PRICIPAL=document.querySelector(.MINI_EDITOR'').innerHTML;
alert(IFRAME_PRICIPAL);

How can I make it work? Thanks in advance.

Answer 1

You can access the content of iframe thus:

iframe.contentWindow.document.body.innerHTML;

and you can change the content like this:

iframe.contentWindow.document.body.innerHTML = "<h1>novo conteúdo</h1>";

Your code would then look like this:

var IFRAME_PRINCIPAL = document.querySelector('.MINI_EDITOR');
var conteudo = IFRAME_PRINCIPAL.contentWindow.document.body.innerHTML;
alert(conteudo);