javascript - css 仅适用于模板区域

Question

我的网站中有一个输入允许用户编写 html 电子邮件模板。基本上我使用 codemirror(只是我在网上找到的一个工作)。在该模板中，用户也可以编写 css。模板保存正常。

问题是当我尝试在预览中为用户显示模板时。一切都加载正常(html 和样式)，但样式不仅适用于模板部分，而且适用于我的整个网站。

有没有办法限制来自 blob 变量(html 电子邮件模板)的 css 的区域或某些内容？欢迎任何其他建议。

one logical solution is to have different styles form the ones of the users template, but I guess I cant limit the users input styles

编辑

我有这个文本区域:

<textarea name="email_template" id="email_template"></textarea>

用户输入示例:

.body div{
            /*@editable*/ color:#505050;
            /*@editable*/ font-family:Arial;
            /*@editable*/ font-size:14px;
            /*@editable*/ line-height:150%;
            /*@editable*/ text-align:left;
        }

<div class='bodyContent '> Hello Guys this is an email template </div>

然后输入在数据库中保存为 BLOB。

问题:当我使用 javascript 将输入显示到 div 时:

emailTemplate is just another div to load the content of the BlOB

document.getElementById("emailTemplate").innerHTML = data[0]['email_template'];

如果我在 emailTemplate 之外有一个类 body 也会受到影响。

Answer 1

使用<iframe>而不是 <div>显示用户内容，因此它不会应用于整个文档。

因为 iframe 中的文档对于浏览器来说是一个不同的网页，任何像 css 声明或 javascript 全局函数之类的东西都只能在 <iframe> 中工作。