我试图观察窗口对象的任何属性更改,并在任何属性更改时触发事件。
例如:window.addEventListener('windowPropertiesChanged', () => {/* 做某事 */})
这可以通过某种订阅或观察者(变异观察者)来实现吗?是否有这样做的最佳实践?
预先感谢您的帮助。
最佳答案
非常有趣....如何隐藏整个代码的窗口对象并将其替换为代理?
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);
关于javascript - 我如何订阅(或观察)DOM 窗口并在任何更改时回调;不仅仅是窗口调整大小事件、滚动事件等?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61050802/