AngularJS - iframe not showing when loading its src from json file

Question

I am using AngularJS 1 to load a .json file with the sources of the iframes I am using (see my controller below):

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

The problem is that the iframes are not showing at all on my page, knowing that the json file is loaded correctly.

You need to know that the urls in the json file are all in https, I think that this is what is causing the problem here.

In the html I have:

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

I am getting an error is that the url is somehow insecure.

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

My file is in local, i also tried to put it on a distant server but still the same issue.

I would appreciate some help...

Click on the link created by that error ... angular error site will provide an explanation. Or use full development version of angular for more verbose error and stack trace output — charlietfl
– charlietfl, Commented Mar 25, 2016 at 16:01

Websirnik · Accepted Answer · 2016-03-25 15:59:41Z

1

You need to use $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");
}]);

edited Mar 25, 2016 at 15:59

answered Mar 25, 2016 at 15:54

Websirnik

1,4124 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lotus91 · Accepted Answer · 2016-03-25 16:29:37Z

1

The answer of @Websirnik most of it was right, but instead of using $sce.trustAsUrl (which kept producing the same error), I have tried using $sce.trustAsResourceUrl and it works:

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

answered Mar 25, 2016 at 16:29

Lotus91

1,1234 gold badges18 silver badges31 bronze badges

Collectives™ on Stack Overflow

AngularJS - iframe not showing when loading its src from json file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related