Applying a load event to an element that doesn't exist on page load

Question

Similarly to this question Applying an onclick event to an element that doesn't exist on page load I am asynchronously loading an iFrame which I apparently can only style with javascript. However, I need to make some adjustments to the styling and therefore am trying to add an event to an element that is not there on page load. I figured that using the method in the answers to the aforementioned question, I could simply add a 'load' instead of a 'click' event.

    $('.widget-box').on('load','#iframeContainer',function(e){
        // my code
    });

This doesn't seem to work, however. Is there any other solution to my problem?

edit: as one of the commenters suggested, I used the mutation observer. It works now but doesn't seem very clean. If you have any suggestion for improvements, I'd be happy to hear.

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {

        (function($) {
            $('#okomoIframeContainer').load(function() {
                console.log('its loaded');
            })

        })(jQuery);
    });
});

observer.observe(widgetWrap, { childList: true });

edit2: Also, with this method I still can't modify the iframe's content because of the same-origin policy