You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何监听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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.21 22:39:17