Firefox removing iFrame's body contents which was appended dynamically

Question

I've the below codes to create an iFrame inside a div and then append contents inside of the iFrame's body. This works fine in Chrome and Edge. But Firefox removing the appended contents right away after.

var $iframe = $('<iframe/>', {
  'class' : 'editor-iframe',
  'src' : '',
  'border': 0,
  'height' : '100%',
  'width' : '100%'
});

var $iframe_editor = $('<div/>', { 
  'class': "editor" ,
  'contenteditable' : true
});

var contents = $('#editor').html();
$iframe_editor.append(contents);
$('#editor').html($iframe);
$('#editor').find('iframe').contents().find('body').append($iframe_editor);

.editor{
  border: 2px solid green;
  height: 300px;
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="editor" id="editor">
<h4>Qui ita affectus, beatum esse numquam probabis;</h4>

<p>Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Ille enim occurrentia nescio quae comminiscebatur; Sit hoc ultimum bonorum, quod nunc a me defenditur; </p>
</div>

You can also see the codes in this JSFiddle - https://jsfiddle.net/thb2mz3k/6/

How can i fix this? Thank you

What purpose does the iframe serve? It introduces additional issues like security boundaries, as shown by the snippet when executed on SO. Why do you need it? — H.B., Mar 24 '18 at 17:55
I'm not sure if you've even read the codes properly. Notice that i'm trying create a Contenteditable div inside of it. And later to manipulate it... — Xahed Kamal, Mar 24 '18 at 17:57
Why? You can have a content editable `div` in another `div`. I see no reason for that `iframe` to be there. That is why i am asking about it. — H.B., Mar 24 '18 at 18:01
I bet that the reason why it disappears in Firefox has exactly to do with it being an `iframe` rather than some other element. — H.B., Mar 24 '18 at 18:02
I'm not sure if you at least know what causing the problem. If you know, share it. But i guess you aren't familiar with Javascript — Xahed Kamal, Mar 24 '18 at 18:05
Holy cow, that passive aggressiveness. I tell you, the problem is probably the iframe, if you do not need it. Get rid of it. — H.B., Mar 24 '18 at 18:06
and Why iFrame. Because i need to have the editable div without any CSS effects... — Xahed Kamal, Mar 24 '18 at 18:07
Sorry. Didn't meant to be "passive aggressiveness". I'm just confused because i'm trying understand why Firefox creating the problem. Not the 'div' solution. — Xahed Kamal, Mar 24 '18 at 18:08
wow! Now its kinda "Rude of you"! I mean, i clearly said about Firefox issue. I've the script working. So, Looking for fix, not for Alternative. ;) — Xahed Kamal, Mar 24 '18 at 18:10
You are looking for a solution of a problem. You apparently cannot imagine just how many people have problems that they do not need to have and then ask about those instead of their *actual problem* which should be solved in a completely different way and much more simply. — H.B., Mar 24 '18 at 18:11
Possible duplicate of [iframe content disappears on Firefox](https://stackoverflow.com/questions/9967478/iframe-content-disappears-on-firefox) — Brahma Dev, Mar 24 '18 at 18:13

score 0 · Accepted Answer · answered Mar 25 '18 at 19:03

I couldn't find the reason why Firefox doing this. But i've found the solution/fix for this.

$('#editor').find('iframe').load(function(){ $(this).contents().find('body').append($iframe_editor); });

So, by this Firefox waits till the iFrame loads and then appends the HTML inside the iFrame. Though this doesn't work on Chrome or Edge. So, i've used browser detection to apply this, and the previous code for Chrome or Edge.

Hope this helps the other.

Firefox removing iFrame's body contents which was appended dynamically

1 Answers1