[英]AngularJS ng-src inside of iframe
我在 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 循環,所以鏈接是動態生成的。 它需要從數據庫中讀取!
您可以改用過濾器:
HTML:
<iframe src="{{yourURL | trustAsResourceUrl}}"></iframe>
其中 'yourURL' 是 iframe 的 URL,而 'trustAsResourceUrl' 是過濾器,並且在某些模塊(例如過濾器模塊)中定義為:
JS:
angular.module('filters-module', [])
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}])
您可以在應用程序中的所有 iframe 和其他嵌入項目中使用此過濾器。 此過濾器將通過添加過濾器來處理您需要信任的所有 url。
好的,我找到了問題所在..謝謝你的過濾器它現在正在工作:)
我需要做的就是創建 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);
};
}]);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.