Как проверить iframe загружен в JavaScript

Question

Я загружаю iframe, на которое требуется некоторое время для загрузки. Мне нужно проверить, что iframe полностью загрузился и получить высоту.

Может ли кто-нибудь сказать, как проверить, загружен ли iframe в JavaScript?

Answer 1

Вы можете использовать способ загрузки jQuery для загрузки iFrame, а затем в обратном вызове получить его содержимое. И в зависимости от содержимого iFrame вы можете принять дальнейшие решения.

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

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

Answer 2

В JavaScript, то script, img и iframe теги все поддерживают событие.

Вы можете использовать его в ванильным JS, который уже answered, либо:

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

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

Но если вам нужен пример того, как реализовать это в угловому конкретно, вы можете сделать это в контроллере или внутри функции ссылки директивы, используя аргумент element.

В контроллере:

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

В директиве:

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

В JavaScript вы можете слушать на DOMContentLoaded, то JQuery эквивалент документа готов, и так добавить слушателя событий OnLoad в 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>