How to know if the iFrame has completed loading with javascript

Question

I would like to know which callback to use when the iframe has completed loading.

const iFrame = window.parent.document.getElementById('ReviewGeologueFrame'); 

iFrame.src = `/Review/GeologueFrame?id=${str}`;

iFrame.onreadystatechange = function (){

            if (iFrame.readyState !== 'loading')
            {
                console.log('iFrame has completed loading');

            }


}

When i tried the above snippet, there is no message in the console; what am doing wrong

Answer 1

You could always try using some jquery.

$('iframe').on('load', function () {
console.log('iFrame has completed loading'); });

This works for me. You might also want to look here . It is another Stackoverflow page where they discuss the same issue.