How to isolate CSS rules inside a div?

Question

I need to load an html page inside a div in the following pseudo page:

<html>
    <head></head>
    <style>
        body {
            background-color: yellow;
        }
    </style>
    <body>
        <div style="display:none">
            <html>
                <head></head>
                <style>
                    body {
                        background-color: blue;
                    }
                </style>
                <body>
                    <div style="display:none">
                        ...
                    </div>
                </body>
            </html>
        </div>
    </body>
</html>

What naturally happens in this code is that the background will turn blue, as it is being changed in the middle of the page. Is there a way to isolate this div? So it would act similarly to an iframe. The content inside the div is stored in a variable, so I think I cannot use a frame, as the html code is not stored in a file to use it as a source.

Thank you!

While this HTML will load in most browsers, it is very much invalid HTML. I suggest you work out how to strip the embedded HTML of the `` to (and including) `` as well as the closing `` first. — Tigger, Apr 28 '16 at 08:22
better create one body and instead of new html body tag use custom div. — Leo the lion, Apr 28 '16 at 08:23
I have a script to send e-mails to multiple users, but I wanted to let the user preview the html e-mail before sending. — Leandro Lorenzini de Oliveira, Apr 28 '16 at 08:25
Take a look at this post http://stackoverflow.com/questions/6102636/html-code-as-iframe-source-rather-than-a-url — Alexander Popov, Apr 28 '16 at 08:25
style="display:none" then how user will see the content of div? — Leo the lion, Apr 28 '16 at 08:26
Instead of putting whole body inside a div(which is clearly wrong as mentioned by above users). Instead try to target it via jQuery and add css to it. — Bhavya Khurjawal, Apr 28 '16 at 08:27

score 2 · Answer 1 · answered Apr 28 '16 at 08:28

2

You can not load a Site into a Site without an Iframe due to security risks.

The only thing you can do, is to load the external Site with a serverside script like php, cut of the head with regexp and send the rest to your site into your div.

answered Apr 28 '16 at 08:28

user6265505

21
3

score 2 · Accepted Answer · answered Apr 28 '16 at 08:30

2

This is just wrong. An HTML document can only have one html tag and one body tag, otherwise it will be an invalid document, browsers won't allow it.

If you load an iframe, instead, it will have his own #document and it's fine.

answered Apr 28 '16 at 08:30

pumpkinzzz

2,907
2
18
32

How to isolate CSS rules inside a div?

2 Answers2