Home/ Questions/Q 8222059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T14:08:49+00:00

i’m trying to weigh the pros and cons of using a <div> vs. <iframe>

  • 0

i’m trying to weigh the pros and cons of using a <div> vs. <iframe> in making my own rich text/wysiwyg editor.

In doing so, why can’t I just use a contenteditable <div> and why do so many people prefer the <iframe> ?

Background discussion:
A common way to go about making a wysiwyg editor as I understand is to make a div or iframe contenteditable and to then to do execCommand on the document containing the div or the iframe body to make its text bold or whatever.

Here’s the HTML:

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
       <div contenteditable="true"></div>
  </body>
</html>

vs.:

<html><!--parent doc-->
  <body><button type="button" class="btn-bold">Bold</button>
    <iframe>
       <body contenteditable="true"></body>
    </iframe>
  </body>
</html>

and the JS:

$(document.body).on('click', '.btn-bold', function(){
     document.execCommand('bold', false, null); 
});

vs.:

$(document.body).on('click', '.btn-bold', function(){
     window.frames[0].document.body.execCommand('bold', false, null); 
});

It looks like most well-made rich-text editors use an iframe. While I can easily get this contenteditable /execCommand combo to work on a div/iframe in Webkit browsers, I’m having a hellish time trying to get the iframe to work in Firefox. I’m having to resorting to loading scripts and stylesheets into the iframe and all sorts of nonsense to duplicate what I can easily accomplish with the div-based version. So the <div>-based method seems preferable. Any strong reasons I reconsider?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Reasons for the iframe

    Pros

    1. CSS isolation
    2. Security isolation (I am not able to detail this point, I repeat what I read)

    cons

    1. Heavier (but not to a significant/ noticeable point)
    2. More difficult to access from JavaScript.

    Personally, I developed my own editor and I choose to put it in an iframe.

    • 0