如何设置一个iframe src属性从一个变量在AngularJS

我试图设置一个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的值时，都会返回相同的类型。我甚至都试过了。

更新2: 我弄清楚了如何使用. tostring()从trustedUrlHolder返回url，但当我这样做时，当我试图将其传递到src属性时，它抛出安全警告。

更新3: 如果我在控制器中使用trustAsResourceUrl()并将其传递给ng-src属性中使用的变量，它就会工作:

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

}

我的问题似乎就这样解决了，尽管我不太确定原因。

当前回答

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

您需要在控制器中注入$sce服务，并在那里注入url trustAsResourceUrl。

在控制器中:

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>

2013-11-18 10:18:57

其他回答

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

您需要在控制器中注入$sce服务，并在那里注入url trustAsResourceUrl。

在控制器中:

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>

2013-11-18 10:18:57

这种方式，我遵循和它的工作为我好，可能它将为你工作，

<iframe class="img-responsive" src="{{pdfLoc| trustThisUrl }}" ng-style="{
                height: iframeHeight * 0.75 + 'px'
            }" style="width:100%"></iframe>

这里trustThisUrl只是过滤器，

angular.module("app").filter('trustThisUrl', ["$sce", function ($sce) {
        return function (val) {
            return $sce.trustAsResourceUrl(val);
        };
    }]);

2018-05-11 05:19:32

你还需要$sce。trustAsResourceUrl或它不会打开iframe内的网站:

angular.module('myApp', []) .controller('dummy', ['$scope', '$sce', function ($scope, $sce) { $scope.url = $sce.trustAsResourceUrl('https://www.angularjs.org'); $scope.changeIt = function () { $scope.url = $sce.trustAsResourceUrl('https://docs.angularjs.org/tutorial'); } }]); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="dummy"> <iframe ng-src="{{url}}" width="300" height="200"></iframe> <br> <button ng-click="changeIt()">Change it</button> </div>

2018-10-12 20:16:19

它是一个$sce服务，用于阻止带有外部域的url，它是一个为AngularJS提供严格上下文转义服务的服务，以防止安全漏洞，如XSS, clickjacking等。它在Angular 1.2中默认启用。

您可以完全禁用它，但不建议这样做

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

更多信息南加州爱迪生公司https://docs.angularjs.org/api/ng/service/美元

2016-02-20 17:43:53

请删除对trustSrc函数的调用，然后像这样重试。{{trustSrc(currentProject.url)}}到{{currentProject.url}}。查看这个链接http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview 但是根据Angular Js 1.2文档，你应该写一个函数来获取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()}}">

2013-11-18 10:57:40

如何设置一个iframe src属性从一个变量在AngularJS

推荐文章

最新文章

标签