如何在div内包含具有特定样式的完整HTML文件

编程问答 2022-08-11

问题描述

我正在制作一个脚本来预览电子邮件模板，所以我得到了一个完整的HTML页面（带有），并且愿意在此页面上弹出一个窗口。 我从API获得结果，该API为我提供了变量内的完整代码。 如何在不增加样式的情况下在我的应用程序中显示此页面？ 谢谢

Ps：我无法使用iframe，因为无法从简单的get查询（没有标题）获得预览

解决方法

您可以尝试以下选项之一（它们都有缺点）

  1. ng-bind-html（AngualrJS指令）-不提供样式封装
  2. iFrame-提供样式封装，浏览器兼容性不是问题。不过，如果您担心安全性或已经制定了CSP策略，则可能需要设置或调整CSP策略。
  3. Shadow DOM-提供样式封装，但是您需要确保它适合您所支持的浏览器，并且为AngularJS实施非常棘手

UPD：根据您最近的更新，我想您可以继续使用ng-bind-html指令（HTML内容将被清除，但是您将不得不应对样式交集和头部和身体标签警告）。如果不起作用，请根据上述方法尝试使用iFrame（您无需为此进行任何外部查询/请求）。

,

iframe是可用于将其他html页面调用到网页中的代码

 <iframe src="http://www.page.com" name="targetframe" allowTransparency="true" scrolling="no" frameborder="0" >
        </iframe>
angularjspreviewpreview