如何检查iframe是否已在JavaScript中加载

Question

I am loading in an iframe which takes some time to load. I need to check that the iframe has loaded completely and get the height of it

Can anybody tell how to how to check iframe is loaded in JavaScript?

Answer 1

You can use jQuery's load method to load iFrame and then in the callback get the contents of that. And depending on the content of the iFrame you can make further decision.

$('#iFrame').load(cbLoaded);

function cbLoaded()
{
   var doc = $('#iFrame').contents()[0].documentElement;
   // Get contents here:
   var content = doc.innerText || doc.textContent;
}

Answer 2

In JavaScript, the script , img , and iframe tags all support a load event.

You can leverage it in vanilla JS, which is already answered , with either:

document.getElementById('#my-iframe').addEventListener('load', function () { ... });

document.getElementById('#my-iframe').onLoad = function() { ... };

But if you need an example of how to implement this in Angular specifically, you can do so in the controller or inside a directive's link function by using the element argument.

In a controller:

myApp.controller('SomeController', ['$scope', function($scope) {
  var iframe = angular.element('#my-iframe');
  iframe.on('load', function() {
    console.log(iframe.height());
  });
}]);

In a directive:

myApp.controller('SomeController', ['$scope', function($scope) {
  $scope.foo = 'bar';
}])
.directive('myDirective', ['$interval', function($interval) {
  function link(scope, element, attrs) {
    var iframe = element.find('#my-iframe');
    iframe.on('load', function() {
      $interval(function() {
        console.log(iframe.height();
      }, 1000);
    });
  }

  return {
    link: link
  };
}]);

Answer 3

In javascript you may listen on DOMContentLoaded , the jQuery equivalent of document ready, and so add the event listener onload to the iframe:

 document.addEventListener("DOMContentLoaded", function(e) { document.getElementById('ifrm').addEventListener('load', function(e) { document.body.innerHTML += '<p>Iframe loaded</p>'; }, false); }); 

 <iframe id='ifrm' src="https://www.wikipedia.org/"></iframe>