AngularJS - 从 json 文件加载其 src 时 iframe 未显示答案

【问题标题】：AngularJS - iframe not showing when loading its src from json fileAngularJS - 从 json 文件加载其 src 时 iframe 未显示
【发布时间】：2016-07-13 09:31:39
【问题描述】：

我正在使用 AngularJS 1 加载一个带有我正在使用的 iframe 源的 .json 文件（请参阅下面的控制器）：

myApp.controller('iFrames', ['$scope', '$http', function($scope, $http){
console.log("ENTERING LOADING IFRAME");
 $http.post('../json/iframes.json').success(function(data){
console.log("LOADING SUCCESSFULL");
$scope.iframes = data;
});
console.log("LEAVING LOADING IFRAME");
}]);

问题是 iframe 根本没有显示在我的页面上，知道 json 文件已正确加载。

你需要知道json文件中的url都是https的，我认为这是造成这里问题的原因。

在我的 html 中：

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6" ng-controller="iFrames">
                <div class="panel">
                  <div class="panel-body">
                    <h3 class="text-center" style="color:white"><div id="changeStat"><span data-i18n="mainTranslation.user.house.consommation"></span></div></h3>
                    <div id="statRealTime" ng-repeat="iframe in iframes" >
                       <iframe ng-src="{{(iframe.src)}}" width="420" height="75" frameborder="0"></iframe>
                    </div>

                    <div id="statHistory" style="display: none" ng-repeat="iframe in iframes" >
                      <iframe ng-src="{{(iframe.srcHist)}}" width="420" height="75" frameborder="0"></iframe>

                    </div>
                  </div>
                </div>
              </div>

我收到一个错误是该网址在某种程度上不安全。

"Error: [$interpolate:interr] http://errors.angularjs.org/1.5.0/$interpolate/interr?p0=%7B%7B(iframe.srcHist)%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252F.......

我的文件在本地，我也尝试将它放在远程服务器上，但仍然是同样的问题。

我将不胜感激......

【问题讨论】：

单击该错误创建的链接...角度错误站点将提供解释。或者使用 Angular 的完整开发版本来获得更详细的错误和堆栈跟踪输出

标签： javascript angularjs json iframe https

【解决方案1】：

你需要使用$sce:

myApp.controller('iFrames', ['$scope', '$http', '$sce', function($scope, $http, $sce){
    console.log("ENTERING LOADING IFRAME");
        $http.post('../json/iframes.json').success(function(data){
        console.log("LOADING SUCCESSFULL");
        $scope.iframes = data;
        for(var i = 0; i < $scope.iframes.length; i++){
            $scope.iframes[i].srcHist = $sce.trustAsUrl($scope.iframes[i].srcHist)
        }

    });
    console.log("LEAVING LOADING IFRAME");
}]);

【讨论】：

谢谢！你拯救了我的一天:)

【解决方案2】：

@Websirnik 的大部分答案都是正确的，但我没有使用$sce.trustAsUrl（它一直产生相同的错误），而是尝试使用$sce.trustAsResourceUrl，它可以工作：

myApp.controller('iFrames', ['$scope', '$http', '$sce', function($scope, $http, $sce){
console.log("ENTERING LOADING IFRAME");
    $http.post('../json/iframes.json').success(function(data){
    console.log("LOADING SUCCESSFULL");
    $scope.iframes = data;
    for(var i = 0; i < $scope.iframes.length; i++){
        $scope.iframes[i].srcHist = $sce.trustAsResourceUrl($scope.iframes[i].srcHist)
    }

});
console.log("LEAVING LOADING IFRAME");
}]);

【讨论】：