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

我正在iframe中的角度应用程序中加载url。这是我的密码：

HTML:

它会重新返回一个错误： 错误：[$interpolate:interr]无法插值：{{selected.imgurl} 错误：[$sce:UnsecUrl]阻止了从url加载资源，$SCEDegate策略不允许这样做

---

下面是使用$sce API清理URL所需的

，通过调用方法trustAsResourceUrl，您需要使用该API使该URL成为受信任的URL

方法

HTML

别忘了在控制器上添加依赖项

---

希望这能对你有所帮助。谢谢。

试试看work@pankajparkar以前我就是这样的，它的力量work@Sajeetharan你检查过修改过的plunkr了吗？是的，它能工作。我的意思是，在你发布这个答案之前，我也试过了way@ashish_pbh听到这个消息我很高兴。。干杯：如果在一个页面上加载多个iframe，请小心使用。由于角度加载的不规则性，您的函数trustSrc可能会被调用的次数比您意识到的要多得多，从而导致内存泄漏。相反，我建议在加载数据时在指令或控制器中设置对象本身的url属性，然后直接使用该url。这样，您就可以确保您的代码每项只触发一次。如果您确定selected.imgurl没有更改，您可以使用以下命令一次性绑定它：：。这将确保src不会改变。

<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>

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

$scope.trustSrc = $sce.trustAsResourceUrl;

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