包含用于预览的HTML代码，而不会覆盖包含页面的CSS

Question

I've created an email editor to allow my users created their custom email messages. The page that contains the editor has also a preview of the custom email, in PHP <div id="email_preview"><?= $email_preview ?></div>.

The problem is that if the user types in some CSS, than the elements of the containing page can be modified.

Is there a way to make the preview not influence the containing page?

Answer 1

The most common way for doing this is by using an iFrame, or setup a styling convention/script. By using an iFrame you can keep their content/styling separate from its container.

https://www.w3schools.com/html/html_iframe.asp