En mi aplicación creada con HTML y jQuery, estoy usando un elemento Object para incrustar una página que también es de mi aplicación dentro de otra página. Para facilitar la explicación, digamos que estoy usando un elemento Object para incrustar la página A en la página B.

Esta es la situación: cuando un usuario hace clic en un botón, el método onClick carga la página A en un elemento de objeto en la página B. Luego, elimino el encabezado y el pie de página de la página A dentro del elemento Object (haciendo esto también en el método onClick). ). El encabezado y el pie de página se eliminan para evitar la redundancia, ya que la página B es parte de la misma aplicación y, por lo tanto, tiene el mismo encabezado y pie de página.

Mi problema es que la parte de la función que elimina el encabezado y el pie de página no está esperando que el elemento del objeto cargue completamente la página A. Por lo tanto, cuando intenta eliminar los elementos del DOM, no puede encontrarlos porque no están completamente cargado.

Con fines de prueba, acabo de configurar un tiempo de espera para forzar la espera de la segunda parte de la función. Pero me gustaría que se ejecute inmediatamente después de cargar el elemento del objeto para que parezca más fluido. Mi función onClick se parece a la siguiente:

 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]); }

¿Alguien sabe de un buen enfoque para tomar aquí?