如何在AngularJS中设置一个variables的iframe src属性

我试图设置一个variables的iframe的src属性，我不能得到它的工作…

标记：

 <div class="col-xs-12" ng-controller="AppCtrl"> <ul class=""> <li ng-repeat="project in projects"> <a ng-click="setProject(project.id)" href="">{{project.url}}</a> </li> </ul> <iframe ng-src="{{trustSrc(currentProject.url)}}"> Something wrong... </iframe> </div> 

控制器/ app.js：

 function AppCtrl ($scope) { $scope.projects = { 1 : { "id" : 1, "name" : "Mela Sarkar", "url" : "http://blabla.com", "description" : "A professional portfolio site for McGill University professor Mela Sarkar." }, 2 : { "id" : 2, "name" : "Good Watching", "url" : "http://goodwatching.com", "description" : "Weekend experiment to help my mom decide what to watch." } }; $scope.setProject = function (id) { $scope.currentProject = $scope.projects[id]; console.log( $scope.currentProject ); } } 

有了这个代码，没有任何东西被插入到iframe的src属性中。 这只是空白。

更新1：我注入$sce依赖到AppCtrl和$ sce.trustUrl（）现在工作，而不会引发错误。 但是，它返回TrustedValueHolderType ，我不知道如何使用插入一个实际的URL。 无论我在属性src="{{trustUrl(currentProjectUrl))}}"的插值大括号中使用$ sce.trustUrl（），还是在设置currentProjectUrl的值时在控制器内执行相同的types。 我甚至用这两种方法试了一下。

更新2：我想出了如何使用.toString（）从trustedUrlHolder返回url，但是当我这样做的时候，当我尝试将它传递给src属性时，会引发安全警告。

更新3：如果在控制器中使用trustAsResourceUrl（）并将其传递给ng-src属性中使用的variables，

 $scope.setProject = function (id) { $scope.currentProject = $scope.projects[id]; $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url); console.log( $scope.currentProject ); console.log( $scope.currentProjectUrl ); } 

我的问题似乎由此解决，虽然我不太清楚为什么。

Answer 1

我怀疑看看从控制器中没有定义trustSrc(currentProject.url)函数trustSrc的摘录。

您需要在控制器中注入$sce服务 ，并在其中inputtrustAsResourceUrl url 。

在控制器中：

 function AppCtrl($scope, $sce) { // ... $scope.setProject = function (id) { $scope.currentProject = $scope.projects[id]; $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url); } } 

在模板中：

 <iframe ng-src="{{currentProjectUrl}}"> <!--content--> </iframe> 

Answer 2

它是阻止具有外部域的URL的$ sce服务，它是为AngularJS提供严格的上下文转义服务的服务，以防止诸如XSS，点击劫持等安全漏洞，在Angular 1.2中默认启用。

你可以完全禁用它，但不build议

 angular.module('myAppWithSceDisabledmyApp', []) .config(function($sceProvider) { $sceProvider.enabled(false); }); 

欲了解更多信息https://docs.angularjs.org/api/ng/service/ $ sce

Answer 3

请删除对trustSrc函数的调用， trustSrc再次尝试。 {{trustSrc（currentProject.url）}}到{{currentProject.url}}。 检查这个链接http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview

---

但根据Angular Js 1.2 Documentation，你应该写一个获取src url的函数。 看看下面的代码。

之前：

使用Javascript

 scope.baseUrl = 'page'; scope.a = 1; scope.b = 2; 

HTML

 <!-- Are a and b properly escaped here? Is baseUrl controlled by user? --> <iframe src="{{baseUrl}}?a={{a}&b={{b}}" 

但出于安全原因，他们正在推荐以下方法

使用Javascript

 var baseUrl = "page"; scope.getIframeSrc = function() { // One should think about their particular case and sanitize accordingly var qs = ["a", "b"].map(function(value, name) { return encodeURIComponent(name) + "=" + encodeURIComponent(value); }).join("&"); // `baseUrl` isn't exposed to a user's control, so we don't have to worry about escaping it. return baseUrl + "?" + qs; }; 

HTML

 <iframe src="{{getIframeSrc()}}"> 

Answer 4

select模板; iframe控制器，ng模型更新

的index.html

 angularapp.controller('FieldCtrl', function ($scope, $sce) { var iframeclass = ''; $scope.loadTemplate = function() { if ($scope.template.length > 0) { // add iframe classs iframeclass = $scope.template.split('.')[0]; iframe.classList.add(iframeclass); $scope.activeTemplate = $sce.trustAsResourceUrl($scope.template); } else { iframe.classList.remove(iframeclass); }; }; }); // custom directive angularapp.directive('myChange', function() { return function(scope, element) { element.bind('input', function() { // the iframe function iframe.contentWindow.update({ name: element[0].name, value: element[0].value }); }); }; }); 

Iframe.html的

  window.update = function(data) { $scope.$apply(function() { $scope[data.name] = (data.value.length > 0) ? data.value: defaults[data.name]; }); }; 

检查这个链接： http : //plnkr.co/edit/TGRj2o?p=preview