All geek questions in one place

How to show an alternative image if Iframe cannot load the resource in src? Using AngularJs?

I use iframeon one of my jsp pages and I need to assign an external address like srcthis iframe. It works as expected. However, sometimes when an external source is not available, I want to show a static image. I tried several ways but could not succeed.

Than I tried to use AngularJS (my last crushing) way to achieve this, but it looks like I'm missing something. Part of the file is attached below: -

<iframe ng-src="{{iframesrcurl}}" frameborder="0" width="100%" height="1100px" scrolling="auto" onload="load($event)" onerror="loadingError">
                                <h3>No such page</h3>
</iframe>

Js file has

myAppName.controller("myAppController", function ($scope, $sce) {
    $scope.iframesrcurl=$sce.trustAsResourceUrl('http://www.w3schools.com');
    console.log('iframesrcurl is '+$scope.iframesrcurl);
});

function load(e) {
    alert("Inside load function");
    alert(e);
}

function loadingError() {
    alert('Inside error function');
}

The problem is onload, and onerror functions are never called.

. html, javascript Angular , jquery .

, knockout.js, . , Angular .

+4
1

, . , . , , , . , ( $sce, , ), .

Plnkr: http://embed.plnkr.co/jTmWOLMN7LdiCZPIvuof/preview

HTML:

  <body ng-app='myApp' ng-controller="myAppController">
    <h1>Hello StackOverflow!</h1>

    <iframe-nanny desired-uri="desiredFrameSource" error-image-uri="errorImageSrc"></iframe-nanny>
  </body>

:

myAppName.controller("myAppController", function($scope, $sce) {
  $scope.desiredFrameSource = 'http://www.w3schools.com/test';
  $scope.errorImageSrc = 'https://cdn2.iconfinder.com/data/icons/contact-flat-buttons/512/thumb_down-512.png';
});

URL- . , . URI,

  $scope.desiredFrameSource = 'http://www.w3schools.com/test';

URI:

  $scope.desiredFrameSource = 'http://www.w3schools.com/';

, . . iframe, , YQL. , / .

myAppName.directive('iframeNanny', function($q, $http, $compile, $sce) {
  return {
    restrict: 'E',
    scope: {
      desiredUri: '=',
      errorImageUri: '='
    },
    link: function(scope, element, attrs) {
      var loadedUri = '';

      function isURLReal(fullyQualifiedURL) {
        var URL = encodeURIComponent(fullyQualifiedURL);
        var dfd = $q.defer();
        var yqlUri = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22' + URL + '%22&callback=JSON_CALLBACK';

        $http.jsonp(yqlUri)
          .success(function(data, status) {
            console.log(data.results.length);
            if (data.results.length) {
              console.log('success!')
              dfd.resolve(true);
            } else {
              dfd.reject(false);
            }
          }).error(function(data, status) {
            dfd.reject('failed');
          });

        return dfd.promise;
      }

      scope.$watch('desiredUri', function(uri) {
        if (loadedUri !== uri) {

          isURLReal(uri).then(function() { 
            console.log('directive: uri valid');
            loadedUri = uri;

            scope.trustedUri = $sce.trustAsResourceUrl(scope.desiredUri);

            var iFrameHtml = '<iframe src="{{trustedUri}}" frameborder="0" width="100%" height="1100px" scrolling="auto"></iframe>';

            var markup = $compile(iFrameHtml)(scope);
            element.empty();
            element.append(markup);
          }).catch(function() {
            console.log('directive: uri invalid');
            var badRequestImgHtml = '<img src="{{errorImageUri}}">';

            var markup = $compile(badRequestImgHtml)(scope);

            console.log(scope.errorImageUri);
            element.empty();
            element.append(markup);
          });
        }
      });
    }
  };
});

. !

+1

Source: https://habr.com/ru/post/1568147/

More articles:


All Articles