如何从 AngularJS 中的变量设置 iframe src 属性

IT技术 javascript html angularjs iframe angularjs-directive
2021-01-24 22:25:02

我正在尝试src从变量设置iframe的属性，但我无法让它工作......

标记：

<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。无论我在属性的插值括号内使用 $sce.trustUrl()src="{{trustUrl(currentProjectUrl))}}"还是在设置 currentProjectUrl 的值时在控制器内使用 $sce.trustUrl() ，都会返回相同的类型。我什至用两者都试过了。

更新 2： 我想出了如何使用 .toString() 从 trustUrlHolder 返回 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 );

}

我的问题似乎由此解决了，虽然我不太确定为什么。

6个回答

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

你需要注入的$sce服务在控制器和trustAsResourceUrl在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>
尝试使用trustAsResourceUrl.
2021-03-23 22:25:02
我按照你的建议用 $sce 试过了。它导致错误消息消失，但 iframe 的 src 属性仍然为空。
2021-03-30 22:25:02
...但是当我将它传递给 ng-src 属性时，这个就起作用了！谢谢。
2021-04-02 22:25:02
ng-src 对我不起作用，除非我删除了双花括号（ ng-src="currentProjectUrl" ）
2021-04-03 22:25:02
@EmersontrustAsResourceUrl返回 a$sce.RESOURCE_URL需要iframe/ objectswhiletrustAsUrl返回 a $sce.URL，这是一种较弱的保证（并且根据文档目前未使用）。
2021-04-05 22:25:02

它是$sce阻止带有外部域的 URL的服务，它是一项为 AngularJS 提供 Strict Contextual Escapeing 服务的服务，以防止 XSS、点击劫持等安全漏洞。它在 Angular 1.2 中默认启用。

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

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

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

我遵循这种方式，它对我有用，可能对你有用，

<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);
        };
    }]);

请删除对trustSrc函数的调用，然后像这样重试。{{trustSrc(currentProject.url)}} 到 {{currentProject.url}}。检查此链接http://plnkr.co/edit/caqS1jE9fpmMn5NofUve?p=preview

但是根据 Angular Js 1.2 文档，您应该编写一个获取srcurl的函数。看看下面的代码。

前：

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()}}">
但我认为您的代码中有一些错误。控制器应该是这样的 app.controller('AppCtrl', function($scope) {});
2021-03-19 22:25:02
行。检查这个链接我用plunker检查了你的代码。plnkr.co/edit/caqS1jE9fpmMn5NofUve
2021-03-20 22:25:02
我注意到您的代码中有一个函数“trustSrc”。请删除该功能并像这样重试。{{trustSrc(currentProject.url)}} 到 {{currentProject.url}}
2021-03-25 22:25:02
控制器也可以是全局可访问的功能。
2021-04-01 22:25:02
如果在ng-srcor 中绑定到多个表达式，则文档会提供此建议src。角1.2起，一个可结合在仅一个表达src和ng-src和建议是使用函数来检索代码的URL，如果需要的话。
2021-04-10 22:25:02

选择模板；iframe 控制器，ng 模型更新

索引.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

其它你可能感兴趣的问题
上一篇`var { ... } = ...` 语句中的大括号有什么作用？ 下一篇禁用和启用 html 输入按钮