如何监听JavaScript变量的声明、定义与可用状态?
如何监听变量的声明/创建事件?
我知道在CSS里可以这样监听某个类的可用状态:
let logo = document.querySelector('.test'); logo.addEventListener('load', (event) => { console.log('CSS class .test is defined now!'); });
我想要类似的、针对变量的「querySelector」式监听方法,比如像下面这样的逻辑:
logo = window.hasOwnProperty('window.myVariable'); logo.addEventListener('load', (event) => { console.log('window.myVariable is defined now!'); });
使用场景
我希望在外部异步加载的脚本创建目标变量后,立即执行自己的代码。
补充背景
我自己可控的网页里加载了一个第三方域名的JS脚本(不可控),这个脚本会加载同域名的更多代码。第二个脚本会创建window.something = { "key":"value",...},之后触发第三个脚本的加载。我想在这个变量可用、且第三个脚本执行前,用自己的JS代码修改它。
有人建议用Proxy,我尝试了先自行创建变量再用Proxy监听变化的方案:
<body> <script> // 预先创建变量 window.someVariable={"someKey":"someValue"}; // 设置Proxy监听器: var targetProxy = new Proxy(window.someVariable,{ set: function (target, key, value) { console.log(`${key} set to ${value}`); target[key] = value; // 检测到变化,说明第三方脚本修改了值 // ... 这里可以添加自定义代码 ... return true; } }); // 测试: console.log(window.someVariable); window.someVariable.someKey="NEW CONTENT"; console.log(window.someVariable); </script> <!-- 加载外部脚本 --> <script src="https://"></script> <!-- 页面其他内容 ... --> </body>
现在遇到的问题是:对方的软件在独立弹窗里运行,似乎有自己的作用域和独立的window.someVariable,不会覆盖我预先创建的这个变量。
内容的提问来源于stack exchange,提问作者jamacoe
相关产品推荐
相关产品推荐

