¿Cómo 'escuchar' el evento de que se ha declarado/creado una variable?
Desde CSS, sé que puedo activar la disponibilidad de una clase CSS como esta:
let logo = document.querySelector('.test'); logo.addEventListener('load', (event) => { console.log('CSS class .test is defined now!'); });Análogamente a eso, estoy buscando un 'querySelector' para variables, algo así como:
logo = window.hasOwnProperty('window.myVariable'); logo.addEventListener('load', (event) => { console.log('window.myVariable is defined now!'); });Uso: Quiero activar el código tan pronto como un script cargado asíncrono externo haya establecido la variable en cuestión.
EDITAR: algunos antecedentes En mi página web (código que controlo) estoy cargando un script .js de terceros de otro dominio (código que no controlo). Ese script que carga más código de su dominio. Este segundo script establece una variable 'window.something { "key":"value",...} y luego emite la carga de un tercer script. Quiero interactuar con mi código js para parchear la variable tan pronto como esté disponible y antes de que se ejecute el tercer script. @reyno sugirió el uso de Proxy. Mi último enfoque es establecer la variable yo mismo y luego observar los cambios usando Proxy.
<body> <script> // establish variable window.someVariable={"someKey":"someValue"}; // set up Proxy listener: var targetProxy = new Proxy(window.someVariable,{ set: function (target, key, value) { console.log(`${key} set to ${value}`); target[key] = value; // change occured, thus 3rd party set values // ... add more code here ... return true; } }); // test: console.log(window.someVariable); window.someVariable.someKey="NEW CONTENT"; console.log(window.someVariable); </script> <!-- load the external script --> <script src="https://"></script> <!-- rest of html page ... --> </body>El problema ahora es que el otro software, que se ejecuta en su propia ventana emergente, parece tener su propio alcance, una ventana 'propia'. algunaVariable, no sobrescribe la mía.
Primero, configure un detector de eventos personalizado, me gusta llamarlo "notificar".
document.addEventListener("notify", function() { console.log('window.myVariable is defined now!'); })En su secuencia de comandos que se cargará más tarde, active este detector de eventos cuando se cree su variable.
const myVariable = "hello world"; document.dispatchEvent(new Event("notify"));