In my application built with HTML and jQuery, I am using an Object element to embed a page that is also from my application within another page. For ease of explanation, let's say that I am using an Object element to embed page A into page B.

Here is the situation: When a user clicks a button, the onClick method loads page A into an object element on page B. Then, I remove the header and footer of page A within the Object element (doing this in the onClick method as well). The header and footer are being removed to avoid redundancy, as page B is a part of the same application and thus has the same header and footer.

My issue is that the part of the function that removes the header and footer is not waiting for the object element to fully load page A. Thus, when it tries to remove the elements from the DOM, it cannot find them because they are not fully loaded.

For testing purposes, I have just been setting a timeout to force the second part of the function to wait. But I would like to have it run immediately after the object element is loaded so it appears more seamless. My onClick function looks something like below:

function onClick() {
jQuery('#page_a_object_container').show();
jQuery('#page_a_object').attr('data', '/link/to/page/a');

// I would like the code below to wait to be ran until the object element is fully loaded
let headerAndFooterParent = document.querySelector('#page_a_object').contentDocument.children[0];
headerAndFooterParent.removeChild(headerAndFooterParent.children[1]);
headerAndFooterParent.removeChild(headerAndFooterParent.children[0]);
}

Anyone know of a good approach to take here?