I embedded an iFrame on my website and the iFrame comes from the same domain as the website. I observed the content within the iFrame if it will change and then do something as reaction. I coded it like 8 months ago or so and suddenly it isn't working anymore. I don't really think I did any updates which could cause the code to not work anymore.

The error message I receive is Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

So I googled it and it seems that the jQuery selector isn't working as expected because the content of the iFrame isn't fully loaded I think.

Here is my code:

$(document).ready(function() {
    $('iframe').on('load', function() {
        checkIframeLoaded();
                
        function checkIframeLoaded() {
            var iframe = document.getElementById('test');
            var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                    
            if(iframeDoc.readyState  == 'complete') {   
                //this was original coded
                //observer.observe($('iframe').contents().find('.transition-group').first()[0], {
                observer.observe(iframe.contentWindow.document.getElementsByClassName('transition-group')[0], {
                    childList: true,
                    subtree: true
                });
                        
                return;
            } else {
                window.setInterval(checkIframeLoaded, 1000);
            }
        }
    )};
)};

I added the checkIframeLoaded function after I saw the error, originally there was just the observer. part of the code. Any ideas how I get this working? I believe I have to wait until the content is finished with loading but I think I already coded it.

Edit: When refreshing the browser, sometimes the error message goes away and sometimes not. So I would say it has something to do with the loading process.