在AngularJS动态插入一个iframe页面进入 [英] insert an iframe into page dynamically in AngularJS

问题描述

我试图动态插入iframe中与角1.2的页面。这里是code：

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;
    }.......

所以data.html是具有先从一个有效的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>

我app.jsngSanitize使用。其显示的是div（iframe中后），但不是在iframe本身。

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

如果我使用jQuery，基本上

If I use jQuery, basically a

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

工作正常...但试图使它正确angularJS。

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

这是为什么只有正在显示的iframe后的div任何想法？

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

非常感谢所有

推荐答案

ngBindHtml 将通过通过你的HTML <一个href=\"http://docs.angularjs.org/api/ng.%24sce#methods_gettrustedhtml\"><$c$c>$sce.getTrustedHtml前显示它。我怀疑这是将删除你的iframe。

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

根据文档可以使用的 $ sce.trustAsHtml 以避免这种检查，只要你充分信任任何HTML由这个来源 - 一个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);
    }.......

小心！ ：）

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