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

320 views Asked by At

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

0

There are 0 answers