javascript - 我如何订阅(或观察)DOM 窗口并在任何更改时回调；不仅仅是窗口调整大小事件、滚动事件等？

Question

我试图观察窗口对象的任何属性更改，并在任何属性更改时触发事件。

例如:window.addEventListener('windowPropertiesChanged', () => {/* 做某事 */})

这可以通过某种订阅或观察者(变异观察者)来实现吗？是否有这样做的最佳实践？

预先感谢您的帮助。

Answer 1

非常有趣....如何隐藏整个代码的窗口对象并将其替换为代理？

let windowProxy = new Proxy (window, {
  get: function (target, prop) {
    console.log('Getting', target, prop);

    return target[prop];
  },

  set: function (target, prop, value) {
    console.log('Setting', target, prop);
    // Dispatch event here.

    target[prop] = value;

    return true;
  }
});

(() => {
    let window = windowProxy;

  // ALL YOUR CODE HERE

  window.scrollX = 5; // Setting Window ... scrollX
  console.log(window.scrollX); // Getting Window ... scrollX 5

})()

或者有点 hacky，但我想您可以在窗口对象中定义 getter 和 setter。它以某种方式起作用。这应该捕获从 js 所做的所有更改(例如，也来自插件等)

let fakeWindow = {};

for (let key of Object.keys(window)) {
  let descriptor = Object.getOwnPropertyDescriptor(window, key);

  if (!descriptor.configurable) {
        continue;
  }

  fakeWindow[key] = window[key];

  Object.defineProperty(window, key, {  
    set: function (value) {
      console.log('Setting', key, value);
      fakeWindow[key] = value;

      return true;  
    },

    get: function () {
      return fakeWindow[key];
    }
  });
}

console.log(window.scrollX); // 0
window.scrollX = 5; // Setting scrollX 5
console.log(window.scrollX); // 5

编辑:我刚刚意识到您可能想要跟踪浏览器所做的所有内部更改。我认为您唯一的选择是在给定的时间间隔内手动查找更改。

let windowCopy = {};

for (let key of Object.keys(window)) {
    windowCopy[key] = window[key];
}

function check() {
  for (let key of Object.keys(window)) {
    if (window[key] != windowCopy[key]) {
      console.log('Changed', key, window[key]);
      windowCopy[key] = window[key];
    }
  }
}

setInterval(check, 100);