FF - Iframe in contentEditable are not loading javascript

Question

I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.

Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.

Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.

I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!

http://jsfiddle.net/reefbarman/2uYja/2/

Any help is appreciated

Answer 1

Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.

Your code functions in Chrome, because Chrome has implemented designMode in a different way.

Answer 2

Well after some research and experimentation I was dealing with two different issues that looked like one.

Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!

Problem solved!