angularjs - IFrame 未在 ng-bind-html 中呈现

Question

我有一个用于在页面上呈现博客文章的数据源。其中一个条目包含一个 IFRAME。我看到 IFRAME 在数据源中返回，但它从未呈现到 ng-bind-html 中的页面。

这是我的代码:

<div class="blog-post-content" ng-bind-html="entry.content" itemprop="text">
</div>

如果我将其切换为以下内容，我会看到 IFRAME 标记呈现出来，但当然现在它是 RAW HTML。

<div class="blog-post-content" itemprop="text">
    {{entry.content}}
</div>

我怎样才能让这个 IFRAME 呈现到页面上。

Answer 1

这里最好的方法是重构你的数据源以只包含 URL，而不是完整的 iframe 标签，并使用 <iframe ng-src="entry.content"></iframe> .

ng-bind-html 对您不起作用，因为 sanitizer 正在保护您免受潜在的 XSS 攻击。

如果您不控制数据源，但完全信任它，您可以考虑使用例如scope.trustedContent = $sce.trustAsHtml(entry.content);在您的指令中，和 <div ng-bind-html="trustedContent"></div>在 DOM 中。

(当然，不控制它而是完全信任它在术语上是矛盾的，因此您最好解析指令中的数据源以提取 url，而不是信任整个字符串。)