CODEWITHSUNDEEP
javascriptjquerydomiframe
cesrafa
cesrafa

Reputation: 105

Detect load of iframe (not same domain, dynamically added) in javascript or jQuery?

Is there a way to detect when an iframe is loaded in javascript / jQuery? With the following conditions:

I've read about this in other questions but either they are incomplete or do not assume these three conditions.

Thanks in advance.

ADDITION TO ANSWER OF @Jaromanda X: I needed to add to this answer an option in observer.observe(document.body, { childList: true }); making actually this: observer.observe(document.body, { childList: true, subtree: true });. The subtree option works also for all descendants of the target (this case document.body).

Upvotes: 2

Views: 3757

Answers (1)

Jaromanda X
Jaromanda X

Reputation: 1

Use mutation observer to detect when an iframe has been added to the DOM, then you can just add a load event listener to detect when the iframe has laoded

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        [].filter.call(mutation.addedNodes, function (node) {
            return node.nodeName == 'IFRAME';
        }).forEach(function (node) {
            node.addEventListener('load', function (e) {
                console.log('loaded', node.src);
            });
        });
    });
});
observer.observe(document.body, { childList: true, subtree: true });

Upvotes: 8

Related Questions