如何使用 $sce 插入带有 angular.js 的 iframe？

Posted 2023-03-05

【中文标题】如何使用 $sce 插入带有 angular.js 的 iframe？

【英文标题】：How to insert an iframe with angular.js using $sce?

【发布时间】：2014-11-28 04:58:47

【问题描述】：

我正在尝试插入整个 iframe 并将其输出到 html。它必须是 iframe 的原因是因为我有一个函数可以处理多个视频嵌入，如 youtube、vine 等 - 它们都有不同的标签。

所以我想做的是：

输入：

var html = '<iframe src="//www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>';

$scope.video_element = $sce.trustAsHtml(html);

在控制器上：

<div ng-bind-html="video_element"></div>

我希望 iframe 在 div 内作为一个整体输出。很多时候，它只是输出一个 n '[object HTMLIFrameElement]' 而不是实际的 iframe。任何人都可以指导我正确的方向吗？ plunkr 会很棒。

谢谢。

【问题讨论】：

您好，我的回答解决了您的问题吗？

【参考方案1】：

在我的情况下，这对我有用，一个自定义过滤器

app.filter('iframe', ['$sce', function($sce) 
return function(input) 
        input = $sce.trustAsResourceUrl(input);
        return input;
    ;
]);

【参考方案2】：

为此，您将需要一个自定义指令。

app.directive('mySrc', ['$sce', function($sce) 
    return function(scope, element, attr) 
        scope.$watch($sce.trustAsUrl(attr.mySrc), function(value) 
            $(element).attr(src: attr.mySrc || '');
        );
    ;
])

然后

<iframe my-src="//www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

【参考方案3】：

我建议为此使用指令，这就是 AngularJS 建议将特殊行为附加到 DOM 元素的方法。

我用这个解决方案创建了一个 Plunkr，检查一下：iframe from a directive。

如果这能解决您的问题，请告诉我。

app.directive('iframeDirective', ['$sce', function($sce) 
return 
    restrict: 'E',
    template: '<iframe src=" trustedUrl " frameborder="0" allowfullscreen></iframe>',
    link: function(scope) 
      scope.trustedUrl = $sce.trustAsResourceUrl("//www.youtube.com/embed/dQw4w9WgXcQ");
    
  
]);