How can I detect whether an iframe is loaded?

$(function(){
    $('#MainPopupIframe').load(function(){
        $(this).show();
        console.log('iframe loaded successfully')
    });
        
    $('#click').on('click', function(){
        $('#MainPopupIframe').attr('src', 'https://heera.it');    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src="" /></iframe>

window.onload = function(){
    var ifr = document.getElementById('MainPopupIframe');
    ifr.onload=function(){
        this.style.display='block';
        console.log('laod the iframe')
    };

    var btn = document.getElementById('click');    
    btn.onclick=function(){
        ifr.src="https://heera.it";    
    };
};

<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src="" /></iframe>

$(function(){
    $('#click').on('click', function(){
        var ifr = $('<iframe/>', {
            id:'MainPopupIframe',
            src:'https://heera.it',
            style:'display:none;width:320px;height:400px',
            load:function(){
                $(this).show();
                alert('iframe loaded !');
            }
        });
        $('body').append(ifr);    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button><br />