iframe中的AngularJS ng-src

我在使用iframe中的ng-src時遇到問題。我需要這樣做：iframe中的AngularJS 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>

我知道這個問題是$標準煤，這是從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-重複循環，所以是動態生成的鏈接。它需要從數據庫中讀取！

來源

2014-06-11 Tindtrelle

您可以使用，而不是一個過濾器：

HTML：

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

其中「yourURL」是iframe和「trustAsResourceUrl」的網址是過濾器，並被定義爲在某些模塊（如。例如，過濾器模塊）爲：

JS：

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

而且你可以使用這個FILT呃在應用程序中的所有iframe和其他嵌入式項目中。只需添加過濾器，此過濾器將負責所有需要信任的網址。

來源

2014-06-11 12:47:20 Kop4lyf

好吧，這將工作，如果我只有一個..但它不是在ng-repeat內部工作：/ {{apiUrl}} {{document。目錄}}/{{document.name}}。{{document.type}} 我正在創建這樣的鏈接.. – Tindtrelle

您可以爲此創建一個小提琴。或者提供一個代碼片段。我無法明白爲什麼這不起作用。 – Kop4lyf

哦，對不起，你可能沒有看到我的答案:)問題是，我沒有正確的方式寫網址.. :)過濾器工作完美，謝謝！ :) – Tindtrelle

好吧，我發現了什麼問題.. 謝謝你的過濾器現在工作:)

所有我需要做的是建立NG-SRC此鏈接：

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

也許這有助於某人！ :)

來源

2014-06-20 08:19:55 Tindtrelle

至於什麼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); 
    }; 
}]);

來源

2017-12-06 12:07:59

iframe中的AngularJS ng-src

回答

相關問題