Estoy tratando de cargar una página de inventario que creé dentro de otra página que creé. Utilizo la etiqueta para hacer esto llamando dinámicamente al enlace a través de javascript. Sin embargo, cuando hago esto, el DOM de la página incrustada parece estar vacío ya que la llamada a console.log muestra una matriz vacía. Cuando cargo la página de inventario directamente en el navegador, el código funciona según lo previsto y muestra una serie de divs.
Tengo una función en un archivo llamado ItemAPI.js para mi sitio web a continuación:
function fillInventory() { const weaponSlots = document.querySelectorAll('.weapon'); console.log(weaponSlots); //Once loaded do other things. }Se ve en mi página HTML a continuación:
<head> <script src= 'ItemAPI.js' type = module></script> </head> <body> <div class= 'inventory'> <div class = 'weapon'></div> <div class = 'weapon'></div> <div class = 'weapon'></div> <div class = 'weapon'></div> </div> </body>Cuando pruebo la página usando LiveServer a través de VSCode, la lista de divs con la clase de armas se imprime en la consola como dicta el código. Sin embargo, cuando cargo la página desde otra página que se muestra a continuación:
<head> <script src= 'AnotherJSFile.js' type = module></script> </head> <body> <embed src="../inventory-screen/inventory-screen.html" borderframe= 0> </body>Una matriz vacía se registra en la consola. Mi pregunta es ¿cómo funciona la integración de que los divs se registran correctamente cuando se carga directamente el archivo html en el navegador y no se registran correctamente cuando se cargan a través de la etiqueta?