在 AngularJS 应用程序的 iFrame 中加载 URL

Question

我正在 iframe 内的 Angular 应用程序中加载 url。这是我的代码：

HTML：

<div layout="column" flex class="content-wrapper" id="primary-col">
       <md-content layout="column" flex class="md-padding">
              <h2>{{selected.name}}</h2>
              <p>{{selected.content}}</p>
              <div class="cell">
                <iframe ng-src="{{selected.imgurl}}"  >  
              </div>
      </md-content>
</div>

App.Js：

var routerApp =angular.module('DiginRt', ['ngMaterial'])
 routerApp.controller('AppCtrl', ['$scope', '$mdSidenav', 'muppetService', '$timeout','$log', function($scope, $mdSidenav, muppetService, $timeout, $log) {
  var allMuppets = [];

  $scope.selected = null;
  $scope.muppets = allMuppets;
  $scope.selectMuppet = selectMuppet;
  $scope.toggleSidenav = toggleSidenav;

  loadMuppets();

  //*******************
  // Internal Methods
  //*******************
  function loadMuppets() {
    muppetService.loadAll()
      .then(function(muppets){
        allMuppets = muppets;
        $scope.muppets = [].concat(muppets);
        $scope.selected = $scope.muppets[0];
      })
  }

  function toggleSidenav(name) {
    $mdSidenav(name).toggle();
  }

  function selectMuppet(muppet) {
    $scope.selected = angular.isNumber(muppet) ? $scope.muppets[muppet] : muppet;
    $scope.toggleSidenav('left');
  }
}])

    routerApp.service('muppetService', ['$q', function($q) {
      var muppets = [{
          name: 'Product Report',
          iconurl: 'https://lh3.googleusercontent.com/-KGsfSssKoEU/AAAAAAAAAAI/AAAAAAAAAC4/j_0iL_6y3dE/s96-c-k-no/photo.jpg',
          imgurl: 'https://my.infocaptor.com/dash/mt.php?pa=inflation_50da569f84101',
          content: ' '
      }, {
          name: 'Invoice Report',
          iconurl: 'https://yt3.ggpht.com/-cEjxni3_Jig/AAAAAAAAAAI/AAAAAAAAAAA/cMW2NEAUf-k/s88-c-k-no/photo.jpg',
          imgurl: 'https://my.infocaptor.com/dash/mt.php?pa=inflation_50da569f84101',
          content: ''
      } ];

      // Promise-based API
      return {
          loadAll: function() {
              // Simulate async nature of real remote calls
              return $q.when(muppets);
          }
      };
    }]);

它再次出现错误说 错误：[$interpolate:interr] 无法插值：{{selected.imgurl}} 错误：[$sce:insecurl] 阻止从 url 加载资源，$sceDelegate 策略不允许。

这里是Plunker

Answer 1

您需要使用 $sce API 清理 URL，通过调用方法 trustAsResourceUrl 使该 URL 成为可信的。

方法

$scope.trustSrc = $sce.trustAsResourceUrl;

HTML

<iframe ng-src="{{trustSrc(selected.imgurl)}}"></iframe>

别忘了在你的控制器上添加 $sce 依赖。

Working Plunkr with you code

希望这可以帮助你。谢谢。