偶尔网上看到的API,MutationObserver 监听DOM,假如某个div的背景颜色发生变化了,就可以监听到,感觉有点用,在这记录一下
// 选择需要观察变动的节点(获取到DOM)
const targetNode = document.getElementById('app');
// 观察器的配置(需要观察什么变动)
const config = { attributes: true, childList: true, subtree: true };
// 当观察到变动时执行的回调函数
const callback = function() {
console.log('触发回调')
};
// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);
// 以上述配置开始观察目标节点
observer.observe(targetNode, config);
// 之后,可停止观察
observer.disconnect();
观察器的配置参数含义:
childList: true, // 观察目标子节点的变化,是否有添加或者删除
attributes: true, // 观察属性变动
subtree: true // 观察后代节点,默认为 false
举例:我在我的页面添加了一个水印(以背景图实现的水印),当别人要截该网页的图,但是又不想截上水印,懂行的朋友可能会打开控制台,选取加水印的元素,把该元素的背景图给取消勾选,这样截图就没有水印了,但是我就想让他截上水印,这个时候就用到了 MutationObserver
使用canvas画出水印的图,写在方法getWater中,页面刚加载是就运行方法,设置水印
然后就可以使用MutationObserver来监听设置水印元素的dom节点
MutationObserver的回调函数里面再执行一次设置水印的方法
这样就可以防止内行人通过控制台来取消水印了
传送门:MutationObserver - Web API 接口参考 | MDN
页面设置水印传送门:VUE项目前端页面添加水印_独孤孤独嘟咕噜轱辘将军'的博客-CSDN博客