Estoy tratando de determinar si nodeJS es una solución viable para un proyecto de trabajo en mi pasantía. TLDR: necesito que mi archivo basicNode.js espere hasta que la apertura ('./basic.html') haya abierto completamente el navegador y cargado el contenido antes de llamar a cualquier otro código, ya sea desde basicNode.js o desde el cambio .js.
El objetivo/propósito final de basicNode.js debería ser abrir el html y, una vez cargado, llamar a la función changeThis() desde change.js para modificar el html para mostrar "Hola" en lugar de "Bienvenido a JavaScript". Intenté mezclar el orden de las cosas o tener algunos registros de la hora actual de salida de console.logs, etc. antes de llamar a las funciones de cambio, pero parece que no puedo abrir ('./basic.html') para completar completamente antes de cualquier intento está hecho para cambiar elementos html
<!DOCTYPE html> <html> <head> </head> <body> <p>Date/Time: <span id="datetime"></span></p> <p id="here">Welcome to JavaScript</p> <form> <input type="button" value="click" onclick="changeThis()"/> </form> </body> <script> var dt = new Date(); document.getElementById("datetime").innerHTML = dt.toLocaleString(); </script> <script type="text/javascript" src="change.js"></script> <!-- <script>waitForElementToDisplay("#here",function(){alert("Hi");},1000,9000);</script> --> </html> function changeThis() { document.getElementById("here").innerHTML = "Hello"; } function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) { var startTimeInMs = Date.now(); (function loopSearch() { if (document.querySelector(selector) != null) { callback(); return; } else { setTimeout(function () { if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs) return; loopSearch(); }, checkFrequencyInMs); } })(); } function sendAlert() { alert("Hi"); } module.exports={sendAlert}; module.exports={changeThis}; module.exports={waitForElementToDisplay}; const open = require('open'); var { change } = require('./change') const jsdom = require("jsdom"); const { JSDOM } = jsdom; global.document = new JSDOM('./basic.html').window.document; open('./basic.html'); change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000); change.changeThis();Si está preguntando por qué parece que open no "va primero", open('./basic.html') va primero, es solo una operación asíncrona y devuelve una Promise . Este es un tema avanzado para alguien que es nuevo en JS y Node, pero si desea ejecutar el script de cambio después de haber abierto definitivamente el archivo, deberá esperar la promesa. Puede leer todo sobre esto en el enlace a MDN arriba, y hay una tonelada de material en línea sobre este tema.
const open = require('open'); var { change } = require('./change') const jsdom = require("jsdom"); const { JSDOM } = jsdom; global.document = new JSDOM('./basic.html').window.document; const main = async () => { await open('./basic.html'); change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000); change.changeThis(); } main();Tenga en cuenta que he envuelto el código en una función asíncrona porque, por el momento, no puede usar la sintaxis asíncrona/espera en el ámbito global. Alternativamente, puede hacer lo que @ JSmart523 indicó:
const open = require('open'); var { change } = require('./change') const jsdom = require("jsdom"); const { JSDOM } = jsdom; global.document = new JSDOM('./basic.html').window.document; open('./basic.html').then(() => { change.waitForElementToDisplay("#here",change.sendAlert(),1000,9000); change.changeThis(); });