AngularJS中的IFrame

Question

我想在我的数据库返回的div中绑定iframe，

<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen></iframe>

这可以在下面的div

中绑定

<div ng-app="myApp" ng-controller="dummy">

Answer 1

您需要将$sce service与ng-bind-html结合使用，以便将字符串解析为安全的HTML。

如果你的字符串是： "<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen></iframe>"

然后你需要用撇号替换"，然后将其解析为安全的HTML，如下：

dummy.unsafeIframeCode = "<iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder=&quot;0&quot; allow=&quot;autoplay; encrypted-media&quot; allowfullscreen></iframe>";

dummy.unsafeParsedIframeCode = dummy.unsafeIframeCode.replace(/\&quot\;/gi, "'");

dummy.safeIframeCode = $sce.trustAsHtml(dummy.unsafeParsedIframeCode);

并简单地将其绑定在HTML中：

<div ng-app="myApp" ng-controller="dummy" ng-bind-html="dummy.safeIframeCode">

Full working JSFiddle here

Answer 2

private void listClips_KeyDown(object sender, KeyEventArgs e) { MessageBox.Show("Key Pressed " + e.Key); } 无法用于绑定您的 iFrame ，因为清理程序可以保护您的应用免受潜在的 XSS 攻击。

如果您完全信任/控制数据源，可以考虑使用ng-bind-html 例如您的指令控制器中的trustAsHtml（其中内容是您的iFrame“scope.trustedData = $sce.trustAsHtml(content);”）和DOM中的<iframe.../>。它会为你完成任务。