在 AngularJS 中动态地将 iframe 插入页面

问题描述

我正在尝试使用 Angular 1.2 将 iframe 动态插入到页面中.代码如下:

html:

<div ng-bind-html="玩家"></div>

js:

$http({method: 'GET', url: url}).成功(功能(数据，状态){$scope.player = data.html;} ......

所以 data.html 是一个字符串，它的有效 HTML 以

开头

该字符串还包含一些 div.所以它看起来像:

<iframe src='...' ...></iframe><div>一些东西</div>

我在 app.js 中使用ngSanitize".它显示的是 div(在 iframe 之后)而不是 iframe 本身.

如果我使用 jQuery，基本上是一个

$(#'player_wrapper').html(data.html)

工作正常...但试图使其适合 angularJS.

知道为什么只显示 iframe 之后的 div 吗?

非常感谢大家

解决方案

ngBindHtml 将通过 $sce.getTrustedHtml 在显示之前.我怀疑这会删除您的 iframe.

根据文档，您可以使用 $sce.trustAsHtml 以避免这种检查，只要您完全信任来自该来源的任何 HTML - 来自不受信任来源的 iframe 可能会在对访问您页面的访问者来说令人讨厌的事情.

$http({method: 'GET', url: url}).成功(功能(数据，状态){$scope.player = $sce.trustAsHtml(data.html);} ......

小心！:)

I am trying to dynamically insert an iframe into a page with Angular 1.2. Here is the code:

html:

<div id="player_wrapper" ng-cloak>
    <div ng-bind-html="player"></div>
</div>

js:

$http({method: 'GET', url: url}).
    success(function(data, status) {
        $scope.player = data.html;
    }.......

So the data.html is a string that has a valid HTML starting with

<iframe ...>

The string contains also some div. So it could look like:

<iframe src='...' ...></iframe><div>some stuf</div>

I use in app.js 'ngSanitize'. What it shows is the div (after the iframe) but not the iframe itself.

If I use jQuery, basically a

$(#'player_wrapper').html(data.html)

works fine... but trying to make it proper angularJS.

Any idea on why only the divs after the iframe are being displayed?

Many thanks all

解决方案

ngBindHtml will pass your HTML through $sce.getTrustedHtml before displaying it. I suspect this is what would be removing your iframe.

According to the docs you can use $sce.trustAsHtml to avoid this check so long as you fully trust any HTML coming from this source - an iframe from an untrusted source could likely do a number on nasty things to visitors to your page.

$http({method: 'GET', url: url}).
    success(function(data, status) {
        $scope.player = $sce.trustAsHtml(data.html);
    }.......

Be careful! :)

这篇关于在 AngularJS 中动态地将 iframe 插入页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！