Replace div with iframe in javascript

Question

I have a div on a page, like:

<div>
   <p>This is a div, but it should be an iframe.</p>
   <p>Here, all kind of stuff could be inside.</p>
   <table>
     <tr>
       <td>something</td>
     </tr>
   </table>
</div>

I want to replace the div with an iframe, to get something like:

<iframe>
   <html><body>
   <p>This is a div, but it should be an iframe.</p>
   <p>Here, all kind of stuff could be inside.</p>
   <table>
     <tr>
       <td>something</td>
     </tr>
   </table>
   </body></html>
</iframe>

How can it be done? A pure javascript-solution would be best, but a solution with jquery of ExtJs would be fine as well.

... Why? what's wrong with just having overflow: auto on the <div>? — Niet the Dark Absol
– Niet the Dark Absol, Commented Feb 24, 2012 at 16:41
So you have some content on a page and you want to turn it into the alternative content for an iframe that has no src? (I suspect that isn't the case). Could you clarify what you actually want, and let us know what problem you are trying to solve with this approach? — Quentin
– Quentin, Commented Feb 24, 2012 at 16:47
The problem is I need to apply a completly different css-file to the div than to the rest of the page: The pages css-file shouldn't be valid inside the div and the css-file of the div shouldn't be valid on the page. This can cause problems if you use ExtJs or a Tinymce and mix it up with the css of the page. I want to write a generic tool here and don't know how the css of the page if written. I could use the iframe with a src, but that makes loading terrible slow so I thought loading the div with the page and then convert it into an iframe might be a good idea. — Werner
– Werner, Commented Feb 25, 2012 at 16:02

Tom · Accepted Answer · 2018-08-20 07:47:24Z

2

try this:

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var div = document.getElementById("div");
                    var iframe = document.createElement("iframe");
                    document.body.appendChild(iframe);
                    iframe.innerHTML = div.innerHTML;
                    div.parentNode.removeChild(div);
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <div id="div">
            <p>This is a div, but it should be an iframe.</p>
            <p>Here, all kind of stuff could be inside.</p>
            <table>
                <tr>
                    <td>something</td>
                </tr>
            </table>
        </div>
    </body>
</html>

edited Aug 20, 2018 at 7:47

answered Feb 24, 2012 at 16:47

Tom

4,1702 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Werner Over a year ago

Thanks for this solution. It creates the iframe at the end of the document, but it remains empty (only a <html><head></head><body></body></html>). Even using something like: iframe.innerHTML = "<p>It works</p>" seem to have no effect at all.

SenorAmor · Accepted Answer · 2012-02-24 16:43:43Z

1

Since you said jQuery solutions are acceptable, how about this:

First, let's assume your div has an id of remove-my-contents.

Next, we could do

$('#remove-my-contents').html('your iframe code goes here');

It doesn't remove the <div> but it does replace its contents with your <iframe> code.

Hope this helps.

answered Feb 24, 2012 at 16:43

SenorAmor

3,34518 silver badges27 bronze badges

2 Comments

SenorAmor Over a year ago

If you really want to replace the entire <div> element, use .replaceWith() instead of .html()

Werner Over a year ago

Thanks for your reply. Strange enough, this doesn't have any effect as well: var iframe = document.createElement("iframe"); iframe.id = "new_iframe"; $('#new_iframe').html('<p>Works</p>'); ends up with an empty iframe (<html><head></head><body></body></html>).

Community · Accepted Answer · 2017-05-23 10:29:05Z

-1

Ah, it seem to be a problem with firefox that the iframe keeps staying empty. See: Replace div with iframe in javascript

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Feb 25, 2012 at 16:30

Werner

1,8474 gold badges23 silver badges46 bronze badges

Collectives™ on Stack Overflow

Replace div with iframe in javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related