沐光

记录在前端之路的点点滴滴

背景水印与 MutationObserver

前言

因为项目需要配置背景水印,仅呈现背景水印这并没有什么难度,但是问题是当背景水印部分的代码通过什么原因被干掉了(例如:打开控制台,给背景水印部分代码加上 display: none),需要检测这个变化重新将水印更新会原状,emmmm,这就有的折腾了。于是乎就发现了 MutationObserver 方法,在此简单笔记一下。

MutationObserver 作用

简单来说,该方法就是用来监听 Dom 变化的,Dom 的任何微小变动它都能接受得到。引用一下阮老师对 Mutation Observer 的特点的描述:

  • 它等待所有脚本任务完成后,才会运行(即异步触发方式)
  • 它把 DOM 变动记录封装成一个数组进行处理,而不是一条条个别处理 DOM 变动。
  • 它既可以观察 DOM 的所有类型变动,也可以指定只观察某一类变动。

因此在父级元素上挂在一个 MutationObserver 事件监听方法,不就可以做到对背景水印元素变动的监听了么!

背景水印的解决思路

由于是公司内部代码,这里就不做粘贴了,仅说明一下水印的解决思路。

  • 检测 DOM 上是否存在水印节点,不存在则新增水印节点
  • 为水印节点新增 Mutation Observer 方法,观察其对应属性变化,更新监听

配合 Vue 的逻辑则是编写一个 vue 的全局指令,做到动态更新即可。

MutationObserver 示例

该例子只是对 Mutation Observer API 的学习例子,仅供参考。

传送门

参考文章