iframe 中的 AngularJS ng-src

IT技术 javascript angularjs iframe
2021-03-14 17:56:13

我在 iframe 中使用 ng-src 时遇到问题。我需要这样做：

<div class="tab-content">
        <ul class="nav nav-tabs" ng-repeat="document in issues.Document">
            <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
                <iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%"></iframe>                    
            </div>
        </ul>
    </div>

结果：

<iframe ng-src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}" height="100%" width="100%" src="http://192.168.223.110/cat/{{document.directory}}/{{document.name}}.{{document.type}}"></iframe>

我知道问题是$sce，它是对XSS 的保护，并且需要将链接添加到白名单中......所以当我这样做时它正在工作。

<ul class="nav nav-tabs" ng-repeat="document in issues.Document">
    <div class="tab-pane pdf-height col-md-5 padding_0" id="{{document.name}}">
         <iframe ng-src="{{someUrl}}" height="100%" width="100%"></iframe>                    
     </div>
</ul>

我在控制器内部定义： 

$rootScope.someUrl = $sce.trustAsResourceUrl('http://192.168.223.110/cat/files/incoming/12345_3232ASD_pero.pdf');

但我不能那样做，因为我用 ng-repeat 循环，所以链接是动态生成的。它需要可以从数据库中读取！

3个回答

您可以改用过滤器：

HTML：

<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>

其中 'yourURL' 是 iframe 的 URL，'trustAsResourceUrl' 是过滤器，在某些module（如过滤器module）中定义为：

JS：

angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}])

您可以在应用程序中的所有 iframe 和其他嵌入项目中使用此过滤器。此过滤器将通过添加过滤器来处理您需要信任的所有 url。

哦，抱歉，您可能没有看到我的回答 :) 问题是我没有以正确的方式编写 url.. :) 过滤器工作正常，谢谢！:)
2021-04-17 17:56:13
是的，同意。它基本上尝试使用花括号表达式检索 iframe，该表达式被编码为一些丑陋的 url :)
2021-04-19 17:56:13
我认为对于 iframe 用户 ng-src 更好，'src' 在加载 angular 之前向服务器发送一些错误的请求。
2021-04-25 17:56:13
好的，如果我只有一个，那会起作用..但它在 ng-repeat 中不起作用：/ {{apiUrl}}{{document.directory}}/{{document.name}}.{{document.type }} 我正在创建这样的链接..
2021-05-04 17:56:13
你能为此创建一个小提琴吗？或者提供一个代码片段。我不明白为什么这不起作用。
2021-05-15 17:56:13

好的，我找到了问题所在..谢谢你的过滤器它现在正在工作:)

我需要做的就是创建 ng-src 链接：

<iframe ng-src="{{apiUrl+document.directory + '/' + document.name + '.'+ document.type   | trustAsResourceUrl}}"
        height="100%" width="100%">
</iframe>

也许这对某人有帮助！:)

正如 Kop4lyf 所说，您需要在 js 中添加过滤器

//Create a filter for trust url
    app.filter('trustAsResourceUrl', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsResourceUrl(val);
    };
}]);

并输出 ih html 作为

ng-src="{{x.title.rendered | trustAsResourceUrl}}"

其他一些过滤器：

//Create a filter for trust html
    app.filter('trustAsHtml', ['$sce', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
}]);
其它你可能感兴趣的问题
上一篇我可以调整浏览器窗口的大小吗？ 下一篇执行来自不同来源的网络工作者